WPF Tab Control - TabStripPlacement

WPF  wpf 

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>

TabStripPlacement Left

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>

TabStripPlacement Top

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>

TabStripPlacementright

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>

TabStripPlacement bottom

Join our newsletter and get an occasional email with a technology and DotNetPattern.com news update.