From eee0e13a8d600d87ea013611842c4220f6411c8a Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Wed, 17 Jun 2020 02:44:19 -0400
Subject: [PATCH] Fluent TabStrip style

---
 src/Avalonia.Themes.Fluent/TabStrip.xaml     |  14 ++-
 src/Avalonia.Themes.Fluent/TabStripItem.xaml | 107 ++++++++++++++++---
 2 files changed, 102 insertions(+), 19 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/TabStrip.xaml b/src/Avalonia.Themes.Fluent/TabStrip.xaml
index 29ca1e7c94..8b3c0a8310 100644
--- a/src/Avalonia.Themes.Fluent/TabStrip.xaml
+++ b/src/Avalonia.Themes.Fluent/TabStrip.xaml
@@ -1,11 +1,20 @@
 <Styles xmlns="https://github.com/avaloniaui">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <TabStrip>
+        <TabStripItem>Item 1</TabStripItem>
+        <TabStripItem>Item 2</TabStripItem>
+        <TabStripItem IsEnabled="False">Disabled</TabStripItem>
+      </TabStrip>
+    </Border>
+  </Design.PreviewWith>
   <Style Selector="TabStrip">
     <Setter Property="Template">
       <ControlTemplate>
         <ItemsPresenter Name="PART_ItemsPresenter"
                         Items="{TemplateBinding Items}"
                         ItemsPanel="{TemplateBinding ItemsPanel}"
-                        ItemTemplate="{TemplateBinding ItemTemplate}"/>
+                        ItemTemplate="{TemplateBinding ItemTemplate}" />
       </ControlTemplate>
     </Setter>
     <Setter Property="ItemsPanel">
@@ -14,7 +23,4 @@
       </ItemsPanelTemplate>
     </Setter>
   </Style>
-  <Style Selector="TabStrip > TabStripItem">
-    <Setter Property="Margin" Value="16"/>
-  </Style>
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/TabStripItem.xaml b/src/Avalonia.Themes.Fluent/TabStripItem.xaml
index 28c4c68a3d..93c52b030d 100644
--- a/src/Avalonia.Themes.Fluent/TabStripItem.xaml
+++ b/src/Avalonia.Themes.Fluent/TabStripItem.xaml
@@ -1,23 +1,100 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <TabStripItem>Leaf</TabStripItem>
+        <TabStripItem IsSelected="True">Arch</TabStripItem>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+  <Styles.Resources>
+    <x:Double x:Key="TabStripItemHeight">48</x:Double>
+  </Styles.Resources>
+
   <Style Selector="TabStripItem">
-    <Setter Property="Background" Value="Transparent"/>
-    <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}"/>
+    <Setter Property="FontSize" Value="{DynamicResource PivotHeaderItemFontSize}" />
+    <Setter Property="FontWeight" Value="{DynamicResource PivotHeaderItemThemeFontWeight}" />
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundUnselected}" />
+    <Setter Property="Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselected}" />
+    <Setter Property="Padding" Value="{DynamicResource PivotHeaderItemMargin}" />
+    <Setter Property="Margin" Value="0" />
+    <Setter Property="Height" Value="{DynamicResource TabStripItemHeight}" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <ContentPresenter Name="PART_ContentPresenter"
-                          Background="{TemplateBinding Background}"
-                          BorderBrush="{TemplateBinding BorderBrush}"
-                          BorderThickness="{TemplateBinding BorderThickness}"
-                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                          Content="{TemplateBinding Content}"
-                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                          Padding="{TemplateBinding Padding}"/>
+        <Border Name="PART_LayoutRoot"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Padding="{TemplateBinding Padding}">
+          <Panel>
+            <ContentPresenter Name="PART_ContentPresenter"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              TextBlock.FontFamily="{TemplateBinding FontFamily}"
+                              TextBlock.FontSize="{TemplateBinding FontSize}"
+                              TextBlock.FontWeight="{TemplateBinding FontWeight}" />
+            <Border Name="PART_SelectedPipe"
+                    Height="2"
+                    Margin="0,0,0,2"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Bottom"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    Background="{DynamicResource PivotHeaderItemSelectedPipeFill}" />
+          </Panel>
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>
+
+
+  <!--  Nornal state  -->
+  <Style Selector="TabStripItem /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{Binding $parent[TabStripItem].Background}" />
+  </Style>
+  <Style Selector="TabStripItem /template/ Border#PART_SelectedPipe">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+
+  <!--  Selected state  -->
+  <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
   <Style Selector="TabStripItem:selected">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundSelected}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundSelected}" />
+  </Style>
+  <Style Selector="TabStripItem:selected /template/ Border#PART_SelectedPipe">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+
+  <!--  PointerOver state  -->
+  <Style Selector="TabStripItem:pointerover /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundUnselectedPointerOver}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselectedPointerOver}" />
+  </Style>
+
+  <!--  Selected PointerOver state  -->
+  <Style Selector="TabStripItem:selected:pointerover /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundSelectedPointerOver}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundSelectedPointerOver}" />
+  </Style>
+
+  <!--  Pressed state  -->
+  <Style Selector="TabStripItem:pressed /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundUnselectedPressed}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselectedPressed}" />
+  </Style>
+
+  <!--  Selected Pressed state  -->
+  <Style Selector="TabStripItem:pressed /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundSelectedPressed}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundSelectedPressed}" />
+  </Style>
+
+  <!--  Disabled state  -->
+  <Style Selector="TabStripItem:disabled /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundDisabled}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundDisabled}" />
   </Style>
-</Styles>
\ No newline at end of file
+</Styles>