WPF Tab Control – TabStripPlacement

TabStripPlacement is an important propety of TabControl. It is used for setting the Header alignment relative to tab content.

You can set below four values in TabStripPlacement.

1. Left
2. Top (Default)
3. Right
4. Bottom

I have given all four examples of TabStripPlacement.

Left

Set header to left position like below:

<TabControl x:Name="TabControl1"  
                    TabStripPlacement="Left"
                    Margin="10"
                    ItemsSource="{Binding Employees}" 
                    SelectedIndex="{Binding SelectedTabIndex}"
                    ItemTemplate="{StaticResource CustomHeaderTemplate}"
                    ContentTemplate="{StaticResource CustomItemTemplate}">
</TabControl>

Top

Set header to top position. It is the default value set in TabControl.

<TabControl x:Name="TabControl1"  
                    TabStripPlacement="Top"
                    Margin="10"
                    ItemsSource="{Binding Employees}" 
                    SelectedIndex="{Binding SelectedTabIndex}"
                    ItemTemplate="{StaticResource CustomHeaderTemplate}"
                    ContentTemplate="{StaticResource CustomItemTemplate}">
</TabControl>

Right

Set header to right position.

<TabControl x:Name="TabControl1"  
                    TabStripPlacement="Right"
                    Margin="10"
                    ItemsSource="{Binding Employees}" 
                    SelectedIndex="{Binding SelectedTabIndex}"
                    ItemTemplate="{StaticResource CustomHeaderTemplate}"
                    ContentTemplate="{StaticResource CustomItemTemplate}">
</TabControl>

Bottom

Set header to bottom position.

<TabControl x:Name="TabControl1"  
                    TabStripPlacement="Bottom"
                    Margin="10"
                    ItemsSource="{Binding Employees}" 
                    SelectedIndex="{Binding SelectedTabIndex}"
                    ItemTemplate="{StaticResource CustomHeaderTemplate}"
                    ContentTemplate="{StaticResource CustomItemTemplate}">
</TabControl>