TabView.xaml

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:contract4Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,4)"
    xmlns:contract6Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,6)"
    xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
    xmlns:local="using:Microsoft.UI.Xaml.Controls"
    xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives">

    <Style TargetType="local:TabView" BasedOn="{StaticResource DefaultTabViewStyle}" />

    <Style x:Key="DefaultTabViewStyle" TargetType="local:TabView">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Padding" Value="{ThemeResource TabViewHeaderPadding}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Background" Value="{ThemeResource TabViewBackground}" />
        <contract6Present:Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TabView">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid x:Name="TabContainerGrid"
                            Background="{TemplateBinding Background}"
                            XYFocusKeyboardNavigation="Enabled">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" x:Name="LeftContentColumn"/>
                                <ColumnDefinition Width="Auto" x:Name="TabColumn"/>
                                <ColumnDefinition Width="Auto" x:Name="AddButtonColumn"/>
                                <ColumnDefinition Width="*" x:Name="RightContentColumn"/>
                            </Grid.ColumnDefinitions>

                            <ContentPresenter
                                Grid.Column="0"
                                x:Name="LeftContentPresenter"
                                Content="{TemplateBinding TabStripHeader}"
                                ContentTemplate="{TemplateBinding TabStripHeaderTemplate}"/>

                            <Grid x:Name="ShadowReceiver"
                                Grid.ColumnSpan="4"/>

                            <primitives:TabViewListView
                                Grid.Column="1"
                                x:Name="TabListView"
                                CanReorderItems="{TemplateBinding CanReorderTabs}"
                                CanDragItems="{TemplateBinding CanDragTabs}"
                                AllowDrop="{TemplateBinding AllowDropTabs}"
                                ItemsSource="{TemplateBinding TabItemsSource}"
                                ItemTemplate="{TemplateBinding TabItemTemplate}"
                                ItemTemplateSelector="{TemplateBinding TabItemTemplateSelector}"/>

                            <Button
                                Grid.Column="2"
                                x:Name="AddButton"
                                Content="&#xE710;"
                                VerticalAlignment="Stretch"
                                IsTextScaleFactorEnabled="False"
                                Command="{TemplateBinding AddTabButtonCommand}"
                                CommandParameter="{TemplateBinding AddTabButtonCommandParameter}"
                                Visibility="{Binding IsAddTabButtonVisible, RelativeSource={RelativeSource TemplatedParent}}"
                                Style="{StaticResource TabViewButtonStyle}"
                                HighContrastAdjustment="None"/>

                            <ContentPresenter
                                Grid.Column="3"
                                x:Name="RightContentPresenter"
                                HorizontalAlignment="Stretch"
                                Content="{TemplateBinding TabStripFooter}"
                                ContentTemplate="{TemplateBinding TabStripFooterTemplate}"/>

                        </Grid>

                        <!-- We don't want this to take space on the second row in case the user isn't using tab content. -->
                        <Grid x:Name="ShadowCaster"
                            Grid.Row="0"
                            Height="10"
                            Margin="0,0,0,-10"
                            VerticalAlignment="Bottom"
                            Background="Transparent"/>

                        <ContentPresenter x:Name="TabContentPresenter"
                            Grid.Row="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="primitives:TabViewListView">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Padding" Value="{ThemeResource TabViewHeaderPadding}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="TabNavigation" Value="Once" />
        <Setter Property="IsSwipeEnabled" Value="False" />
        <Setter Property="SingleSelectionFollowsFocus" Value="False"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
        <Setter Property="ItemContainerTransitions">
            <Setter.Value>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                    <ContentThemeTransition />
                    <ReorderThemeTransition />
                    <EntranceThemeTransition IsStaggeringEnabled="False" />
                </TransitionCollection>
            </Setter.Value>
        </Setter>

        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="primitives:TabViewListView">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
                        <ScrollViewer x:Name="ScrollViewer"
                            Grid.Column="1"
                            AutomationProperties.AccessibilityView="Raw"
                            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                            IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                            IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                            TabNavigation="{TemplateBinding TabNavigation}"
                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                            Style="{StaticResource TabScrollViewerStyle}">

                            <ItemsPresenter x:Name="TabsItemsPresenter"
                                Padding="{TemplateBinding Padding}" />

                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Name="TabScrollViewerStyle" TargetType="ScrollViewer">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border x:Name="Root"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <RepeatButton x:Name="ScrollDecreaseButton"
                                AutomationProperties.AccessibilityView="Raw"
                                VerticalAlignment="Bottom"
                                Width="{ThemeResource TabViewItemScrollButtonWidth}"
                                Height="{ThemeResource TabViewItemScrollButtonHeight}"
                                Padding="{ThemeResource TabViewItemScrollButtonPadding}"
                                Background="{ThemeResource TabViewScrollButtonBackground}"
                                BorderThickness="1"
                                Delay="50"
                                FontFamily="Segoe MDL2 Assets"
                                Interval="100"
                                Style="{StaticResource RepeatButtonRevealStyle}"
                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                HighContrastAdjustment="None"
                                Content="&#xE76B;"/>

                            <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                Grid.Column="1"
                                Padding="1,0,0,0"
                                contract4Present:TabFocusNavigation="Once" />

                            <RepeatButton x:Name="ScrollIncreaseButton"
                                AutomationProperties.AccessibilityView="Raw"
                                Grid.Column="2"
                                VerticalAlignment="Bottom"
                                HorizontalAlignment="Center"
                                Width="{ThemeResource TabViewItemScrollButtonWidth}"
                                Height="{ThemeResource TabViewItemScrollButtonHeight}"
                                Padding="{ThemeResource TabViewItemScrollButtonPadding}"
                                Background="{ThemeResource TabViewScrollButtonBackground}"
                                BorderThickness="1"
                                Delay="50"
                                FontFamily="Segoe MDL2 Assets"
                                Interval="100"
                                Style="{StaticResource RepeatButtonRevealStyle}"
                                HighContrastAdjustment="None"
                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                Content="&#xE76C;"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TabViewCloseButtonStyle" TargetType="Button">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin" Value="-3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter x:Name="ContentPresenter"
                        AutomationProperties.AccessibilityView="Raw"
                        contract7Present:BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Padding="{TemplateBinding Padding}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonBackgroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonForegroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonBackgroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonForegroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonBackgroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Name="TabViewButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource TabViewButtonBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource TabViewButtonForeground}"/>
        <Setter Property="CornerRadius" Value="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="Margin" Value="0,7,0,0"/>
        <Setter Property="Padding" Value="10,10,10,11"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter x:Name="ContentPresenter"
                        Background="{TemplateBinding Background}"
                        contract7Present:BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        FontSize="{TemplateBinding FontSize}"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontWeight="SemiLight"
                        Padding="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderBackgroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonBackgroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewButtonForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:TabViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TabViewItem">

                    <Grid x:Name="LayoutRoot"
                        Padding="{TemplateBinding Padding}"
                        Margin="-1,0,0,0"> <!-- This item will cover the separator on its left side. -->

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="LeftColumn" Width="0"/>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition x:Name="RightColumn" Width="0"/>
                        </Grid.ColumnDefinitions>
                        
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="LayoutRootScale" />
                        </Grid.RenderTransform>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewButtonBackgroundActiveTab}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewButtonForegroundActiveTab}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewButtonBackgroundActiveTab}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewButtonForegroundActiveTab}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewButtonBackgroundActiveTab}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewButtonForegroundActiveTab}" />
                                        <Setter Target="LeftRadiusRender.Visibility" Value="Visible"/>
                                        <Setter Target="RightRadiusRender.Visibility" Value="Visible"/>
                                        <Setter Target="LayoutRoot.Background" Value="Transparent"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewButtonBackgroundActiveTab}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewButtonForegroundActiveTab}" />
                                        <Setter Target="LayoutRoot.Background" Value="Transparent"/>
                                        <Setter Target="LeftRadiusRender.Visibility" Value="Visible"/>
                                        <Setter Target="RightRadiusRender.Visibility" Value="Visible"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewButtonBackgroundActiveTab}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewButtonForegroundActiveTab}" />
                                        <Setter Target="LayoutRoot.Background" Value="Transparent"/>
                                        <Setter Target="LeftRadiusRender.Visibility" Value="Visible"/>
                                        <Setter Target="RightRadiusRender.Visibility" Value="Visible"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
                                        <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewButtonForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DataVirtualizationStates">
                                <VisualState x:Name="DataAvailable" />

                                <VisualState x:Name="DataPlaceholder" />
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="ReorderHintStates">
                                <VisualState x:Name="NoReorderHint" />

                                <VisualState x:Name="BottomReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Bottom"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="TopReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Top"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="RightReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Right"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="LeftReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation Direction="Left"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2"
                                          To="NoReorderHint" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DragStates">
                                <VisualState x:Name="NotDragging" />

                                <VisualState x:Name="Dragging">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="{ThemeResource ListViewItemDragThemeOpacity}"
                                             Duration="0" />
                                        <DragItemThemeAnimation TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="DraggingTarget" />

                                <VisualState x:Name="MultipleDraggingPrimary" />

                                <VisualState x:Name="MultipleDraggingSecondary" />

                                <VisualState x:Name="DraggedPlaceholder" />

                                <VisualState x:Name="Reordering">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="{ThemeResource ListViewItemReorderThemeOpacity}"
                                             Duration="0:0:0.240" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="ReorderingTarget">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="{ThemeResource ListViewItemReorderTargetThemeOpacity}"
                                             Duration="0:0:0.240" />
                                        <DoubleAnimation Storyboard.TargetName="LayoutRootScale"
                                             Storyboard.TargetProperty="ScaleX"
                                             To="{ThemeResource ListViewItemReorderTargetThemeScale}"
                                             Duration="0:0:0.240" />
                                        <DoubleAnimation Storyboard.TargetName="LayoutRootScale"
                                             Storyboard.TargetProperty="ScaleY"
                                             To="{ThemeResource ListViewItemReorderTargetThemeScale}"
                                             Duration="0:0:0.240" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="MultipleReorderingPrimary" />

                                <VisualState x:Name="ReorderedPlaceholder">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="DragOver">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="IconStates">
                                <VisualState x:Name="Icon"/>
                                <VisualState x:Name="NoIcon">
                                    <VisualState.Setters>
                                        <Setter Target="IconBox.Visibility" Value="Collapsed"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="TabWidthModes">
                                <VisualState x:Name="StandardWidth"/>

                                <VisualState x:Name="Compact">
                                    <VisualState.Setters>
                                        <Setter Target="IconBox.Margin" Value="0,0,0,0"/>
                                        <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
                                        <Setter Target="IconColumn.Width" Value="{ThemeResource TabViewItemHeaderIconSize}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CloseIconStates">
                                <VisualState x:Name="CloseButtonVisible"/>
                                <VisualState x:Name="CloseButtonCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="CloseButton.Visibility" Value="Collapsed"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Path 
                            x:Name="LeftRadiusRender"
                            x:Load="False"
                            Grid.Column="0"
                            Visibility="Collapsed"
                            VerticalAlignment="Bottom"
                            Height="{Binding Source={ThemeResource OverlayCornerRadius}, Path=BottomLeft}"
                            Margin="{Binding Source={ThemeResource OverlayCornerRadius},
                                Converter={StaticResource TabViewLeftInsetCornerConverter}}"
                            Stretch="Uniform"
                            Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}"
                            Data="M4 0 L4 4 L0 4 A4,4 90 0 0 4 0 Z" /> 
                        <Path
                            x:Name="RightRadiusRender"
                            x:Load="False"
                            Grid.Column="2"
                            Visibility="Collapsed"
                            VerticalAlignment="Bottom"
                            Height="{Binding Source={ThemeResource OverlayCornerRadius}, Path=BottomRight}"
                            Margin="{Binding Source={ThemeResource OverlayCornerRadius},
                                Converter={StaticResource TabViewRightInsetCornerConverter}}"
                            Stretch="Uniform"
                            Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}"
                            Data="M0 0 L0 4 L4 4 A4 4 90 0 1 0 0 Z" />

                        <Border x:Name="TabSeparator"
                            HorizontalAlignment="Right"
                            Width="1"
                            Grid.Column="1"
                            BorderBrush="{ThemeResource TabViewItemSeparator}"
                            BorderThickness="1"
                            Margin="{ThemeResource TabViewItemSeparatorMargin}"/>

                        <Grid x:Name="TabContainer"
                            Grid.Column="1"
                            Background="{ThemeResource TabViewItemHeaderBackground}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Control.IsTemplateFocusTarget="True"
                            Padding="{ThemeResource TabViewItemHeaderPadding}"
                            CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="IconColumn" Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Viewbox x:Name="IconBox"
                                MaxWidth="{ThemeResource TabViewItemHeaderIconSize}"
                                MaxHeight="{ThemeResource TabViewItemHeaderIconSize}"
                                Margin="{ThemeResource TabViewItemHeaderIconMargin}">
                                <ContentControl x:Name="IconControl"
                                    Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TabViewTemplateSettings.IconElement}"
                                    IsTabStop="False"
                                    Foreground="{ThemeResource TabViewItemIconForeground}"
                                    HighContrastAdjustment="None" />
                            </Viewbox>

                            <ContentPresenter x:Name="ContentPresenter"
                                Grid.Column="1"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                FontWeight="{TemplateBinding FontWeight}"
                                FontSize="{ThemeResource TabViewItemHeaderFontSize}"
                                Foreground="{ThemeResource TabViewItemHeaderForeground}"
                                OpticalMarginAlignment="TrimSideBearings"
                                HighContrastAdjustment="None" />

                            <Button x:Name="CloseButton"
                                Grid.Column="2"
                                Width="{ThemeResource TabViewItemHeaderCloseButtonSize}"
                                Height="{ThemeResource TabViewItemHeaderCloseButtonSize}"
                                FontSize="{ThemeResource TabViewItemHeaderCloseFontSize}"
                                Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
                                Content="&#xE711;"
                                IsTextScaleFactorEnabled="False"
                                IsTabStop="False"
                                Background="{ThemeResource TabViewButtonBackground}"
                                Foreground="{ThemeResource TabViewButtonForeground}"
                                Style="{StaticResource TabViewCloseButtonStyle}"
                                HighContrastAdjustment="None" />
                        </Grid>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>