Articles in this section
Category / Section

How to place tabbed children of WPF DockingManager at different sides?

3 mins read

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.

 WPF DockingManager displays tab window 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.

    WPF DockingManager displays tab window 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.

       WPF DockingManager displays tab window 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.

WPF DockingManager displays tab window at bottom side

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied