Override TabStrip and add TabStripExtension

Toolkit.UI.Avalonia/ListBoxExtension.cs

@@ -2,14 +2,13 @@
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.LogicalTree;
-using Toolkit.UI.Controls.Avalonia;
 
 namespace Toolkit.UI.Avalonia;
 
 public class ListBoxExtension
 {
     public static readonly AttachedProperty<bool> IsItemInvokedEnabledProperty =
-        AvaloniaProperty.RegisterAttached<NavigationViewItem, bool>("IsItemInvokedEnabled",
+        AvaloniaProperty.RegisterAttached<ListBoxItem, bool>("IsItemInvokedEnabled",
             typeof(ListBoxExtension), false);
 
     public static readonly RoutedEvent<ItemInvokedEventArgs> ItemInvokedEvent =

Toolkit.UI.Avalonia/TabStripExtension.cs

@@ -0,0 +1,84 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+
+namespace Toolkit.UI.Avalonia;
+
+public class TabStripExtension
+{
+    public static readonly AttachedProperty<bool> IsItemInvokedEnabledProperty =
+        AvaloniaProperty.RegisterAttached<TabStripItem, bool>("IsItemInvokedEnabled",
+            typeof(TabStripExtension), false);
+
+    public static readonly RoutedEvent<ItemInvokedEventArgs> ItemInvokedEvent =
+        RoutedEvent.Register<ItemInvokedEventArgs>("ItemInvoked",
+            RoutingStrategies.Bubble, typeof(TabStripExtension));
+
+    static TabStripExtension()
+    {
+        IsItemInvokedEnabledProperty.Changed.AddClassHandler<TabStripItem>(OnIsItemClickEnabledPropertyChanged);
+    }
+
+    private static void OnIsItemClickEnabledPropertyChanged(TabStripItem sender,
+        AvaloniaPropertyChangedEventArgs args)
+    {
+        bool TrySetupTabStrip()
+        {
+            if (sender.GetLogicalAncestors().OfType<TabStrip>().FirstOrDefault() is TabStrip tabStrip)
+            {
+                void OnItemInvoked(object? _, SelectionChangedEventArgs args)
+                {
+                    if (args.AddedItems is { Count: > 0 })
+                    {
+                        if (sender.DataContext == tabStrip.SelectedItem)
+                        {
+                            sender.RaiseEvent(new ItemInvokedEventArgs { RoutedEvent = ItemInvokedEvent });
+                        }
+                    }
+                }
+
+                if (sender.DataContext == tabStrip.SelectedItem)
+                {
+                    sender.RaiseEvent(new ItemInvokedEventArgs { RoutedEvent = ItemInvokedEvent });
+                }
+
+                void HandleUnloaded(object? _, RoutedEventArgs __)
+                {
+                    tabStrip.SelectionChanged -= OnItemInvoked;
+                    tabStrip.Unloaded -= HandleUnloaded;
+                }
+
+                tabStrip.SelectionChanged += OnItemInvoked;
+                tabStrip.Unloaded += HandleUnloaded;
+
+                return true;
+            }
+
+            return false;
+        }
+
+        if (!TrySetupTabStrip())
+        {
+            void HandleLoaded(object? _, RoutedEventArgs __)
+            {
+                TrySetupTabStrip();
+            }
+
+            sender.Loaded += HandleLoaded;
+        }
+    }
+
+    public static bool GetIsItemInvokedEnabled(TabStripItem element) =>
+        element.GetValue(IsItemInvokedEnabledProperty);
+
+    public static void SetIsItemInvokedEnabled(TabStripItem element, bool value) =>
+        element.SetValue(IsItemInvokedEnabledProperty, value);
+
+    public static void AddItemInvokedHandler(TabStripItem element, EventHandler<ItemInvokedEventArgs> handler) =>
+        element.AddHandler(ItemInvokedEvent, handler);
+
+    public static void RemoveItemInvokedHandler(TabStripItem element, EventHandler<ItemInvokedEventArgs> handler) =>
+        element.RemoveHandler(ItemInvokedEvent, handler);
+}

Toolkit.UI.Controls.Avalonia/TabStrip/TabStrip.axaml

@@ -0,0 +1,175 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
+    <ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Background" Value="{DynamicResource ControlAltFillColorSecondaryBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="KeyboardNavigation.TabNavigation" Value="Once" />
+        <Setter Property="Padding" Value="-1" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <WrapPanel />
+            </ItemsPanelTemplate>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Height="{TemplateBinding Height}"
+                    VerticalAlignment="Stretch"
+                    Background="{TemplateBinding Background}"
+                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ItemsPresenter
+                        Margin="{TemplateBinding Padding}"
+                        VerticalAlignment="Stretch"
+                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+        <Setter Property="Background" Value="{DynamicResource ControlFillColorTransparentBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ControlFillColorTransparentBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="MinWidth" Value="60" />
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Name="Root"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="1"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    TemplatedControl.IsTemplateFocusTarget="True">
+                    <Border.Transitions>
+                        <Transitions>
+                            <BrushTransition Property="Background" Duration="00:00:00.083" />
+                        </Transitions>
+                    </Border.Transitions>
+
+                    <Panel>
+                        <Border
+                            Name="Hover"
+                            Margin="3"
+                            Background="Transparent"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Border.Transitions>
+                                <Transitions>
+                                    <BrushTransition Property="Background" Duration="00:00:00.083" />
+                                    <TransformOperationsTransition
+                                        Easing="0,0 0,1"
+                                        Property="RenderTransform"
+                                        Duration="00:00:00.167" />
+                                </Transitions>
+                            </Border.Transitions>
+                        </Border>
+
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Margin="11,5,11,6"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+
+                        <Rectangle
+                            Name="Pill"
+                            Width="4"
+                            Height="3"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Bottom"
+                            Fill="{DynamicResource PivotHeaderItemSelectedPipeFill}"
+                            Opacity="0"
+                            RadiusX="0.5"
+                            RadiusY="1"
+                            RenderTransform="scaleX(4)">
+                            <Rectangle.Transitions>
+                                <Transitions>
+                                    <TransformOperationsTransition
+                                        Easing="0,0 0,1"
+                                        Property="RenderTransform"
+                                        Duration="00:00:00.167" />
+                                </Transitions>
+                            </Rectangle.Transitions>
+                        </Rectangle>
+
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#Hover">
+                <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#Hover">
+                <Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
+                <Setter Property="RenderTransform" Value="scale(0.96)" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#Hover">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Border#Root">
+                <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#Pill">
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <Style Selector="^:pressed /template/ Rectangle#Pill">
+                <Setter Property="RenderTransform" Value="scaleX(1)" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#Hover">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Border#Root">
+                <Setter Property="Background" Value="{DynamicResource ControlFillColorDisabledBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ControlAltFillColorSecondaryBrush}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

Toolkit.UI.Controls.Avalonia/Themes/ControlResources.axaml

@@ -8,6 +8,7 @@
                 <MergeResourceInclude Source="../SettingsExpander/SettingsExpander.axaml" />
                 <MergeResourceInclude Source="../Overflow/Overflow.axaml" />
                 <MergeResourceInclude Source="../ContentBadge/ContentBadge.axaml" />
+                <MergeResourceInclude Source="../TabStrip/TabStrip.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>