How to place tabbed children of WPF DockingManager at different sides?
The tabbed children of WPF DockingManager can be placed at different sides such as Top, Left, Right and Bottom Using DockTabAlignment property of the DockingManager. The tabbed children would be placed at bottom by default.
The following code snippet illustrates when the DockTabAlignment as Top:
XAML
<Window x:Class="DockingManager.MainWindow" 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" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Top"> <ContentControl x:Name="content1" syncfusion:DockingManager.Header="Tabbed1" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content2" syncfusion:DockingManager.Header="Tabbed2" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content3" syncfusion:DockingManager.Header="Tabbed3" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content4" syncfusion:DockingManager.Header="Tabbed4" syncfusion:DockingManager.State="Dock"/> </syncfusion:DockingManager> </Grid> </Window>
C#
using Syncfusion.Windows.Tools.Controls; namespace DockingManager { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DockingManager dockingmanager = new DockingManager(); ContentControl content1 = new ContentControl(); dockingmanager.UseDocumentContainer = true; DockingManager.SetHeader(content1, "Tabbed1"); DockingManager.SetState(content1, DockState.Dock); ContentControl content2 = new ContentControl(); DockingManager.SetHeader(content2, "Tabbed2"); DockingManager.SetState(content2, DockState.Dock); ContentControl content3 = new ContentControl(); DockingManager.SetHeader(content3, "Tabbed3"); DockingManager.SetState(content3, DockState.Dock); ContentControl content4 = new ContentControl(); DockingManager.SetHeader(content4, "Tabbed4"); DockingManager.SetState(content4, DockState.Dock); //Setting DockTabAlignmenet as Top side dockingmanager.DockTabAlignment = Dock.Top; dockingmanager.Children.Add(content1); dockingmanager.Children.Add(content2); dockingmanager.Children.Add(content3); dockingmanager.Children.Add(content4); Grid1.Children.Add(dockingmanager); } } }
The following screenshot shows the tabbed children aligned at top side.
The following code snippet illustrates when the DockTabAlignment as Left:
XAML
<Window x:Class="DockingManager.MainWindow" 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" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Left"> <ContentControl x:Name="content1" syncfusion:DockingManager.Header="Tabbed1" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content2" syncfusion:DockingManager.Header="Tabbed2" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content3" syncfusion:DockingManager.Header="Tabbed3" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content4" syncfusion:DockingManager.Header="Tabbed4" syncfusion:DockingManager.State="Dock"/> </syncfusion:DockingManager> </Grid> </Window>
C#
using Syncfusion.Windows.Tools.Controls; namespace DockingManager { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DockingManager dockingmanager = new DockingManager(); ContentControl content1 = new ContentControl(); dockingmanager.UseDocumentContainer = true; DockingManager.SetHeader(content1, "Tabbed1"); DockingManager.SetState(content1, DockState.Dock); ContentControl content2 = new ContentControl(); DockingManager.SetHeader(content2, "Tabbed2"); DockingManager.SetState(content2, DockState.Dock); ContentControl content3 = new ContentControl(); DockingManager.SetHeader(content3, "Tabbed3"); DockingManager.SetState(content3, DockState.Dock); ContentControl content4 = new ContentControl(); DockingManager.SetHeader(content4, "Tabbed4"); DockingManager.SetState(content4, DockState.Dock); //Setting DockTabAlignmenet as Left side dockingmanager.DockTabAlignment = Dock.Left; dockingmanager.Children.Add(content1); dockingmanager.Children.Add(content2); dockingmanager.Children.Add(content3); dockingmanager.Children.Add(content4); Grid1.Children.Add(dockingmanager); } } }
The following screenshot shows the tabbed children aligned at Left side.
The following code snippet illustrates when the DockTabAlignment as Right:
XAML
<Window x:Class="DockingManager.MainWindow" 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" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Right"> <ContentControl x:Name="content1" syncfusion:DockingManager.Header="Tabbed1" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content2" syncfusion:DockingManager.Header="Tabbed2" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content3" syncfusion:DockingManager.Header="Tabbed3" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content4" syncfusion:DockingManager.Header="Tabbed4" syncfusion:DockingManager.State="Dock"/> </syncfusion:DockingManager> </Grid> </Window>
C#
using Syncfusion.Windows.Tools.Controls; namespace DockingManager { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DockingManager dockingmanager = new DockingManager(); ContentControl content1 = new ContentControl(); dockingmanager.UseDocumentContainer = true; DockingManager.SetHeader(content1, "Tabbed1"); DockingManager.SetState(content1, DockState.Dock); ContentControl content2 = new ContentControl(); DockingManager.SetHeader(content2, "Tabbed2"); DockingManager.SetState(content2, DockState.Dock); ContentControl content3 = new ContentControl(); DockingManager.SetHeader(content3, "Tabbed3"); DockingManager.SetState(content3, DockState.Dock); ContentControl content4 = new ContentControl(); DockingManager.SetHeader(content4, "Tabbed4"); DockingManager.SetState(content4, DockState.Dock); //Setting DockTabAlignmenet as Right side dockingmanager.DockTabAlignment = Dock.Right; dockingmanager.Children.Add(content1); dockingmanager.Children.Add(content2); dockingmanager.Children.Add(content3); dockingmanager.Children.Add(content4); Grid1.Children.Add(dockingmanager); } } }
The following screenshot shows the tabbed children aligned at Right side.
The following code snippet illustrates when the DockTabAlignment as Bottom:
XAML
<Window x:Class="DockingManager.MainWindow" 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" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Bottom"> <ContentControl x:Name="content1" syncfusion:DockingManager.Header="Tabbed1" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content2" syncfusion:DockingManager.Header="Tabbed2" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content3" syncfusion:DockingManager.Header="Tabbed3" syncfusion:DockingManager.State="Dock"/> <ContentControl x:Name="content4" syncfusion:DockingManager.Header="Tabbed4" syncfusion:DockingManager.State="Dock"/> </syncfusion:DockingManager> </Grid> </Window>
C#
using Syncfusion.Windows.Tools.Controls; namespace DockingManager { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DockingManager dockingmanager = new DockingManager(); ContentControl content1 = new ContentControl(); dockingmanager.UseDocumentContainer = true; DockingManager.SetHeader(content1, "Tabbed1"); DockingManager.SetState(content1, DockState.Dock); ContentControl content2 = new ContentControl(); DockingManager.SetHeader(content2, "Tabbed2"); DockingManager.SetState(content2, DockState.Dock); ContentControl content3 = new ContentControl(); DockingManager.SetHeader(content3, "Tabbed3"); DockingManager.SetState(content3, DockState.Dock); ContentControl content4 = new ContentControl(); DockingManager.SetHeader(content4, "Tabbed4"); DockingManager.SetState(content4, DockState.Dock); //Setting DockTabAlignmenet as Bottom side dockingmanager.DockTabAlignment = Dock.Bottom; dockingmanager.Children.Add(content1); dockingmanager.Children.Add(content2); dockingmanager.Children.Add(content3); dockingmanager.Children.Add(content4); Grid1.Children.Add(dockingmanager); } } }
The following screenshot shows the tabbed children aligned at bottom side.