What’s New: Docking Controls for WPF

In 2009 v3, we here at ComponentOne released a set of docking controls for Silverlight. With docking controls you can create an MDI application where users can dock, undock, and float various windows within the application. This type of UI is common in many applications, such as Adobe Photoshop and Microsoft Visual Studio. Now in 2010 we have these exact same, fully compatible controls for WPF. DockControl for WPF includes several new controls for your WPF toolbox: C1DockControl - this is the root container element for docking C1DockTabControl - Based off of C1TabControl; a container for multiple, dockable tabs. C1DockingTabItem - A single, dockable tab C1DockGroup - A container for multiple C1DockTabControls which allows more alignment scenarios Together these controls give you a full docking system for your WPF applications that can mimic the exact docking systems used in Microsoft Visual Studio and Expression Blend. The C1DockTabControl is based off of the C1TabControl. This control offers features like scrolling, multiple tab shapes, a drop-down tab list, and the ability to close tabs. With C1DockTabControl, you also get the ability to make tabs sliding just like you see in Visual Studio. C1DockControl provides splitters between tabs and groups for end-user resizing capabilities. These splitters can be customized. DockControl for WPF is great for XBAP applications where you normally have restrictions when it comes to handling multiple windows. The C1DockControl makes it possible to dock and float windows in the form of tabs in your XBAPs. If you just want a floating window without docking, you should check out ComponentOne Windows. You can check out a live demo of this control in the Studio for WPF Control Explorer. To get started developing, you should download Studio for WPF which includes all of the ComponentOne Docking controls. You need to add references to C1.WPF.dll, C1.WPF.Docking.dll and the WPFToolkit.


xmlns:c1="clr-namespace:C1.WPF;assembly=C1.WPF"  
xmlns:c1Docking="clr-namespace:C1.WPF.Docking;assembly=C1.WPF.Docking"  

Below is the XAML to this sample docking layout: XAML:


<c1Docking:C1DockControl  x:Name="dockControl">  
            <c1Docking:C1DockGroup>  
                <c1Docking:C1DockTabControl Dock="Top">  
                    <c1Docking:C1DockTabItem Header="Tab 1" TabShape="Sloped">  
                        <!--Your Content Here-->  
                    </c1Docking:C1DockTabItem>  
                    <c1Docking:C1DockTabItem Header="Tab 2" TabShape="Sloped">  
                        <!--Your Content Here-->  
                    </c1Docking:C1DockTabItem>  
                </c1Docking:C1DockTabControl>  
                <c1Docking:C1DockTabControl>  
                    <c1Docking:C1DockTabItem Header="Tab 3" TabShape="Sloped" >  
                        <!--Your Content Here-->  
                    </c1Docking:C1DockTabItem>  
                </c1Docking:C1DockTabControl>  
            </c1Docking:C1DockGroup>  
            <c1Docking:C1DockGroup>  
                <c1Docking:C1DockTabControl Dock="Top" DockWidth="500" DockHeight="500" TabItemShape="Rounded">  
                    <c1Docking:C1DockTabItem Header="Tab 4">  
                        <!--Your Content Here-->  
                    </c1Docking:C1DockTabItem>  
                    <c1Docking:C1DockTabItem Header="Tab 5">  
                        <!--Your Content Here-->  
                    </c1Docking:C1DockTabItem>  
                </c1Docking:C1DockTabControl>  
                <c1Docking:C1DockTabControl>  
                    <c1Docking:C1DockTabItem Header="Tab 6">  
                        <!--Your Content Here-->  
                    </c1Docking:C1DockTabItem>  
                </c1Docking:C1DockTabControl>  
            </c1Docking:C1DockGroup>  
            <c1Docking:C1DockTabControl>  
                <c1Docking:C1DockTabItem Header="Tab 7" TabShape="Sloped">  
                    <!--Your Content Here-->  
                </c1Docking:C1DockTabItem>  
                <c1Docking:C1DockTabItem Header="Tab 8" TabShape="Sloped">  
                    <!--Your Content Here-->  
                </c1Docking:C1DockTabItem>  
            </c1Docking:C1DockTabControl>  
</c1Docking:C1DockControl>  

When we run this, we drag the Tab 1 and Tab 2 group and we get Visual Studio-style docking right out of the box. The Visual Studio-style docking is nice, but sometimes we want to customize the look and behavior of the docking. Microsoft Expression Blend gives us a nice example of another style of docking; a more "natural" style. Rather than using a docking-diamond you simply drag the docked tab to the exact location you want to move it. Then you get colored regions and lines marking the drop zone.

Sample: Blend-style Docking for WPF

With C1DockControl we can implement other styles of docking by designing a few custom styles for the control: PreviewStyle, OuterPickerStyle, and InnerPickerStyle. PreviewStyle basically defines the shaded regions and the behavior the user sees as they preview where a section is about to be docked. OuterPickerStyle basically defines the look and behavior of the docking-diamond used for the outer C1DockControl container. InnerPickerStyle defines the look and behavior of the docking-diamond used for the inner C1DockGroups or C1DockTabControls. For our natural, Blend-like docking sample, we will be eliminating the docking-diamond. We need to capture the user dragging on the edge of the form rather than on the docking-diamond for each dock position. This can be accomplished with the OuterPickerStyle and InnerPickerStyle resources (see XAML link below). Then, we want to display a solid line marking the exact location of the docking zone, along with the shaded region. We accomplish this with the PreviewStyle below (note: this is slightly different than the Silverlight example we provide). DockControl Styles XAML Then we wire these styles up to our C1DockControl.


<c1Docking:C1DockControl  x:Name="dockControl" PreviewStyle="{StaticResource PreviewStyle}" OuterPickerStyle="{StaticResource OuterPickerStyle}" InnerPickerStyle="{StaticResource InnerPickerStyle}">  
...  

And wala, we have a customized docking style like that of Expression Blend.

Download Sample (C# VS2008)

Greg Lutz

comments powered by Disqus