Create Visual Studio-like Docking Windows in WPF

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.

Overview

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:

• Dock
• Float
• Document
• Autohidden

Getting Started with The Docking Manager

Configure the WPF application for the docking manager by following these steps:

1. In Visual Studio, create a new WPF project. For our demonstration, we are going to name it VisualStudioLikeDockWindow.
2. Install Syncfusion.Tools.WPF NuGet package to the project.
3. Add the XML namespace with a prefix in XAML. Here we used syncfusion as a prefix for the namespace.

   <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>
   

4. Add DockingManager to the window using the namespace prefix.

   <syncfusion:DockingManager x:Name="SyncDockingManager">
   </syncfusion:DockingManager>
   

5. Add child controls to create your docking window. The child controls can be any FrameworkElement. In this example, shown in the next step, we have added four ContentControl as children.
6. Set headers for the docking windows using the attached property Header of the docking manager.

   <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>
   

7. Set the VisualStyle of the application to one of the visual styles. Here we set it to VS2010. A complete list of the available styles can be found in our documentation.

   <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

Arranging and Docking Windows

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 Windows

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

Tab groups

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);

Float Docking or Document Windows

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>

Close and Pin Dock Windows

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

Layout Persistence

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();

Conclusion

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.