WPF Styling TabControl and TabItem

  • by
WPF Style TabControl and TabItem 02

In this post let’s see how we can style our WPF TabContol and its TabItem. WPF TabControl allows us to divide our interface into multiple tabs which our users will find convenient to use rather than a comple WPF Page or a Window. So let’s see how we can design it.

WPF Style TabControl and TabItem:

In your WPF  Window .xaml create a <Window.Resource> tag below and add following styles to it.

MainWindow.xaml: StyleCode-

<Window.Resources>
<Style TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Top" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0"/>
</Style>

<Style TargetType="TabItem">
<Setter Property="FontSize" Value="10"/>
<Setter Property="BorderBrush" Value="Pink"/>
<Setter Property="BorderThickness" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0"
BorderBrush="Black" Margin="0,0,0,0" CornerRadius="2,2,0,0" Padding="50,0,50,0">
<ContentPresenter ContentSource="Header" Margin="5" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#fff291"/>
<Setter Property="Foreground" Value="#000"/>
</Trigger>

<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" Value="#013284"/>
<Setter Property="Foreground" Value="#fff"/>

</Trigger>
</ControlTemplate.Triggers>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

And Create a TabControl and its TabItem like below :

TabControl :

<TabControl>
<TabItem Name="TabItem1" Header="Tab 1" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 1</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 2" Name="TabItem2" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 2</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 3" Name="TabItem3" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 3</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 4" Name="TabItem4" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 4</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 5" Name="TabItem5">
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 5</TextBlock>
</StackPanel>
</TabItem>
</TabControl>

Now, run your application.

WPF Style TabControl and TabItem 02

 

Full Page :

MainWindow.xaml:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Tabs Styles" Height="350" Width="525" WindowState="Maximized">
<Window.Resources>
<Style TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Top" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0"/>
</Style>

<Style TargetType="TabItem">
<Setter Property="FontSize" Value="10"/>
<Setter Property="BorderBrush" Value="Pink"/>
<Setter Property="BorderThickness" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0"
BorderBrush="Black" Margin="0,0,0,0" CornerRadius="2,2,0,0" Padding="50,0,50,0">
<ContentPresenter ContentSource="Header" Margin="5" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#fff291"/>
<Setter Property="Foreground" Value="#000"/>
</Trigger>

<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" Value="#013284"/>
<Setter Property="Foreground" Value="#fff"/>

</Trigger>
</ControlTemplate.Triggers>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical">

<StackPanel Background="#00173d" Orientation="Vertical">
<TabControl>
<TabItem Name="TabItem1" Header="Tab 1" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 1</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 2" Name="TabItem2" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 2</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 3" Name="TabItem3" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 3</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 4" Name="TabItem4" >
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 4</TextBlock>
</StackPanel>
</TabItem>

<TabItem Header="Tab 5" Name="TabItem5">
<StackPanel Background="White" Height="500" Orientation="Vertical">
<StackPanel Background="#fff291" Height="5"/>
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 5</TextBlock>
</StackPanel>
</TabItem>
</TabControl>
</StackPanel>
</StackPanel>
</Window>

Thank You.

Also see :


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.