From ad1563a0e24798cf6955729773a97b94aba8ec10 Mon Sep 17 00:00:00 2001
From: T Paine <tpaine@microsoft.com>
Date: Thu, 22 Aug 2019 13:42:48 -0700
Subject: [PATCH] TabView: Visual update (#1192)

* Update visuals to match design. Added new event for VectorChanged, fixed unwanted tooltip appearing due to keyboard accelerators.
---
 dev/Generated/TabView.properties.cpp    |  11 +++
 dev/Generated/TabView.properties.h      |   3 +
 dev/TabView/TabView.cpp                 |   4 +-
 dev/TabView/TabView.idl                 |   2 +
 dev/TabView/TabView.xaml                | 113 +++++++++++++++++++-----
 dev/TabView/TabView_themeresources.xaml |  55 ++++++------
 dev/TabView/TestUI/TabViewPage.xaml.cs  |   2 +-
 7 files changed, 143 insertions(+), 47 deletions(-)

diff --git a/dev/Generated/TabView.properties.cpp b/dev/Generated/TabView.properties.cpp
index 242c94b23c..9cee250d57 100644
--- a/dev/Generated/TabView.properties.cpp
+++ b/dev/Generated/TabView.properties.cpp
@@ -33,6 +33,7 @@ TabViewProperties::TabViewProperties()
     , m_tabDragCompletedEventSource{static_cast<TabView*>(this)}
     , m_tabDragStartingEventSource{static_cast<TabView*>(this)}
     , m_tabDroppedOutsideEventSource{static_cast<TabView*>(this)}
+    , m_tabItemsChangedEventSource{static_cast<TabView*>(this)}
     , m_tabStripDragOverEventSource{static_cast<TabView*>(this)}
     , m_tabStripDropEventSource{static_cast<TabView*>(this)}
 {
@@ -505,6 +506,16 @@ void TabViewProperties::TabDroppedOutside(winrt::event_token const& token)
     m_tabDroppedOutsideEventSource.remove(token);
 }
 
+winrt::event_token TabViewProperties::TabItemsChanged(winrt::TypedEventHandler<winrt::TabView, winrt::IVectorChangedEventArgs> const& value)
+{
+    return m_tabItemsChangedEventSource.add(value);
+}
+
+void TabViewProperties::TabItemsChanged(winrt::event_token const& token)
+{
+    m_tabItemsChangedEventSource.remove(token);
+}
+
 winrt::event_token TabViewProperties::TabStripDragOver(winrt::DragEventHandler const& value)
 {
     return m_tabStripDragOverEventSource.add(value);
diff --git a/dev/Generated/TabView.properties.h b/dev/Generated/TabView.properties.h
index 93dc8282c2..63ac06cce1 100644
--- a/dev/Generated/TabView.properties.h
+++ b/dev/Generated/TabView.properties.h
@@ -108,6 +108,8 @@ class TabViewProperties
     void TabDragStarting(winrt::event_token const& token);
     winrt::event_token TabDroppedOutside(winrt::TypedEventHandler<winrt::TabView, winrt::TabViewTabDroppedOutsideEventArgs> const& value);
     void TabDroppedOutside(winrt::event_token const& token);
+    winrt::event_token TabItemsChanged(winrt::TypedEventHandler<winrt::TabView, winrt::IVectorChangedEventArgs> const& value);
+    void TabItemsChanged(winrt::event_token const& token);
     winrt::event_token TabStripDragOver(winrt::DragEventHandler const& value);
     void TabStripDragOver(winrt::event_token const& token);
     winrt::event_token TabStripDrop(winrt::DragEventHandler const& value);
@@ -119,6 +121,7 @@ class TabViewProperties
     event_source<winrt::TypedEventHandler<winrt::TabView, winrt::TabViewTabDragCompletedEventArgs>> m_tabDragCompletedEventSource;
     event_source<winrt::TypedEventHandler<winrt::TabView, winrt::TabViewTabDragStartingEventArgs>> m_tabDragStartingEventSource;
     event_source<winrt::TypedEventHandler<winrt::TabView, winrt::TabViewTabDroppedOutsideEventArgs>> m_tabDroppedOutsideEventSource;
+    event_source<winrt::TypedEventHandler<winrt::TabView, winrt::IVectorChangedEventArgs>> m_tabItemsChangedEventSource;
     event_source<winrt::DragEventHandler> m_tabStripDragOverEventSource;
     event_source<winrt::DragEventHandler> m_tabStripDropEventSource;
 
diff --git a/dev/TabView/TabView.cpp b/dev/TabView/TabView.cpp
index ec962a8d12..b0c8832fcc 100644
--- a/dev/TabView/TabView.cpp
+++ b/dev/TabView/TabView.cpp
@@ -268,8 +268,10 @@ void TabView::OnSizeChanged(const winrt::IInspectable&, const winrt::SizeChanged
 
 void TabView::OnItemsChanged(winrt::IInspectable const& item)
 {
-    if (auto args = item.as< winrt::IVectorChangedEventArgs>())
+    if (auto args = item.as<winrt::IVectorChangedEventArgs>())
     {
+        m_tabItemsChangedEventSource(*this, args);
+
         int numItems = static_cast<int>(TabItems().Size());
         if (args.CollectionChange() == winrt::CollectionChange::ItemRemoved && numItems > 0)
         {
diff --git a/dev/TabView/TabView.idl b/dev/TabView/TabView.idl
index c9a8734afd..291958eb01 100644
--- a/dev/TabView/TabView.idl
+++ b/dev/TabView/TabView.idl
@@ -71,6 +71,8 @@ unsealed runtimeclass TabView : Windows.UI.Xaml.Controls.Control
 
     event Windows.Foundation.TypedEventHandler<TabView, Object> AddTabButtonClick;
 
+    event Windows.Foundation.TypedEventHandler<TabView, Windows.Foundation.Collections.IVectorChangedEventArgs> TabItemsChanged;
+
     // From ListView
     Object TabItemsSource;
     Windows.Foundation.Collections.IVector<Object> TabItems{ get; };
diff --git a/dev/TabView/TabView.xaml b/dev/TabView/TabView.xaml
index 87e1e90eae..7f68b8fd35 100644
--- a/dev/TabView/TabView.xaml
+++ b/dev/TabView/TabView.xaml
@@ -3,6 +3,8 @@
     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">
 
@@ -11,6 +13,7 @@
         <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>
@@ -200,14 +203,83 @@
     </Style>
 
     <Style x:Name="TabViewButtonStyle" TargetType="Button">
-        <Setter Property="FontSize" Value="12"/>
+        <Setter Property="Background" Value="{ThemeResource TabViewItemHeaderBackground}"/>
+        <Setter Property="Foreground" Value="{ThemeResource SystemControlBackgroundBaseMediumBrush}"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource TabViewItemCornerRadius}"/>
+        <Setter Property="FontSize" Value="11"/>
         <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
-        <Setter Property="Width" Value="24"/>
-        <Setter Property="Height" Value="24"/>
         <Setter Property="VerticalAlignment" Value="Bottom"/>
-        <Setter Property="Margin" Value="4,0,4,3"/>
-        <Setter Property="Padding" Value="0"/>
-        <Setter Property="Background" Value="Transparent"/>
+        <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 SystemControlBackgroundBaseMediumHighBrush}" />
+                                        </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 SystemControlBackgroundBaseMediumHighBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" />
+                                    </Storyboard>
+                                </VisualState>
+
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                            </VisualStateGroup>
+
+                        </VisualStateManager.VisualStateGroups>
+                    </ContentPresenter>
+
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
     </Style>
 
     <Style TargetType="local:TabViewItem">
@@ -407,7 +479,7 @@
                         <Border x:Name="TabSeparator"
                             HorizontalAlignment="Right"
                             Width="1"
-                            BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
+                            BorderBrush="{ThemeResource TabViewItemSeparator}"
                             BorderThickness="1"
                             Margin="0,6,0,6"/>
 
@@ -445,16 +517,17 @@
                                 ContentTemplate="{TemplateBinding HeaderTemplate}"
                                 ContentTransitions="{TemplateBinding ContentTransitions}"
                                 FontWeight="{TemplateBinding FontWeight}"
+                                FontSize="{ThemeResource TabViewItemHeaderFontSize}"
                                 OpticalMarginAlignment="TrimSideBearings" />
 
                             <Button x:Name="CloseButton"
                                 Grid.Column="2"
-                                Width="{ThemeResource TabViewItemHeaderIconSize}"
-                                Height="{ThemeResource TabViewItemHeaderIconSize}"
+                                Width="{ThemeResource TabViewItemHeaderCloseButtonSize}"
+                                Height="{ThemeResource TabViewItemHeaderCloseButtonSize}"
                                 FontFamily="Segoe MDL2 Assets"
-                                FontSize="10"
+                                FontSize="{ThemeResource TabViewItemHeaderCloseFontSize}"
                                 Padding="0"
-                                Margin="8,0,0,0"
+                                Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
                                 Content="&#xE711;"
                                 IsTabStop="False">
                                 <Button.Resources>
@@ -466,27 +539,27 @@
                                                 <StaticResource x:Key="ButtonBackground" ResourceKey="SystemControlTransparentBrush"/>
                                                 <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundListLowBrush"/>
                                                 <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundListMediumBrush"/>
-                                                <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
-                                                <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush"/>
-                                                <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
+                                                <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush"/>
+                                                <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
+                                                <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
                                             </ResourceDictionary>
 
                                             <ResourceDictionary x:Key="Dark">
                                                 <StaticResource x:Key="ButtonBackground" ResourceKey="SystemControlTransparentBrush"/>
                                                 <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundListLowBrush"/>
                                                 <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundListMediumBrush"/>
-                                                <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
-                                                <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush"/>
-                                                <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
+                                                <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush"/>
+                                                <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
+                                                <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
                                             </ResourceDictionary>
 
                                             <ResourceDictionary x:Key="HighContrast">
                                                 <StaticResource x:Key="ButtonBackground" ResourceKey="SystemControlTransparentBrush"/>
                                                 <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundListLowBrush"/>
                                                 <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundListMediumBrush"/>
-                                                <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
-                                                <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush"/>
-                                                <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
+                                                <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush"/>
+                                                <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
+                                                <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumHighBrush"/>
                                             </ResourceDictionary>
                                         </ResourceDictionary.ThemeDictionaries>
                                     </ResourceDictionary>
diff --git a/dev/TabView/TabView_themeresources.xaml b/dev/TabView/TabView_themeresources.xaml
index c467fba471..d437b10998 100644
--- a/dev/TabView/TabView_themeresources.xaml
+++ b/dev/TabView/TabView_themeresources.xaml
@@ -9,54 +9,59 @@
             <StaticResource x:Key="TabViewBackground"                        ResourceKey="SystemControlBackgroundBaseLowBrush" />
             <StaticResource x:Key="TabViewItemHeaderBackground"              ResourceKey="SystemControlTransparentBrush" />
             <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"      ResourceKey="SystemControlBackgroundAltHighBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"   ResourceKey="SystemControlHighlightListLowBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"       ResourceKey="SystemControlHighlightListMediumBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForeground"              ResourceKey="SystemControlForegroundBaseMediumBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForegroundPressed"       ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"   ResourceKey="SystemAltMediumLowColor" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"       ResourceKey="SystemAltMediumColor" />
+            <StaticResource x:Key="TabViewItemHeaderForeground"              ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderForegroundPressed"       ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundSelected"      ResourceKey="SystemControlForegroundBaseHighBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForegroundPointerOver"   ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderForegroundPointerOver"   ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundDisabled"      ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="TabViewItemSeparator"                     ResourceKey="SystemControlForegroundBaseLowBrush" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Dark">
             <StaticResource x:Key="TabViewBackground"                        ResourceKey="SystemControlBackgroundBaseLowBrush" />
             <StaticResource x:Key="TabViewItemHeaderBackground"              ResourceKey="SystemControlTransparentBrush" />
             <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"      ResourceKey="SystemControlBackgroundAltHighBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"   ResourceKey="SystemControlHighlightListLowBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"       ResourceKey="SystemControlHighlightListMediumBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForeground"              ResourceKey="SystemControlForegroundBaseMediumBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForegroundPressed"       ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"   ResourceKey="SystemAltMediumLowColor" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"       ResourceKey="SystemAltMediumColor" />
+            <StaticResource x:Key="TabViewItemHeaderForeground"              ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderForegroundPressed"       ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundSelected"      ResourceKey="SystemControlForegroundBaseHighBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForegroundPointerOver"   ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderForegroundPointerOver"   ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundDisabled"      ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="TabViewItemSeparator"                     ResourceKey="SystemControlForegroundBaseLowBrush" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
             <StaticResource x:Key="TabViewBackground"                        ResourceKey="SystemControlBackgroundBaseLowBrush" />
             <StaticResource x:Key="TabViewItemHeaderBackground"              ResourceKey="SystemControlTransparentBrush" />
             <StaticResource x:Key="TabViewItemHeaderBackgroundSelected"      ResourceKey="SystemControlHighlightBaseHighBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"   ResourceKey="SystemControlHighlightListLowBrush" />
-            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"       ResourceKey="SystemControlHighlightListMediumBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForeground"              ResourceKey="SystemControlForegroundBaseMediumBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForegroundPressed"       ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPointerOver"   ResourceKey="SystemAltMediumLowColor" />
+            <StaticResource x:Key="TabViewItemHeaderBackgroundPressed"       ResourceKey="SystemAltMediumColor" />
+            <StaticResource x:Key="TabViewItemHeaderForeground"              ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderForegroundPressed"       ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundSelected"      ResourceKey="SystemControlForegroundBaseHighBrush" />
-            <StaticResource x:Key="TabViewItemHeaderForegroundPointerOver"   ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
+            <StaticResource x:Key="TabViewItemHeaderForegroundPointerOver"   ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="TabViewItemHeaderForegroundDisabled"      ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="TabViewItemSeparator"                     ResourceKey="SystemControlForegroundBaseLowBrush" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
-    <Thickness x:Key="TabViewHeaderPadding">6,6,6,0</Thickness>
+    <Thickness x:Key="TabViewHeaderPadding">8,8,0,0</Thickness>
     <CornerRadius x:Key="TabViewItemCornerRadius">4,4,0,0</CornerRadius>
-    <Thickness x:Key="TabViewItemHeaderMargin">0</Thickness>
-    <Thickness x:Key="TabViewItemHeaderPadding">12,4,12,6</Thickness>
-    <Thickness x:Key="TabViewItemHeaderIconMargin">0,0,8,0</Thickness>
-    <Thickness x:Key="TabViewItemHeaderCloseMargin">8,0,-8,0</Thickness>
-    <Thickness x:Key="TabViewItemHeaderBorderThickness">0,1,1,0</Thickness>
-    <x:Double x:Key="TabViewItemHeaderIconSize">16</x:Double>
-    <x:Double x:Key="TabViewItemMaxWidth">200</x:Double>
+    <Thickness x:Key="TabViewItemHeaderPadding">12,8,10,8</Thickness>
+
+    <x:Double x:Key="TabViewItemMaxWidth">240</x:Double>
     <x:Double x:Key="TabViewItemMinWidth">100</x:Double>
-    <x:Double x:Key="TabViewItemHeaderMinHeight">40</x:Double>
-    <x:Double x:Key="TabViewItemHeaderCloseWidth">32</x:Double>
+
+    <x:Double x:Key="TabViewItemHeaderFontSize">12</x:Double>
+    <x:Double x:Key="TabViewItemHeaderIconSize">16</x:Double>
+    <Thickness x:Key="TabViewItemHeaderIconMargin">0,0,8,0</Thickness>
+
+    <x:Double x:Key="TabViewItemHeaderCloseButtonSize">16</x:Double>
+    <x:Double x:Key="TabViewItemHeaderCloseFontSize">12</x:Double>
+    <Thickness x:Key="TabViewItemHeaderCloseMargin">10,0,0,0</Thickness>
 
     <x:Double x:Key="TabViewItemScrollButtonWidth">29</x:Double>
     <x:Double x:Key="TabViewItemScrollButtonHeight">29</x:Double>
diff --git a/dev/TabView/TestUI/TabViewPage.xaml.cs b/dev/TabView/TestUI/TabViewPage.xaml.cs
index 23994581b0..2daebffd31 100644
--- a/dev/TabView/TestUI/TabViewPage.xaml.cs
+++ b/dev/TabView/TestUI/TabViewPage.xaml.cs
@@ -298,7 +298,7 @@ private void OnTabStripDrop(object sender, DragEventArgs e)
 
         public void SetTabViewWidth_Click(object sender, RoutedEventArgs e)
         {
-            Tabs.Width = 700;
+            Tabs.Width = 690;
         }
 
         public void GetScrollButtonsVisible_Click(object sender, RoutedEventArgs e)