To start using Wpf-Dock in your project add the reference to the Wpf-Dock assembly using following steps:

  • In C# right-click References node in Solution Explorer and choose Add Reference context menu command. In the Add Reference find and select DevComponents WpfDock and click OK.
  • In VB double-click My Project node in Solution Explorer and click on References tab. Click Add button and in the Add Reference find and select DevComponents WpfDock and click OK.

Using DockSite

DockSite control is the class that controls all docking and layout functionality provided by Wpf-Dock. It is a root control for all dock windows. To add it to your window using XAML you use markup like this:

<dd:DockSite Name="AppDock" Margin="4,0,4,0"
    dd:DockWindow.Activated="DockWindowActivated" dd:DockWindow.Deactivated="DockWindowDeactivated"
    dd:DockWindow.Closing="DockWindowClosing" dd:DockWindow.Closed="DockWindowClosed">

Note that we are referencing DockSite control defined in dd namespace that you need to define in the root of your XAML (usually Window or RibbonWindow declaration) document with following statement:

xmlns:dd="clr-namespace:DevComponents.WpfDock;assembly=DevComponents.WpfDock"

Defining Dock Windows

Dock windows docked to the either side of the dock site are added through the SplitPanels collection on the DockSite control. Here is sample XAML that creates two dock window groups docked side by side:

<dd:DockSite.SplitPanels>
  <dd:SplitPanel dd:DockSite.Dock="Bottom" dd:DockSite.DockSize="150">
    <dd:DockWindowGroup dd:SplitPanel.RelativeSize="35,100">
      <dd:DockWindow Header="Layout" ImageSource="images/MyFiles16.png" Name="dockLayout">
        <TextBox/>
      </dd:DockWindow>
      <dd:DockWindow Header="Revisions" ImageSource="images/MyFiles16.png" Name="dockRevisions">
        <TextBox/>
      </dd:DockWindow>
    </dd:DockWindowGroup>
    <dd:DockWindowGroup dd:SplitPanel.RelativeSize="65,100">
      <dd:DockWindow Header="Find Results 1" ImageSource="images/MyFiles16.png" Name="dockFindResults1">
        <TextBox Name="FindResults1" VerticalScrollBarVisibility="Auto"/>
      </dd:DockWindow>
      <dd:DockWindow Header="Find Results 2" ImageSource="images/MyFiles16.png" Name="dockFindResults2">
        <TextBox Name="FindResults2" />
      </dd:DockWindow>
    </dd:DockWindowGroup>
  </dd:SplitPanel>
</dd:DockSite.SplitPanels>

SplitPanel is the control that provides single line layout for the controls it contains, either horizontal or vertical. It also provides the splitter between the controls so they can be resized. SplitPanel controls can be nested to create any layout you want.

DockWindowGroup is the control that provides shell for dock windows, like caption and tabs for the DockWindow controls that are added to its Items collection. DockWindowGroup is used to presents the DockWindow content and it should never be visible empty, i.e. without any visible DockWindow controls.
DockWindow control defines actual docking window, its header (usually tab text) and its content. It also has properties, events and methods that control docking behavior.

Each SplitPanel control added to the DockSite.SplitPanels collection uses DockSite.Dock attached property to specify the side panel is docked to. The order in which SplitPanel controls are added to the DockSite.SplitPanels collection determines their docking layout. Attached property DockSite.DockSize specifies the absolute size of the panel when it is docked. This applies only to the controls that are directly added to the DockSite.SplitPanels collection. SplitPanel nested within each other use relative sizing explained below. If panel is docked to top or bottom this property specifies its height. When panel is docked to left or right side this property specifies panels width.

Each panel contains one or more DockWindowGroup controls that are arranged in single line. By default if panel is docked to either left or right side the controls inside are arranged vertically. If panel is docked to bottom or top side the controls are arranged horizontally. This provides the split docking window layout.

The size of the controls inside of the SplitPanel is specified by attached property SplitPanel.RelativeSize. In the sample above you can see this on each DockWindowGroup control that is added to the panel. Size specified is relative size not absolute. For example, if panel is docked to the bottom, as in sample above, and first DockWindowGroup size is specified as 35, 100 and second as 65,100 that indicates that first DockWindowGroup will consume 35% of the panel size and second DockWindowGroup 65%. Note that for ease of explanation the size in example adds up to 100, but that is not necessary since layout engine will add up all the widths for the controls and size controls based on that. Also note, that SplitPanel layout engine does not use both sizes specified. The Width is used when panel arranges controls horizontally and Height specified is used when controls are arranged vertically.

DockWindowGroup control contains one or more DockWindow controls that define the dock window.
DockWindow.Header property specifies the header for the dock window, usually text, but you can use any WPF control instead. the DockWindow.Image and DockWindow.ImageSource are mutually exclusive and specify the image that is displayed next to the text on dock tabs. DockWindow.Content specifies the actual content of the docking window.

Explore properties, methods and events on DockWindow control since they define the actual DockWindow behavior. Properties like CanDockLeft, CanDockRight, etc. indicates whether DockWindow can be docked at certain sides. Commands like FloatWindow, ReDockWindow and others provide an easy way to float or re-dock a window. Events like Closing, Closed, AutoHideChanged etc. provide information on DockWindow state changes.

Document Docking

Document docking uses same concepts explained above with one key difference. The SplitPanel is not added to the SplitPanels collection, rather it is assigned to the DockSite.Content property.

Please explore the RibbonPad sample included with DotNetBar for WPF which is an excellent primer on Wpf-Dock window functionality and usage.

Related posts:

  1. How to Create WPF Docking Windows Using Code Only
  2. Key Wpf-Dock DockWindow Properties, Events and Commands
  3. How to access WPF Dock Floating Window
  4. Docking Control support for Windows Forms or other windowed controls in DotNetBar for WPF
  5. How to customize WPF Office 2007 Color Schemes