Overview
The WinUI Docking Manager control provides a Visual Studio-style docking interface for modern desktop applications. Organize content into docked, floating, auto-hidden, and tabbed windows to create flexible, productive workspaces. Users can easily customize layouts by arranging panes, managing documents, and adjusting window behavior.
WinUI Docking Manager code example
Get started with the WinUI Dock Layout control using a few simple lines of XAML and C# code, as shown below. This control helps organize application content into docked, floating, auto-hidden, and tabbed windows, allowing users to build customizable workspace layouts.
<syncfusion:SfDockingManager>
<syncfusion:DockPane Header="Solution Explorer" />
<syncfusion:DockPane Header="Toolbox" />
<syncfusion:DockPane Header="Properties" />
<syncfusion:DockPane Header="Output" />
<syncfusion:DockPane Header="Start Page" />
</syncfusion:SfDockingManager>using Microsoft.UI.Xaml;
using Syncfusion.UI.Xaml.Docking;
namespace DockLayoutSample
{
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
SfDockingManager dockingManager = new SfDockingManager();
DockPane solutionExplorer = new DockPane()
{
Header = "Solution Explorer"
};
DockPane toolbox = new DockPane()
{
Header = "Toolbox"
};
DockPane properties = new DockPane()
{
Header = "Properties"
};
DockPane output = new DockPane()
{
Header = "Output"
};
DockPane startPage = new DockPane()
{
Header = "Start Page"
};
dockingManager.Children.Add(solutionExplorer);
dockingManager.Children.Add(toolbox);
dockingManager.Children.Add(properties);
dockingManager.Children.Add(output);
dockingManager.Children.Add(startPage);
this.Content = dockingManager;
}
}
}Different types of docking windows
Create adaptable workspaces with multiple docking window types. Display content as docked panels, document tabs, floating windows, auto-hidden panes, or tabbed groups. Users can switch between different window types to organize their workspace and access information efficiently.
Auto-hide panels
Maximize workspace by automatically hiding tool windows when they are not in use. Auto-hidden panels remain accessible through edge tabs and can be quickly revealed when required. This helps users focus on their primary content while keeping important tools within easy reach.
Floating windows
Detach docked panes into independent floating windows and position them anywhere on the screen. Floating windows offer greater workspace flexibility and are especially useful in multi-monitor environments. Users can easily move windows between displays and return them to the docking layout whenever needed.
Drag-and-drop docking
Customize layouts through intuitive drag-and-drop interactions. Move panes between docking regions, convert docked panels into floating windows, and reorganize content at runtime. Interactive docking lets users create custom workspaces without additional configuration.