We can customize the appearance of any WPF control by changing its control template. If we try to create nested control, such as nested tab controls then we can apply different control item template to both tab items. Here is a XAML code to define the control template of outer tab item.
1: <TabControl.Resources>2: <Style TargetType="{x:Type TabItem}">3: <Setter Property="Template">4: <Setter.Value>5: <ControlTemplate TargetType="{x:Type TabItem}">6: <Border Name="border" BorderBrush="Brown" Background="LightYellow" BorderThickness="1" CornerRadius="10, 10, 0, 0">7: <ContentPresenter x:Name="ContentSite"8: VerticalAlignment="Center" HorizontalAlignment="Center"9: ContentSource="Header" Margin="5">10: </ContentPresenter>11: </Border>12: <ControlTemplate.Triggers>13: <Trigger Property="IsSelected" Value="True">14: <Setter TargetName="border" Property="Background" Value="LightBlue" />15: </Trigger>16: <Trigger Property="IsSelected" Value="False">17: <Setter TargetName="border" Property="Background" Value="LightYellow" />18: </Trigger>19: </ControlTemplate.Triggers>20: </ControlTemplate>21: </Setter.Value>22: </Setter>23: </Style>24: </TabControl.Resources>25:Similarly here is a XAML code to define control template to inner tab control.
1: <Setter Property="Template">2: <Setter.Value>3: <ControlTemplate TargetType="{x:Type TabItem}">4: <Border Name="border" BorderBrush="Brown" Background="Wheat" BorderThickness="1" CornerRadius="0, 10, 10, 0">5: <ContentPresenter x:Name="ContentSite"6: VerticalAlignment="Center" HorizontalAlignment="Center"7: ContentSource="Header" Margin="5">8: <ContentPresenter.LayoutTransform>9: <RotateTransform Angle="90"/>10: </ContentPresenter.LayoutTransform>11: </ContentPresenter>12: </Border>13: <ControlTemplate.Triggers>14: <Trigger Property="IsSelected" Value="True">15: <Setter TargetName="border" Property="Background" Value="Wheat" />16: </Trigger>17: <Trigger Property="IsSelected" Value="False">18: <Setter TargetName="border" Property="Background" Value="LightGray" />19: </Trigger>20: </ControlTemplate.Triggers>21: </ControlTemplate>22: </Setter.Value>23: </Setter>24:Also note that here we display the text in vertical form. In addition we also define property trigger at both outer and inner tab controls. Here is a complete XAML code of the project.
1: <Window x:Class="wpfTabSample.Window1"2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4: Title="Folder View" Height="400" Width="500">5: <TabControl>6: <TabControl.Resources>7: <Style TargetType="{x:Type TabItem}">8: <Setter Property="Template">9: <Setter.Value>10: <ControlTemplate TargetType="{x:Type TabItem}">11: <Border Name="border" BorderBrush="Brown" Background="LightYellow" BorderThickness="1" CornerRadius="10, 10, 0, 0">12: <ContentPresenter x:Name="ContentSite"13: VerticalAlignment="Center" HorizontalAlignment="Center"14: ContentSource="Header" Margin="5">15: </ContentPresenter>16: </Border>17: <ControlTemplate.Triggers>18: <Trigger Property="IsSelected" Value="True">19: <Setter TargetName="border" Property="Background" Value="LightBlue" />20: </Trigger>21: <Trigger Property="IsSelected" Value="False">22: <Setter TargetName="border" Property="Background" Value="LightYellow" />23: </Trigger>24: </ControlTemplate.Triggers>25: </ControlTemplate>26: </Setter.Value>27: </Setter>28: </Style>29: </TabControl.Resources>30: <TabItem Header="California" Padding="5">31: <TabControl TabStripPlacement="Right">32: <TabControl.Resources>33: <Style TargetType="{x:Type TabItem}">34: <Setter Property="Padding" Value="5"/>35: <Setter Property="Template">36: <Setter.Value>37: <ControlTemplate TargetType="{x:Type TabItem}">38: <Border Name="border" BorderBrush="Brown" Background="Wheat" BorderThickness="1" CornerRadius="0, 10, 10, 0">39: <ContentPresenter x:Name="ContentSite"40: VerticalAlignment="Center" HorizontalAlignment="Center"41: ContentSource="Header" Margin="5">42: <ContentPresenter.LayoutTransform>43: <RotateTransform Angle="90"/>44: </ContentPresenter.LayoutTransform>45: </ContentPresenter>46: </Border>47: <ControlTemplate.Triggers>48: <Trigger Property="IsSelected" Value="True">49: <Setter TargetName="border" Property="Background" Value="Wheat" />50: </Trigger>51: <Trigger Property="IsSelected" Value="False">52: <Setter TargetName="border" Property="Background" Value="LightGray" />53: </Trigger>54: </ControlTemplate.Triggers>55: </ControlTemplate>56: </Setter.Value>57: </Setter>58: </Style>59: </TabControl.Resources>60:61: <TabItem Header="Los Angeles"/>62: <TabItem Header="San Francisco"/>63: <TabItem Header="San Diego"/>64: <TabItem Header="Sacramento"/>65: </TabControl>66: </TabItem>67: <TabItem Header="Taxes" Padding="5">68: <TabControl TabStripPlacement="Right">69: <TabControl.Resources>70: <Style TargetType="{x:Type TabItem}">71: <Setter Property="Padding" Value="5"/>72: <Setter Property="Template">73: <Setter.Value>74: <ControlTemplate TargetType="{x:Type TabItem}">75: <Border Name="border" BorderBrush="Brown" Background="Wheat" BorderThickness="1" CornerRadius="0, 10, 10, 0">76: <ContentPresenter x:Name="ContentSite"77: VerticalAlignment="Center" HorizontalAlignment="Center"78: ContentSource="Header" Margin="5">79: <ContentPresenter.LayoutTransform>80: <RotateTransform Angle="90"/>81: </ContentPresenter.LayoutTransform>82: </ContentPresenter>83: </Border>84: <ControlTemplate.Triggers>85: <Trigger Property="IsSelected" Value="True">86: <Setter TargetName="border" Property="Background" Value="Wheat" />87: </Trigger>88: <Trigger Property="IsSelected" Value="False">89: <Setter TargetName="border" Property="Background" Value="LightGray" />90: </Trigger>91: </ControlTemplate.Triggers>92: </ControlTemplate>93: </Setter.Value>94: </Setter>95: </Style>96: </TabControl.Resources>97: <TabItem Header="Houston"/>98: <TabItem Header="Austin"/>99: <TabItem Header="Dallas"/>100: </TabControl>101: </TabItem>102: </TabControl>103: </Window>104:This is the output of this program.
[...] To use any other panel, we have to define the control template of our tabcontrol. In control template, we define one grid and then use other panel to display the tab item. Here is a piece of code to use DockPanel instead of TabPanel for tab items. We already saw the example of using Control Template in tab control here. [...]
By: Use different panel in Tab Control « Zeeshan Amjad's WPF Blog on May 5, 2010
at 3:34 pm
[...] saw the usage of Path here. We can create very interesting geometrical shape with the help of it. If we use this with [...]
By: Using Path in control template « Zeeshan Amjad's WPF Blog on June 4, 2010
at 10:49 pm