TabControl Styles and Templates
Microsoft Silverlight will reach end of support after October 2021. Learn more.
This topic describes the styles and templates for the TabControl control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.
TabControl Parts
The following table lists the named parts for the TabControl control.
TabControl Part |
Type |
Description |
|---|---|---|
TemplateTop |
The root for a TabControl with its tab strip at the top. |
|
TabPanelTop |
The host for the TabItem controls when the tab strip is at the top. |
|
ContentTop |
The content host when the tab strip is at the top. |
|
TemplateBottom |
The root for a TabControl with its tab strip at the bottom. |
|
TabPanelBottom |
The host for the TabItem controls when the tab strip is at the bottom. |
|
ContentBottom |
The content host when the tab strip is at the bottom. |
|
TemplateRight |
The root for a TabControl with its tab strip at the right. |
|
TabPanelRight |
The host for the TabItem controls when the tab strip is at the right. |
|
ContentRight |
The content host when the tab strip is at the right. |
|
TemplateLeft |
The root for a TabControl with its tab strip at the left. |
|
TabPanelLeft |
The host for the TabItem controls when the tab strip is at the left. |
|
ContentLeft |
The content host when the tab strip is at the left. |
TabControl States
The following table lists the visual states for the TabControl control.
VisualState Name |
VisualStateGroup Name |
Description |
|---|---|---|
Normal |
CommonStates |
The default state. |
Disabled |
CommonStates |
The control is disabled. |
TabItem Parts
The following table lists the named parts for the TabItem control.
TabItem Part |
Type |
Description |
|---|---|---|
TemplateTopSelected |
The host when the tab strip is at the top and the tab is selected. |
|
HeaderTopSelected |
The header tab when the tab strip is at the top and the tab is selected. |
|
TemplateTopUnselected |
The host when the tab strip is at the top and the tab is not selected. |
|
HeaderTopUnselected |
The header tab when the tab strip is at the top and the tab is not selected. |
|
TemplateBottomSelected |
The host when the tab strip is at the bottom and the tab is selected. |
|
HeaderBottomSelected |
The header tab when the tab strip is at the bottom and the tab is selected. |
|
TemplateBottomUnselected |
The host when the tab strip is at the bottom and the tab is not selected. |
|
HeaderBottomUnselected |
The header tab when the tab strip is at the bottom and the tab is not selected. |
|
TemplateLeftSelected |
The host when the tab strip is at the left and the tab is selected. |
|
HeaderLeftSelected |
The header tab when the tab strip is at the left and the tab is selected. |
|
TemplateLeftUnselected |
The host when the tab strip is at the left and the tab is not selected. |
|
HeaderLeftUnselected |
The header tab when the tab strip is at the left and the tab is not selected. |
|
TemplateRightSelected |
The host when the tab strip is at the right and the tab is selected. |
|
HeaderRightSelected |
The header tab when the tab strip is at the right and the tab is selected. |
|
TemplateRightUnselected |
The host when the tab strip is at the right and the tab is not selected. |
|
HeaderRightUnselected |
The header tab when the tab strip is at the right and the tab is not selected. |
TabItem States
The following table lists the visual states for the TabItem control.
VisualState Name |
VisualStateGroup Name |
Description |
|---|---|---|
Normal |
CommonStates |
The default state. |
MouseOver |
CommonStates |
The mouse pointer is positioned over the control. |
Disabled |
CommonStates |
The control is disabled. |
Focused |
FocusStates |
The control has focus. |
Unfocused |
FocusStates |
The control does not have focus. |
Selected |
SelectionStates |
The control is selected. |
Unselected |
SelectionStates |
The control is not selected. |
Example
The following example shows how to add a custom style as a StaticResource. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate. In this example, the StaticResource refers to an x:Key attribute value that you must add to the Style element when you modify it for your project.
<TabControl x:Name="tabControl1"
Style="{StaticResource newTabControlStyle}" >
<TabItem x:Name="tabItem1"
Style="{StaticResource newTabItemStyle}" />
</TabControl>
Default Template
The following shows the XML namespace mappings that you have to specify when you work with styles and templates.
<!-- XML Namespace mappings. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:controlsPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"
.gif "Important note") Important Note: |
|---|
The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries. |
.gif "Note") Note: |
|---|
The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping. |
The following XAML shows the default styles and templates for the TabControl control and the TabItem control.
<Style TargetType="controls:TabControl">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#FFFEFEFE" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0" />
<GradientStop Color="#FF8399A9" Offset="0.375" />
<GradientStop Color="#FF718597" Offset="0.375" />
<GradientStop Color="#FF617584" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="5" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TabControl">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTop" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualBottom" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualLeft" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualRight" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- TabStripPlacement Top -->
<Grid x:Name="TemplateTop" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controlsPrimitives:TabPanel x:Name="TabPanelTop" Canvas.ZIndex="1" Margin="2,2,2,-1" />
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1" MinHeight="10" MinWidth="10" CornerRadius="0,0,3,3">
<ContentPresenter x:Name="ContentTop" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Border>
<Border x:Name="DisabledVisualTop" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" Grid.RowSpan="2" CornerRadius="0,0,3,3" Grid.Row="1" />
</Grid>
<!-- TabStripPlacement Bottom -->
<Grid x:Name="TemplateBottom" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controlsPrimitives:TabPanel x:Name="TabPanelBottom" Canvas.ZIndex="1" Grid.Row="1" Margin="2,-1,2,2" />
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" MinHeight="10" MinWidth="10" CornerRadius="3,3,0,0">
<ContentPresenter x:Name="ContentBottom" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Border>
<Border x:Name="DisabledVisualBottom" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="3,3,0,0" />
</Grid>
<!-- TabStripPlacement Left -->
<Grid x:Name="TemplateLeft" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<controlsPrimitives:TabPanel x:Name="TabPanelLeft" Canvas.ZIndex="1" Margin="2,2,-1,2" />
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" MinHeight="10" MinWidth="10" CornerRadius="0,3,3,0">
<ContentPresenter x:Name="ContentLeft" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Border>
<Border x:Name="DisabledVisualLeft" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="0,3,3,0" Grid.Column="1" />
</Grid>
<!-- TabStripPlacement Right -->
<Grid x:Name="TemplateRight" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<controlsPrimitives:TabPanel x:Name="TabPanelRight" Grid.Column="1" Canvas.ZIndex="1" Margin="-1,2,2,2" />
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" MinHeight="10" MinWidth="10" CornerRadius="3,0,0,3">
<ContentPresenter x:Name="ContentRight" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Border>
<Border x:Name="DisabledVisualRight" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="3,0,0,3" Margin="0" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="controls:TabItem">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="#FF1F3B53" />
<Setter Property="BorderBrush" Value="#FFA3AEB9" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="6,2,6,2" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TabItem">
<Grid x:Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
<vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<!-- For some reason, it animates all Borders with just this line.
If I add code for each then it crashes SL. -->
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BorderTop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF448DCA" />
</ColorAnimationUsingKeyFrames>
<!--GradientTop-->
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientTop" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientTop" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientTop" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF" />
</ColorAnimationUsingKeyFrames>
<!--GradientBottom-->
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientBottom" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientBottom" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientBottom" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF" />
</ColorAnimationUsingKeyFrames>
<!--GradientLeft-->
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientLeft" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientLeft" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientLeft" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF" />
</ColorAnimationUsingKeyFrames>
<!--GradientRight-->
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientRight" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientRight" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientRight" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF" />
</ColorAnimationUsingKeyFrames>
<!--FocusVisual-->
<DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualTop" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualBottom" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualLeft" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualRight" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTopSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTopUnSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualBottomSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualBottomUnSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualLeftSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualLeftUnSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualRightSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualRightUnSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected" />
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualTop" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBottom" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualLeft" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualRight" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- TabStripPlacement Top | Selected -->
<Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="-2,-2,-2,0" CornerRadius="3,3,0,0">
<Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,1,0,0">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,0,0,-2" />
<ContentControl x:Name="HeaderTopSelected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<!--Focus Visual-->
<Border x:Name="FocusVisualTop" CornerRadius="3,3,0,0" BorderBrush="#FF6DBDD1" BorderThickness="1,1,1,0" Margin="-2,-2,-2,0" Visibility="Collapsed" IsHitTestVisible="false" />
<Border Margin="-2,-2,-2,0" x:Name="DisabledVisualTopSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0" />
</Grid>
<!-- TabStripPlacement Top | Unselected -->
<Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
<Border x:Name="BorderTop" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="3,3,0,0">
<Border x:Name="GradientTop" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,1,0,0">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderTopUnselected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualTopUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0" />
</Grid>
<!-- TabStripPlacement Bottom | Selected -->
<Grid x:Name="TemplateBottomSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,1" Background="{TemplateBinding Background}" Margin="-2,0,-2,-2" CornerRadius="0,0,3,3">
<Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,0,1,1">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,-2,0,0" />
<ContentControl x:Name="HeaderBottomSelected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<!--Focus Visual-->
<Border x:Name="FocusVisualBottom" CornerRadius="0,0,3,3" BorderBrush="#FF6DBDD1" BorderThickness="1,0,1,1" Margin="-2,0,-2,-2" Visibility="Collapsed" IsHitTestVisible="false" />
<Border Margin="-2,0,-2,-2" x:Name="DisabledVisualBottomSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,0,3,3" />
</Grid>
<!-- TabStripPlacement Bottom + Unselected -->
<Grid x:Name="TemplateBottomUnselected" Visibility="Collapsed">
<Border x:Name="BorderBottom" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0,0,3,3">
<Border x:Name="GradientBottom" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,0,1,1">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderBottomUnselected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualBottomUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,0,3,3" />
</Grid>
<!-- TabStripPlacement Left | Selected -->
<Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,0,1" Background="{TemplateBinding Background}" Margin="-2,-2,0,-2" CornerRadius="3,0,0,3">
<Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,0,0,1">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,0,-2,0" />
<ContentControl x:Name="HeaderLeftSelected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<!--Focus Visual-->
<Border x:Name="FocusVisualLeft" CornerRadius="3,0,0,3" BorderBrush="#FF6DBDD1" BorderThickness="1,1,0,1" Margin="-2,-2,0,-2" Visibility="Collapsed" IsHitTestVisible="false" />
<Border Margin="-2,-2,0,-2" x:Name="DisabledVisualLeftSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,0,0,3" />
</Grid>
<!-- TabStripPlacement Left | Unselected -->
<Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
<Border x:Name="BorderLeft" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3,0,0,3">
<Border x:Name="GradientLeft" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,0,0,1">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderLeftUnselected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualLeftUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,0,0,3" />
</Grid>
<!-- TabStripPlacement Right | Selected -->
<Grid x:Name="TemplateRightSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,1,1" Background="{TemplateBinding Background}" Margin="0,-2,-2,-2" CornerRadius="0,3,3,0">
<Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,1,1,0">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="-2,0,0,0" />
<ContentControl x:Name="HeaderRightSelected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<!--Focus Visual-->
<Border x:Name="FocusVisualRight" CornerRadius="0,3,3,0" BorderBrush="#FF6DBDD1" BorderThickness="0,1,1,1" Margin="0,-2,-2,-2" Visibility="Collapsed" IsHitTestVisible="false" />
<Border Margin="0,-2,-2,-2" x:Name="DisabledVisualRightSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,3,3,0" />
</Grid>
<!-- TabStripPlacement Right + Unselected -->
<Grid x:Name="TemplateRightUnselected" Visibility="Collapsed">
<Border x:Name="BorderRight" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0,3,3,0">
<Border x:Name="GradientRight" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,1,1,0">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderRightUnselected" IsTabStop="False" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" />
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualRightUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,3,3,0" />
</Grid>
<Border x:Name="FocusVisualElement" CornerRadius="3,3,0,0" BorderBrush="#FF6DBDD1" BorderThickness="1" Margin="-1" Visibility="Collapsed" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
See Also