As .NET developers, we have all worked in Visual Studio and at some point may have wondered about the docking windows that hold the Solution Explorer, Code Window, Toolbox, and others. Visual Studio-style docking windows allow you to resize, move, and change the behavior of windows to create a layout that suits various development models. The Syncfusion docking manager allows users to create their own layouts by just dragging and dropping windows to the desired positions. Users can persist the layout with built-in serialization options. Every part of the docking windows can be customized, and a variety of built-in themes are included for changing the window appearance.
In this blog post, we will demonstrate how to create Visual Studio-like docking windows in a WPF application and customize their layouts.
The docking manager component lets you add Visual Studio-style docking windows and tabbed document interfaces to your application. It allows the interactive dragging of docking windows around the screen to make them float over any location. As in Visual Studio, the docking manager offers different kinds of windows:
Configure the WPF application for the docking manager by following these steps:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf" >
</Window>
<syncfusion:DockingManager x:Name="SyncDockingManager"> </syncfusion:DockingManager>
<syncfusion:DockingManager x:Name="DockingManager" > <ContentControl Name="Output” syncfusion:DockingManager.Header="Output"> <!-- Output docking window --> </ContentControl> <ContentControl Name="SolutionExplorer"syncfusion:DockingManager.Header="Solution Explorer"> <!-- Solution Explorer docking window --> </ContentControl> <ContentControl Name="Properties" syncfusion:DockingManager.Header="PropertiesWindow"> <!-- Properties docking window --> </ContentControl> <ContentControl Name="Toolbox" syncfusion:DockingManager.Header="Toolbox"> <!-- Toolbox docking window --> </ContentControl> </syncfusion:DockingManager>
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
syncfusion:SkinStorage.VisualStyle="VS2010"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf" >
</Window>
Docking Windows before arranging
Like the Toolbox and Solution Explorer windows in Visual Studio, customers expect to dock windows at any side of a container. The docking manager allows users to dock the windows anywhere in the docking manager by setting the SideInDockMode attached property.
The docking manager also introduces the attached property TargetNameInDockedMode to decide whether a window is to be docked relative to the docking manager or another docking window. Arrange the child windows as tabbed windows, by using the tabbed option in SideInDockMode.
DesiredHeightInDockedMode and DesiredWidthInDockedMode help control the size of the docking windows.
Here we are going to add tabs to the Solution Explorer and Output children of DockingManager.
<syncfusion:DockingManager x:Name="DockingManager" >
<ContentControl Name="Output" syncfusion:DockingManager.Header="Output"
syncfusion:DockingManager.SideInDockedMode="Bottom"
syncfusion:DockingManager.DesiredHeightInDockedMode="150">
<!-- Output docking window -->
</ContentControl>
<ContentControl Name="FindResults" syncfusion:DockingManager.Header="Find Results"
syncfusion:DockingManager.SideInDockedMode="Tabbed"
syncfusion:DockingManager.TargetNameInDockedMode="Output" >
<!-- Find Results docking window -->
</ContentControl>
<ContentControl Name="ErrorList" syncfusion:DockingManager.Header="Error List"
syncfusion:DockingManager.SideInDockedMode="Tabbed"
syncfusion:DockingManager.TargetNameInDockedMode="Output" >
<!-- Error List docking window -->
</ContentControl>
<ContentControl Name="SolutionExplorer"
syncfusion:DockingManager.Header="Solution Explorer"
syncfusion:DockingManager.SideInDockedMode="Right"
syncfusion:DockingManager.DesiredWidthInDockedMode="200">
<!-- Solution Explorer docking window -->
</ContentControl>
<ContentControl Name="ClassView" syncfusion:DockingManager.Header="Class View"
syncfusion:DockingManager.SideInDockedMode="Tabbed"
syncfusion:DockingManager.TargetNameInDockedMode="SolutionExplorer" >
<!-- Class View docking window -->
</ContentControl>
<ContentControl Name="Properties" syncfusion:DockingManager.Header="Properties Window"
syncfusion:DockingManager.SideInDockedMode="Tabbed"
syncfusion:DockingManager.TargetNameInDockedMode="SolutionExplorer" >
<!-- Properties docking window -->
</ContentControl>
<ContentControl Name="Toolbox" syncfusion:DockingManager.Header="Toolbox"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="180">
<!-- Toolbox docking window -->
</ContentControl>
</syncfusion:DockingManager>
Docking Windows after arranging
Configure document states to build a Visual Studio-like tabbed document. Add document windows just as you would docking windows. Additionally, set the value of the UseDocumentContainer property as True and set Document as the value of the State property of child windows.
<syncfusion:DockingManager x:Name="SyncDockingManager" UseDocumentContainer="True"> <ContentControl Name="MainWindowXAMLView" syncfusion:DockingManager.Header="MainWindow.xaml" syncfusion:DockingManager.State="Document"> </ContentControl> <ContentControl Name="MainWindowCSView" syncfusion:DockingManager.Header="MainWindow.xaml.cs" syncfusion:DockingManager.State="Document"> </ContentControl> </syncfusion:DockingManager>
Visual Studio-Like Docking Windows
The docking manager allows you to create a group of tabbed documents similar to Visual Studio. Tab groups split the workspace and allow users to work with two or more open documents. This can be created in horizontal and vertical directions and allow documents to be shuffled between them. New Horizontal Tab Group and New Vertical Tab Group options are available in the context menu of every document and will be displayed when users right-click the tab header of a document.
Document Tab Group
Create tab groups programmatically by passing the child window as an argument to the CreateHorizontalTabGroup or CreateVerticalTabGroup methods.
DockingManager.CreateHorizontalTabGroup(MainWindowXAMLView); DockingManager.CreateVerticalTabGroup(MainWindowXAMLView);
We can drag and float the docking and document windows over any location on the screen. By default drag the docking windows by clicking and dragging the title of the window. But document windows can be dragged by clicking and dragging the tab header of the corresponding document once IsVS2010DraggingEnabled is enabled. Alternatively, docking and document windows can float by double-clicking on window captions. To enable this float functionality on double-clicking a document, set the EnableDocumentToFloatOnDoubleClick property of the docking manager as True.
Float windows in the docking manager are pop-ups with size restrictions. To overcome this limitation, you can configure the float window as a WPF window by enabling UseNativeFloatWindow.
<syncfusion:DockingManager x:Name="SyncDockingManager" UseDocumentContainer="True" UseNativeFloatWindow="True" EnableDocumentToFloatOnDoubleClick="True" IsVS2010DraggingEnabled="True"> </syncfusion:DockingManager>
The docking manager provides dock hints that indicate a valid drop location when users are dragging the float window. When a window is about to be docked, a dock preview will be displayed to show where the window will be placed.
Floating Window
Whenever you’re in a situation to create non-floatable windows, you can use the CanFloat attached property of the docking manager to restrict the docking and document windows.
<ContentControl Name="MainWindowXAMLView" syncfusion:DockingManager.State="Document"
syncfusion:DockingManager.CanFloat="False">
</ContentControl>
If you don’t want any more windows in your application, docking windows can be closed by clicking the Close button in their title bar. Close the document windows by selecting their corresponding tab and using the common Close button at the right of the document container. Every document can have a separate Close button in its corresponding tab by setting the DocumentCloseButtonType property as Individual.
DockingManager.DocumentCloseButtonType = CloseButtonType.Individual;
To restore a closed window to your application, pass the specific child window to RestoreElement.
DockingManager.RestoreElement(SolutionExplorer);
The docking manager also allows users to pin docking windows to the edges of the work area. Pinning docking windows automatically hides them to any side of the screen and their names appear on tabs at the edges of the container. To use the pinned windows again, just mouse over a tab and that window will slide back into view. The Pin button in the title bar lets you pin and re-dock the window to the view.
Auto-hidden Window
The docking manager allows you to save the docked window arrangements automatically while closing the application by enabling PersistState. It also lets users save the current docking layout of the application with SaveDockState. When you want to load the saved layout back into your application, it can be restored by using LoadDockState.
DockingManager.PersistState = true; // To save the current layout of DockingManager DockingManager.SaveDockState(); // To load the last saved layout of DockingManager DockingManager.LoadDockState();
Now you can create Visual Studio-style layouts for your applications and customize your window layouts to best fit various development workflows.
In this blog, we covered just the basic features of the docking manager. For more information and details about other advanced topics, please refer to our documentation, where you will see code samples for features not covered here. Other features you can learn about include handling window state changes, dockability, multiple document interfaces, and much more.
Feel free to share your feedback in the comments below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!
The sample code for the features explained in this blog post can be downloaded from this GitHub repository.