DOCKING IN WPF

Giving your WPF Application Docking Capabilities

Posted in WPF at 5:35 pm by Cal

CIS-019M (Spring 2007) Blogging Assignment
Contributor: Alek Davis

Alek’s Blog
Docking different elements in a WPF application can quite easily be accomplished using a WPF DockPanel container. However, it is much more complicated to give your application the capability of letting users dock various floatable windows at different locations around your application.? As developers we are all familiar with this latter type of capability as provided by Visual Studio.?

A member of The Code Project community recently posted a sample project illustrating how to implement docking windows in a WPF application. This sample project is called WPF Docking Library and can be found at the Code Project. This sample does not rely on Win32 interop and implements all of its functionality using WPF. It consists of two projects: a library which implements these docking features and a separate WPF application which demonstrates how this library can be used. Both projects are written in C#.
The docking library in the DockingLibary project consists of several classes, the most important of which is DockManager. DockManager is a custom (user) control responsible for arranging docking windows over which it has been given control. You can define a DockManager control in the application window either using XAML or programmatically. For example, you can embed DockManager in a DockPanel in the application window’s XAML file (notice that you must first reference the DockingLibrary namespace)
<Window
? ? ? ? ? ? ? x:Class=”DockingDemo.MainWindow”
? ? ? ? ? ? ? xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“? ? ? ? ? ? xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
? ? ? ? ? ? ? Title=”DockingDemo” Height=”500″ Width=”500″
? ? ? ? ? ? ? ? xmlns:custom=”clr-namespace:DockingLibrary;assembly=DockingLibrary” …>
<DockPanel>
< Menu DockPanel.Dock=”Top”>
…
< /Menu>
< custom:DockManager Name =”DockManager”/>
< /DockPanel>
< /Window>
Once you create a DockManager object, you can add dockable windows to it by calling the DockManager’s AddContent method. AddContent takes two parameters: the window object and? a dock anchor location (either Dock.Left, Dock.Top, Dock.Right, or Dock.Bottom). AddContent can dock any type of control derived from System.Windows.Window as well as objects derived from the DockingLibrary’s ManagedContent class (ManagedContent is a simple wrapper class that contains a Window object), such as:
// dockManager is a DockManager object.
// TreeViewWindow is derived from Window.
TreeViewWindow explorerWindow = new TreeViewWindow();
…
dockManager.AddContent(explorerWindow, Dock.Right);
Note that only those windows (or other types of objects which are derived from the DockingLibrary’s ManagedContent class) which have been added to the DockManager’s Content property can then be manipulated by a user of the application.?
DockManager implements docking with the help of the Pane class which is used to represent a dockable window. A Pane object holds one or more ManagedContent objects and can be docked to any of the four sides of the parent DockManager. In addition to Panes, DockManager can dock a DocumentsPane-derived object holding tabbed document windows (these windows cannot be docked outside of the DocumentsPane). To add a? new document window, DockManager uses the AddDocumentContent method, for example:
// docManager is a DockManager object.
// DocumentWindow is derived from Window.
DocumentWindow doc = new DocumentWindow();
…
dockManager.AddDocumentContent(doc);
DocManager maintains its window layout with the help of an algorithm that manages the relationships between docked windows. This algorithm arranges the windows as a logical tree, where each node contains a group of two Panes or a Pane and a child group separated by a vertical or a horizontal splitter. To arrange the windows, DockManager uses the DockingGrid class (also implemented in the Docking Library), which creates a WPF grid for each group using either two columns or two rows, depending on the split orientation.
The DockingDemo project (included with the Source Code) uses the WPF Docking Library to arrange four sample dockable windows. These dockable windows can be rearranged by the user using standard drag-and-drop. When dragging a window, the application displays anchors pointing to the areas where this window can be dropped.
The Docking Library is not extremely complicated to use, but I believe that it would be much easier to understand if it contained more extensive comments. Also, I noticed that Visual Studio cannot display any window which holds a DockManager control in the VS designer (it complains about not being able to locate the DockingLibrary assembly). This seems like a limitation of Visual Studio that hopefully will be addressed in a subsequent Orca release.? Fortunately, this is a design time issue which does not cause any run-time errors. Please note too that this sample project can be viewed and run without difficulty in the release version of Expression Blend (1.0).
Please note that as of the date that this review was written, the WPF Docking Library Project is essentially in beta form and is not yet recommended for production projects.? On May 21, the author stated that he was working on a more powerful and stable version.