How to: Load an External Window or UserControl into a DocumentPanel

• Jun 07, 2019
• 3 minutes to read

You can define a Window, Page or UserControl in external XAML files and then, with DXDocking, load their contents into DocumentPanel objects. This example demonstrates how to load an external Window and UserControl into DocumentPanels. In the example three approaches are demonstrated:

1. The contents of MyWindow.xaml is loaded into a DocumentPanel at design time (in XAML) via the DocumentPanel.Content property. The Content property accepts a Uri object, which must refer to a XAML file defining a Window, Page or UserControl.

   Xaml

   <dxdo:DocumentPanel 
     x:Name="docPanel2" 
     Caption="Panel 2" 
     Content="{dxdo:RelativeUri UriString=CustomWindows\\MyWindow.xaml}"/>
   

2. The DocumentPanel.Content property is set to a Uri object at runtime:

   C#

   docPanel1.Content = new Uri(\@"CustomWindows\MyWindow1.xaml", UriKind.Relative);
   

3. The DockController.AddDocumentPanel method creates a new DocumentPanel object and loads the contents of an external XAML file into the created panel.

C#

panel1 = dockLayoutManager1.DockController.AddDocumentPanel(
    documentGroup1,
    new Uri(\@"CustomWindows\UserControl1.xaml", 
    UriKind.Relative)
);
panel1.Caption = "Document " + (ctr++).ToString();

In the example, the XAML file defines a UserControl object. The loaded UserControl is accessed via the DocumentPanel‘s Control property and then a method on the UserControl is invoked.

C#

//...

(panel1.Control as UserControl1).SetDataContext(imageInfo);

You can see this in action by clicking the “Set DataContext for UserControl” button in the example.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-load-an-external-window-or-usercontrol-into-a-documentpanel-e2410.

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Media.Imaging
Imports DevExpress.Xpf.Docking

Namespace DocumentPanel_Content
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub ActivateItem(ByVal item As BaseLayoutItem)
            dockLayoutManager1.LayoutController.Activate(item)
        End Sub

        'Load MyWindow1.xaml into docPanel1
        Private Sub btnSetContent_ItemClick(ByVal sender As Object, ByVal e As DevExpress.Xpf.Bars.ItemClickEventArgs)
            ActivateItem(docPanel1)
            docPanel1.Content = New Uri("CustomWindows\MyWindow1.xaml", UriKind.Relative)
        End Sub

        Private panel1 As DocumentPanel = Nothing
        Private ctr As Integer = 1

        Private Sub btnAddDockPanel_ItemClick(ByVal sender As Object, ByVal e As DevExpress.Xpf.Bars.ItemClickEventArgs)
            panel1 = dockLayoutManager1.DockController.AddDocumentPanel(documentGroup1, New Uri("CustomWindows\UserControl1.xaml", UriKind.Relative))
            panel1.Caption = "Document " & (ctr).ToString()
            ctr += 1

            DocumentPanel.SetMDISize(panel1, New Size(400, 300))
            DocumentPanel.SetMDILocation(panel1, New Point(200, 200))
            ActivateItem(panel1)
        End Sub
        Private Sub btnSetDataContext_ItemClick(ByVal sender As Object, ByVal e As DevExpress.Xpf.Bars.ItemClickEventArgs)
            If panel1 Is Nothing Then
                Return
            End If
            Dim uri As New Uri("/Images/IMG_1391.jpg", UriKind.Relative)
            Dim imageInfo As New ImageInfo()
            imageInfo.Source = New BitmapImage(uri)
            imageInfo.Description = uri.ToString()
            'Invoke a method on the loaded UserControl
            TryCast(panel1.Control, UserControl1).SetDataContext(imageInfo)

            ActivateItem(panel1)
        End Sub
    End Class
End Namespace

MainWindow.xaml

<Window 
    x:Class="DocumentPanel_Content.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking" 
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    dxc:ThemeManager.ThemeName="Office2007Black"
    Title="MainWindow" Height="684" Width="685">

    <dxb:BarManager Name="barManager1">
        <dxb:BarManager.Items>
            <dxb:BarButtonItem x:Name="btnSetContent" Content="Set Content for Panel 1" ItemClick="btnSetContent_ItemClick" />
            <dxb:BarButtonItem x:Name="btnSetDataContext" Content="Set DataContext for UserControl" ItemClick="btnSetDataContext_ItemClick" />
            <dxb:BarButtonItem x:Name="btnAddDockPanel" Content="Add Document Panel with UserControl" ItemClick="btnAddDockPanel_ItemClick" />

        </dxb:BarManager.Items>
        <dxb:BarManager.Bars>
            <dxb:Bar>
                <dxb:Bar.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="btnSetContent" />
                </dxb:Bar.ItemLinks>
            </dxb:Bar>
            <dxb:Bar>
                <dxb:Bar.DockInfo>
                    <dxb:BarDockInfo Row="1" />
                </dxb:Bar.DockInfo>
                <dxb:Bar.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="btnAddDockPanel" />
                    <dxb:BarButtonItemLink BarItemName="btnSetDataContext" />
                </dxb:Bar.ItemLinks>
            </dxb:Bar>

        </dxb:BarManager.Bars>
        <dxdo:DockLayoutManager Name="dockLayoutManager1">
            <dxdo:DockLayoutManager.LayoutRoot>
                <dxdo:LayoutGroup>
                    <dxdo:DocumentGroup x:Name="documentGroup1" SelectedTabIndex="1" DestroyOnClosingChildren="False" MDIStyle="MDI">
                        <dxdo:DocumentPanel x:Name="docPanel1" Caption="Panel 1" MDISize="300,250" />
                        <dxdo:DocumentPanel x:Name="docPanel2" Caption="Panel 2" MDILocation="100,100" MDISize="300,250" Content="{dxdo:RelativeUri UriString=CustomWindows\\MyWindow.xaml}" />
                    </dxdo:DocumentGroup>
                </dxdo:LayoutGroup>
            </dxdo:DockLayoutManager.LayoutRoot>
        </dxdo:DockLayoutManager>
    </dxb:BarManager>
</Window>

MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Media.Imaging;
using DevExpress.Xpf.Docking;

namespace DocumentPanel_Content {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        void ActivateItem(BaseLayoutItem item) {
            dockLayoutManager1.LayoutController.Activate(item);
        }

        //Load MyWindow1.xaml into docPanel1
        private void btnSetContent_ItemClick(object sender, DevExpress.Xpf.Bars.ItemClickEventArgs e) {
            ActivateItem(docPanel1);
            docPanel1.Content = new Uri(@"CustomWindows\MyWindow1.xaml", UriKind.Relative);
        }

        DocumentPanel panel1 = null;
        int ctr = 1;

        private void btnAddDockPanel_ItemClick(object sender, DevExpress.Xpf.Bars.ItemClickEventArgs e) {
            panel1 = dockLayoutManager1.DockController.AddDocumentPanel(documentGroup1,
                new Uri(@"CustomWindows\UserControl1.xaml", UriKind.Relative));
            panel1.Caption = "Document " + (ctr++).ToString();

            DocumentPanel.SetMDISize(panel1, new Size(400, 300));
            DocumentPanel.SetMDILocation(panel1, new Point(200, 200));
            ActivateItem(panel1);
        }
        void btnSetDataContext_ItemClick(object sender, DevExpress.Xpf.Bars.ItemClickEventArgs e) {
            if(panel1 == null) return;
            Uri uri = new Uri("/Images/IMG_1391.jpg", UriKind.Relative);
            ImageInfo imageInfo = new ImageInfo();
            imageInfo.Source = new BitmapImage(uri);
            imageInfo.Description = uri.ToString();
            //Invoke a method on the loaded UserControl
            (panel1.Control as UserControl1).SetDataContext(imageInfo);

            ActivateItem(panel1);
        }
    }
}