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.
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. |
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. |
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. |
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. |
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>
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 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. |
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>
Important Note: