How to arrange the document tabs in different position in the DockingManager?

1 min read

In DockingManager, you can change the position of the document tabs by using the SetTDIIndex property of the TDILayout panel. This property allows you to arrange the document tabs in different index position according to the TDI index. The following code example demonstrates the same.

XAML

<Window x:Class="Dockable_Property.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>
    <syncfusion:DockingManager Name="Docking" UseDocumentContainer="True" Loaded="Docking_Loaded" >
    </syncfusion:DockingManager>
  </Grid> 
</Window>

using Syncfusion.Windows.Tools.Controls;
namespace Dockable_Property
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }      
       private  void Docking_Loaded(object sender, RoutedEventArgs e)
        {
            ContentControl child1 = new ContentControl();
            DockingManager.SetState(child1, DockState.Document);
            DockingManager.SetHeader(child1, "Child1");            
            ContentControl child2 = new ContentControl();
            DockingManager.SetState(child2, DockState.Document);
            DockingManager.SetHeader(child2, "Child2");
            ContentControl child3 = new ContentControl();
            DockingManager.SetState(child3, DockState.Document);
            DockingManager.SetHeader(child3, "Child3");
            ContentControl child4 = new ContentControl();
            DockingManager.SetState(child4, DockState.Document);
            DockingManager.SetHeader(child4, "Child4");
            Docking.Children.Add(child1);
            Docking.Children.Add(child2);
            Docking.Children.Add(child3);
            Docking.Children.Add(child4);
//The following code shows how to set the TDIIndex for the Document children that arrange the document tabs in different position according to the index provided
            TDILayoutPanel.SetTDIIndex(child1, 0);
            TDILayoutPanel.SetTDIIndex(child2, 3);
            TDILayoutPanel.SetTDIIndex(child3, 1);
            TDILayoutPanel.SetTDIIndex(child4, 2);      } }
        }

Output

The following screenshot displays the document tabs arranged in different position in the DockingManager.