TabControl Styles and Templates
This page is specific to:Microsoft Version:Silverlight 3
Silverlight
TabControl Styles and Templates

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 definition that you have to specify when you work with styles and templates.

<!-- XML Name Space definitions. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

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

Concepts

Customizing the Appearance of an Existing Control by Using a ControlTemplate

Other Resources

Control Customization
Control Styles and Templates
© 2009 Microsoft Corporation. All rights reserved.   Terms of Use | Trademarks | Privacy Statement
Page view tracker
Rate the Lightweight library
x
Lightweight builds on ScriptFree (loband) by adding features you've requested: a SearchBox and default code language selection.
Do you like the SearchBox?
Do you like the tabbed code blocks?
How useful is this topic?
Tell us more.
Thanks
x
You're helping to improve MSDN Online.
Feedback
Switch View
x
Classic
Lightweight Beta
ScriptFree
Switch View