How to change tab placement in TabControlExt?

1 min read

By default, TabItems are placed at the Top in TabControlExt. You can also place TabItems at the Right, Left and Bottom by changing the TabStripPlacement property in TabControlExt.

The following code example illustrates on how to set the TabStripPlacement as Left.

XAML

//Code explains how to set the TabStripPlacement property as Left
<Window x:Class="tabcontrolext.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="600" Width="700">
    <Grid>
        <syncfusion:TabControlExt Name="_tabcontrolExt" TabStripPlacement="Left" >
            <syncfusion:TabItemExt Header="item1"></syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="item2"></syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
     </Grid>
</Window>

//Code explains how to set the TabStripPlacement property as Left
namespace tabcontrolext
{
        public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           /// <summary>
          /// Set the TapStripPlacement 
         /// </summary>
            _tabcontrolExt.TabStripPlacement = Dock.Left;
        }
    }
}

The following screenshot displays TabItem placed at the Left.

Figure 1: TabItem placed at the Left

The following code example illustrates on how to set the TabStripPlacement as Right.

XAML

//Code explains how to set the TabStripPlacement property as Right
<Window x:Class="tabcontrolext.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="600" Width="700">
    <Grid>
        <syncfusion:TabControlExt Name="_tabcontrolExt" TabStripPlacement="Right" >
            <syncfusion:TabItemExt Header="item1"></syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="item2"></syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
     </Grid>
</Window>

//Code explains how to set the TabStripPlacement property as Right
namespace tabcontrolext
{
        public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           /// <summary>
          /// Set the TapStripPlacement 
         /// </summary>
            _tabcontrolExt.TabStripPlacement = Dock.Right;
        }
    }
}

The following screenshot displays TabItem placed at the Right.

Figure 2: TabItem placed at the Right

The following example illustrates on how to set the TabStripPlacement as Top.

XAML

//Code explains how to set the TabStripPlacement property as Top
<Window x:Class="tabcontrolext.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="600" Width="700">
    <Grid>
        <syncfusion:TabControlExt Name="_tabcontrolExt" TabStripPlacement="Top" >
            <syncfusion:TabItemExt Header="item1"></syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="item2"></syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
     </Grid>
</Window>

//Code explains how to set the TabStripPlacement property as Top
namespace tabcontrolext
{
        public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           /// <summary>
          /// Set the TapStripPlacement 
         /// </summary>
            _tabcontrolExt.TabStripPlacement = Dock.Top;
        }
    }
}

The following screenshot displays TabItem placed at the Top.

Figure 3: TabItem placed at the Top

The following code example illustrates on how to set the TabStripPlacement as Bottom.

XAML

//Code explains how to set the TabStripPlacement property as Bottom
<Window x:Class="tabcontrolext.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="600" Width="700">
    <Grid>
        <syncfusion:TabControlExt Name="_tabcontrolExt" TabStripPlacement="Bottom" >
            <syncfusion:TabItemExt Header="item1"></syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="item2"></syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
     </Grid>
</Window>

//Code explains how to set the TabStripPlacement property as Bottom
namespace tabcontrolext
{
        public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           /// <summary>
          /// Set the TapStripPlacement 
         /// </summary>
            _tabcontrolExt.TabStripPlacement = Dock.Bottom;
        }
    }
}

The following screenshot displays TabItem placed at the Bottom.

Figure 4: TabItem placed at the Bottom

Did you find this information helpful?

Yes

Comments (0)

How to change tab placement in TabControlExt?

Access denied