From 554471a2b9efb12c2c56d1cf652a74a6d3706338 Mon Sep 17 00:00:00 2001
From: Emmanuel Hansen <emmausssss@gmail.com>
Date: Fri, 11 Sep 2026 15:33:51 +0000
Subject: [PATCH] fluent 2 - base tabstrip on selectorbar control

---
 .../Controls/TabStrip.xaml                    |   2 +
 .../Controls/TabStripItem.xaml                | 234 ++++++++++++------
 2 files changed, 165 insertions(+), 71 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent2/Controls/TabStrip.xaml b/src/Avalonia.Themes.Fluent2/Controls/TabStrip.xaml
index ecaad94482..629ee16c39 100644
--- a/src/Avalonia.Themes.Fluent2/Controls/TabStrip.xaml
+++ b/src/Avalonia.Themes.Fluent2/Controls/TabStrip.xaml
@@ -10,8 +10,10 @@
       </TabStrip>
     </Border>
   </Design.PreviewWith>
+  <Thickness x:Key="TabStripBarPadding">0,4</Thickness>
 
   <ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
+    <Setter Property="Padding" Value="{DynamicResource TabStripBarPadding}" />
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}"
diff --git a/src/Avalonia.Themes.Fluent2/Controls/TabStripItem.xaml b/src/Avalonia.Themes.Fluent2/Controls/TabStripItem.xaml
index c1df2cdf9b..0db47802ec 100644
--- a/src/Avalonia.Themes.Fluent2/Controls/TabStripItem.xaml
+++ b/src/Avalonia.Themes.Fluent2/Controls/TabStripItem.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:ClassModifier="internal">
+  xmlns="https://github.com/avaloniaui"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  x:ClassModifier="internal">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
@@ -12,96 +12,188 @@
     </Border>
   </Design.PreviewWith>
 
-  <!-- WinUI reference: Pivot_themeresources.xaml (DefaultPivotHeaderItemStyle),
-       Uno.UI.FluentTheme.v2 Version2/PriorityDefault. Mirrors TabItem.xaml: 24px SemiLight
-       header, padding 12,0, subtle rounded hover fill, accent selection pipe bumped
-       2 -> 3 with fully rounded ends. WinUI has no press scale. -->
+  <ResourceDictionary.ThemeDictionaries>
+    <ResourceDictionary x:Key="Default">
+      <StaticResource x:Key="TabStripItemPillFill" ResourceKey="AccentFillColorDefaultBrush"/>
+      <StaticResource x:Key="TabStripItemDisabledPillFill" ResourceKey="AccentFillColorDisabledBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrush" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushSelected" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushPressed" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundPressed" ResourceKey="TextFillColorTertiaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+      <StaticResource x:Key="TabStripItemBackground" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundSelected" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundPressed" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundDisabled" ResourceKey="SystemControlTransparentBrush"/>
+    </ResourceDictionary>
+    <ResourceDictionary x:Key="Dark">
+      <StaticResource x:Key="TabStripItemPillFill" ResourceKey="AccentFillColorDefaultBrush"/>
+      <StaticResource x:Key="TabStripItemDisabledPillFill" ResourceKey="AccentFillColorDisabledBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrush" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushSelected" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushPressed" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundPressed" ResourceKey="TextFillColorTertiaryBrush"/>
+      <StaticResource x:Key="TabStripItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+      <StaticResource x:Key="TabStripItemBackground" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundSelected" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundPressed" ResourceKey="SystemControlTransparentBrush"/>
+      <StaticResource x:Key="TabStripItemBackgroundDisabled" ResourceKey="SystemControlTransparentBrush"/>
+    </ResourceDictionary>
+  </ResourceDictionary.ThemeDictionaries>
 
-  <x:Double x:Key="TabStripItemMinHeight">48</x:Double>
-  <x:Double x:Key="TabStripItemPipeThickness">3</x:Double>
-  <CornerRadius x:Key="TabStripItemPipeCornerRadius">1.5</CornerRadius>
+  <Thickness x:Key="TabStripItemBorderThickness">1</Thickness>
+  <Thickness x:Key="TabStripSelectedInnerThickness">1</Thickness>
+  <Thickness x:Key="TabStripItemIconVisualMargin">-2,0</Thickness>
+  <Thickness x:Key="TabStripItemTextVisualMargin">0</Thickness>
+  <Thickness x:Key="TabStripItemPadding">12,10,12,7</Thickness>
+  <Thickness x:Key="TabStripItemSelectionVisualMargin">0</Thickness>
+  <Thickness x:Key="TabStripItemFocusVisualMargin">-2</Thickness>
+  <x:Double x:Key="TabStripItemPillHeight">3</x:Double>
+  <x:Double x:Key="TabStripItemPillWidth">4</x:Double>
+  <x:Double x:Key="TabStripItemPillScaledWidth">16</x:Double>
+  <x:Double x:Key="TabStripItemIconScale">0.8</x:Double>
+  <x:Double x:Key="TabStripItemSpacing">8</x:Double>
+
+  <ControlTheme x:Key="TabStripItemPill" TargetType="Rectangle" BasedOn="{StaticResource ComboBoxItemPill}">
+    <Setter Property="Fill" Value="{DynamicResource TabStripItemPillFill}"/>
+    <Setter Property="Height" Value="{DynamicResource TabStripItemPillHeight}"/>
+    <Setter Property="Width" Value="{DynamicResource TabStripItemPillWidth}"/>
+  </ControlTheme>
 
   <ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
-    <Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
-    <Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" />
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
-    <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" />
-    <Setter Property="Padding" Value="{DynamicResource TabItemHeaderMargin}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="Foreground" Value="{DynamicResource TabStripItemForeground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource TabStripItemBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="{DynamicResource TabStripItemBorderThickness}"/>
+    <Setter Property="Padding" Value="{StaticResource TabStripItemPadding}"/>
     <Setter Property="Margin" Value="0" />
-    <Setter Property="MinHeight" Value="{DynamicResource TabStripItemMinHeight}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalAlignment" Value="Left"/>
+    <Setter Property="VerticalAlignment" Value="Center"/>
+    <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border
-            Name="PART_LayoutRoot"
-            Background="{TemplateBinding Background}"
-            BorderBrush="{TemplateBinding BorderBrush}"
-            BorderThickness="{TemplateBinding BorderThickness}"
-            CornerRadius="{TemplateBinding CornerRadius}"
-            Padding="{TemplateBinding Padding}">
-          <Border.Transitions>
-            <Transitions>
-              <BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
-            </Transitions>
-          </Border.Transitions>
-          <Panel>
+          Name="PART_LayoutRoot"
+          Background="{TemplateBinding Background}"
+          BorderBrush="{TemplateBinding BorderBrush}"
+          BorderThickness="{TemplateBinding BorderThickness}"
+          CornerRadius="{TemplateBinding CornerRadius}">
+          <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto">
             <ContentPresenter
-                Name="PART_ContentPresenter"
-                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                Content="{TemplateBinding Content}"
-                ContentTemplate="{TemplateBinding ContentTemplate}" />
-            <Border Name="PART_SelectedPipe"
-                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
-                    CornerRadius="{DynamicResource TabStripItemPipeCornerRadius}"
-                    Height="{DynamicResource TabStripItemPipeThickness}"
-                    IsVisible="False"
-                    Margin="0,0,0,2"
-                    VerticalAlignment="Bottom"/>
-          </Panel>
+              Grid.ColumnSpan="2"
+              Margin="{TemplateBinding Padding}"
+              Name="PART_ContentPresenter"
+              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+              Content="{TemplateBinding Content}"
+              ContentTemplate="{TemplateBinding ContentTemplate}" />
+            <Rectangle x:Name="PART_SelectedPipe"
+                       Grid.ColumnSpan="2"
+                       Grid.Row="1"
+                       Theme="{StaticResource TabStripItemPill}"
+                       RadiusX="0.5"
+                       RadiusY="1"
+                       Margin="{DynamicResource TabStripItemSelectionVisualMargin}"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Bottom"
+                       IsHitTestVisible="False"
+                       Opacity="0">
+              <Rectangle.Transitions>
+                <Transitions>
+                  <DoubleTransition Property="Width"
+                                                 Duration="{DynamicResource ComboBoxItemScaleAnimationDuration}"
+                                                 Easing="0,0,0,1"/>
+                </Transitions>
+              </Rectangle.Transitions>
+            </Rectangle>
+          </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
+    <!-- Pointer-over -->
+    <Style Selector="^:pointerover">
 
-    <!--  Selected state  -->
-    <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
-    <Style Selector="^:selected">
-      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
-      <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
-    </Style>
-    <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
-      <Setter Property="IsVisible" Value="True" />
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundPointerOver}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPointerOver}" />
+      </Style>
     </Style>
 
-    <!--  PointerOver state  -->
-    <Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
-      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
-      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
-    </Style>
+    <!-- Pressed -->
+    <Style Selector="^:pressed">
 
-    <!--  Selected PointerOver state  -->
-    <Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot">
-      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
-      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundPressed}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPressed}" />
+      </Style>
     </Style>
 
-    <!--  Pressed state  -->
-    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
-      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
-      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
-    </Style>
+    <!-- Disabled -->
+    <Style Selector="^:disabled">
 
-    <!--  Selected Pressed state  -->
-    <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
-      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
-      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource  TabStripItemBackgroundDisabled}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundDisabled}" />
+      </Style>
+
+      <Style Selector="^ /template/ Rectangle#PART_SelectedPipe">
+        <Setter Property="Fill" Value="{DynamicResource  TabStripItemDisabledPillFill}" />
+      </Style>
     </Style>
 
-    <!--  Disabled state  -->
-    <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
-      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
-      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
+    <!-- Selected state -->
+    <Style Selector="^:selected">
+
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundSelected}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundSelected}" />
+      </Style>
+
+      <Style Selector="^ /template/ Rectangle#PART_SelectedPipe">
+        <Setter Property="Opacity" Value="1" />
+        <Setter Property="Width" Value="{DynamicResource TabStripItemPillScaledWidth}" />
+      </Style>
+
+      <!-- Pointer-over -->
+      <Style Selector="^:pointerover">
+        <Style Selector="^ /template/ Border#PART_LayoutRoot">
+          <Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundSelected}" />
+          <Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPointerOver}" />
+        </Style>
+      </Style>
+
+      <!-- Pressed -->
+      <Style Selector="^:pressed">
+
+        <Style Selector="^ /template/ Border#PART_LayoutRoot">
+          <Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundSelected}" />
+          <Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPointerOver}" />
+        </Style>
+      </Style>
+
+      <!-- Disabled -->
+      <Style Selector="^:disabled">
+
+        <Style Selector="^ /template/ Border#PART_LayoutRoot">
+          <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
+          <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
+        </Style>
+      </Style>
     </Style>
   </ControlTheme>
 </ResourceDictionary>