通过

  • 项目

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

Grid

The root for a TabControl with its tab strip at the top.

TabPanelTop

TabPanel

The host for the TabItem controls when the tab strip is at the top.

ContentTop

ContentPresenter

The content host when the tab strip is at the top.

TemplateBottom

Grid

The root for a TabControl with its tab strip at the bottom.

TabPanelBottom

TabPanel

The host for the TabItem controls when the tab strip is at the bottom.

ContentBottom

ContentPresenter

The content host when the tab strip is at the bottom.

TemplateRight

Grid

The root for a TabControl with its tab strip at the right.

TabPanelRight

TabPanel

The host for the TabItem controls when the tab strip is at the right.

ContentRight

ContentPresenter

The content host when the tab strip is at the right.

TemplateLeft

Grid

The root for a TabControl with its tab strip at the left.

TabPanelLeft

TabPanel

The host for the TabItem controls when the tab strip is at the left.

ContentLeft

ContentPresenter

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

Grid

The host when the tab strip is at the top and the tab is selected.

HeaderTopSelected

ContentControl

The header tab when the tab strip is at the top and the tab is selected.

TemplateTopUnselected

Grid

The host when the tab strip is at the top and the tab is not selected.

HeaderTopUnselected

ContentControl

The header tab when the tab strip is at the top and the tab is not selected.

TemplateBottomSelected

Grid

The host when the tab strip is at the bottom and the tab is selected.

HeaderBottomSelected

ContentControl

The header tab when the tab strip is at the bottom and the tab is selected.

TemplateBottomUnselected

Grid

The host when the tab strip is at the bottom and the tab is not selected.

HeaderBottomUnselected

ContentControl

The header tab when the tab strip is at the bottom and the tab is not selected.

TemplateLeftSelected

Grid

The host when the tab strip is at the left and the tab is selected.

HeaderLeftSelected

ContentControl

The header tab when the tab strip is at the left and the tab is selected.

TemplateLeftUnselected

Grid

The host when the tab strip is at the left and the tab is not selected.

HeaderLeftUnselected

ContentControl

The header tab when the tab strip is at the left and the tab is not selected.

TemplateRightSelected

Grid

The host when the tab strip is at the right and the tab is selected.

HeaderRightSelected

ContentControl

The header tab when the tab strip is at the right and the tab is selected.

TemplateRightUnselected

Grid

The host when the tab strip is at the right and the tab is not selected.

HeaderRightUnselected

ContentControl

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"
Important noteImportant 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.
NoteNote:

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>