WPF TabControl Styling

Adding style to the WPF TabControl isn't to difficult. The default style for tabs are pretty generic so you might want to add some styling so the interface looks nice. You can change the borders for the tabs, the background color, the margins and where you want the text for header to go.

Below you can find sample in XAML code

‍

<window x:class="WpfApplication4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="525">

   <grid>

       <tabcontrol horizontalalignment="Left" height="313" margin="10,10,0,0" verticalalignment="Top" width="507">

           <tabcontrol.resources>

<style targettype="TabItem"><!--

                   <Setter Property="Template">

                       <Setter.Value>

                           <ControlTemplate TargetType="TabItem">

                               <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" CornerRadius="4,4,0,0" Margin="2,0">

                                   <ContentPresenter x:Name="ContentSite"

                                       VerticalAlignment="Center"

                                       HorizontalAlignment="Center"

                                       ContentSource="Header"

                                       Margin="8,2"/>

                               </Border>

                               <ControlTemplate.Triggers>

                                   <Trigger Property="IsSelected" Value="True">

                                       <Setter TargetName="Border" Property="Background" Value="Yellow" />

                                   </Trigger>

                                   <Trigger Property="IsSelected" Value="False">

                                       <Setter TargetName="Border" Property="Background" Value="White" />

                                   </Trigger>

                               </ControlTemplate.Triggers>

                           </ControlTemplate>

                       </Setter.Value>

                   </Setter>

--></style>

</tabcontrol.resources> <tabitem> <tabitem.header> <stackpanel orientation="Horizontal"> <textblock text="User"></textblock> </stackpanel> </tabitem.header> <label content="Hello Tabs!"></label> </tabitem> <tabitem> <tabitem.header> <stackpanel orientation="Horizontal"> <textblock text="Member Of"></textblock> </stackpanel> </tabitem.header> </tabitem> <tabitem> <tabitem.header> <stackpanel orientation="Horizontal"> <textblock text="Account"></textblock> </stackpanel> </tabitem.header> </tabitem> </tabcontrol> </grid> </window>

As you can see, we're simply adding a Style element to the tab control setting it's target to the TabItem. We then do a ControlTemplate and set the necessary style elements we want it to have. We're also setting some Triggers that will happen for example when the user clicks on the tab. In the this case, we're changing the BackGround property