From 55579e1e3a85b50ea824da44caf04e0a9eed13ac Mon Sep 17 00:00:00 2001
From: Corvin <corvinszimion@googlemail.com>
Date: Tue, 17 Jun 2025 18:05:09 +0200
Subject: [PATCH] added AP to be able to swap between a scrollable and a
 wrapping header panel in a TabControl

---
 src/MainDemo.Wpf/Domain/TabsViewModel.cs      |  6 +-
 src/MainDemo.Wpf/Tabs.xaml                    | 82 +++++++++++++++++++
 src/MaterialDesignThemes.Wpf/TabAssist.cs     | 18 +++-
 .../MaterialDesignTheme.TabControl.xaml       | 82 ++++++++++++-------
 4 files changed, 157 insertions(+), 31 deletions(-)

diff --git a/src/MainDemo.Wpf/Domain/TabsViewModel.cs b/src/MainDemo.Wpf/Domain/TabsViewModel.cs
index 08c32cc99b..26b1ad234a 100644
--- a/src/MainDemo.Wpf/Domain/TabsViewModel.cs
+++ b/src/MainDemo.Wpf/Domain/TabsViewModel.cs
@@ -4,10 +4,10 @@
 
 namespace MaterialDesignDemo.Domain;
 
-internal class TabsViewModel : ViewModelBase
+internal partial class TabsViewModel : ObservableObject
 {
     public ObservableCollection<CustomTab> CustomTabs { get; }
-
+    public List<int> LongList { get; }
     public CustomTab? SelectedTab { get; set; }
 
     public string? VeryLongText { get; set; } = @"
@@ -47,6 +47,8 @@ public TabsViewModel()
                 CustomContent = "Custom content 3",
             },
         };
+
+        LongList = Enumerable.Range(1, 20).ToList();
     }
 
 }
diff --git a/src/MainDemo.Wpf/Tabs.xaml b/src/MainDemo.Wpf/Tabs.xaml
index 60252e2997..b575c717ae 100644
--- a/src/MainDemo.Wpf/Tabs.xaml
+++ b/src/MainDemo.Wpf/Tabs.xaml
@@ -755,5 +755,87 @@
       </materialDesign:Card>
     </smtx:XamlDisplay>
 
+    <Border Width="720"
+        BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
+        BorderThickness="1">
+      <Grid>
+        <Grid.RowDefinitions>
+          <RowDefinition Height="auto" />
+          <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Grid.ColumnDefinitions>
+          <ColumnDefinition Width="*" MinWidth="50" />
+          <ColumnDefinition Width="2" />
+          <ColumnDefinition Width="*" MinWidth="50" />
+        </Grid.ColumnDefinitions>
+
+        <materialDesign:ColorZone Grid.ColumnSpan="2"
+                              Padding="8"
+                              Mode="PrimaryMid">
+          <TextBlock Text="materialDesign:TabAssist.HeaderBehavior=&quot;Scrolling&quot;" />
+        </materialDesign:ColorZone>
+
+        <materialDesign:ColorZone Grid.Column="2"
+                              Padding="8"
+                              Mode="PrimaryMid">
+          <TextBlock Text="materialDesign:TabAssist.HeaderBehavior=&quot;Wrapping&quot;" />
+        </materialDesign:ColorZone>
+
+        <smtx:XamlDisplay Grid.Row="1"
+                      Grid.Column="0"
+                      Margin="16"
+                      UniqueKey="tabs_tabAssist_1">
+          <TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
+                  ItemsSource="{Binding LongList}"
+                  Style="{StaticResource MaterialDesignTabControl}">
+            <TabControl.ItemTemplate>
+              <DataTemplate>
+                <StackPanel Orientation="Horizontal">
+                  <TextBlock Text="{Binding ., StringFormat=Header {0}}" />
+                </StackPanel>
+              </DataTemplate>
+            </TabControl.ItemTemplate>
+            <TabControl.ContentTemplate>
+              <DataTemplate>
+                <TextBlock Margin="10"
+                       FontSize="18"
+                       Text="{Binding ., StringFormat=Content {0}}" />
+              </DataTemplate>
+            </TabControl.ContentTemplate>
+          </TabControl>
+        </smtx:XamlDisplay>
+
+        <GridSplitter Grid.RowSpan="2"
+                  Grid.Column="1"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch" />
+
+        <smtx:XamlDisplay Grid.Row="1"
+                      Grid.Column="2"
+                      Margin="16"
+                      UniqueKey="tabs_tabAssist_2">
+          <TabControl materialDesign:TabAssist.HeaderBehavior="Wrapping"
+                  ItemsSource="{Binding LongList}"
+                  Style="{StaticResource MaterialDesignTabControl}">
+            <TabControl.ItemTemplate>
+              <DataTemplate>
+                <StackPanel Orientation="Horizontal">
+                  <TextBlock Text="{Binding ., StringFormat=Header {0}}" />
+                </StackPanel>
+              </DataTemplate>
+            </TabControl.ItemTemplate>
+            <TabControl.ContentTemplate>
+              <DataTemplate>
+                <TextBlock Margin="10"
+                       FontSize="18"
+                       Text="{Binding ., StringFormat=Content {0}}" />
+              </DataTemplate>
+            </TabControl.ContentTemplate>
+          </TabControl>
+        </smtx:XamlDisplay>
+
+      </Grid>
+    </Border>
+
   </StackPanel>
 </UserControl>
diff --git a/src/MaterialDesignThemes.Wpf/TabAssist.cs b/src/MaterialDesignThemes.Wpf/TabAssist.cs
index 2dd368738f..9e6abf2fc2 100644
--- a/src/MaterialDesignThemes.Wpf/TabAssist.cs
+++ b/src/MaterialDesignThemes.Wpf/TabAssist.cs
@@ -1,5 +1,11 @@
 namespace MaterialDesignThemes.Wpf;
 
+public enum TabControlHeaderBehavior
+{
+    Scrolling,
+    Wrapping
+}
+
 public static class TabAssist
 {
     public static readonly DependencyProperty HasFilledTabProperty = DependencyProperty.RegisterAttached(
@@ -27,7 +33,7 @@ public static void SetHeaderPanelMargin(DependencyObject element, Thickness valu
         => element.SetValue(HeaderPanelMarginProperty, value);
 
     public static Thickness GetHeaderPanelMargin(DependencyObject element)
-        => (Thickness) element.GetValue(HeaderPanelMarginProperty);
+        => (Thickness)element.GetValue(HeaderPanelMarginProperty);
 
     internal static Visibility GetBindableIsItemsHost(DependencyObject obj)
         => (Visibility)obj.GetValue(BindableIsItemsHostProperty);
@@ -45,4 +51,14 @@ private static void OnBindableIsItemsHostChanged(DependencyObject d, DependencyP
             panel.IsItemsHost = (Visibility)e.NewValue == Visibility.Visible;
         }
     }
+
+    public static TabControlHeaderBehavior GetHeaderBehavior(DependencyObject obj)
+    => (TabControlHeaderBehavior)obj.GetValue(HeaderBehaviorProperty);
+
+    public static void SetHeaderBehavior(DependencyObject obj, TabControlHeaderBehavior value)
+        => obj.SetValue(HeaderBehaviorProperty, value);
+
+    public static readonly DependencyProperty HeaderBehaviorProperty =
+        DependencyProperty.RegisterAttached("HeaderBehavior", typeof(TabControlHeaderBehavior), typeof(TabAssist),
+            new PropertyMetadata(TabControlHeaderBehavior.Scrolling));
 }
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml
index 87867f8aee..e801accd81 100644
--- a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml
+++ b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml
@@ -31,57 +31,83 @@
         <ControlTemplate TargetType="{x:Type TabControl}">
           <DockPanel KeyboardNavigation.TabNavigation="Local">
             <wpf:ColorZone x:Name="PART_HeaderZone"
-                           VerticalAlignment="Stretch"
-                           Panel.ZIndex="1"
-                           wpf:ElevationAssist.Elevation="{TemplateBinding wpf:ElevationAssist.Elevation}"
-                           Background="{TemplateBinding wpf:ColorZoneAssist.Background}"
-                           DockPanel.Dock="Top"
-                           Focusable="False">
-              <ScrollViewer wpf:ScrollViewerAssist.BubbleVerticalScroll="True"
-                            wpf:ScrollViewerAssist.SupportHorizontalScroll="True"
+                         VerticalAlignment="Stretch"
+                         Panel.ZIndex="1"
+                         wpf:ElevationAssist.Elevation="{TemplateBinding wpf:ElevationAssist.Elevation}"
+                         Background="{TemplateBinding wpf:ColorZoneAssist.Background}"
+                         DockPanel.Dock="Top"
+                         Focusable="False">
+              <Grid>
+                <!-- Scrollable headers -->
+                <ScrollViewer x:Name="PART_HeaderScrollViewer"
+                            wpf:ScrollViewerAssist.BubbleVerticalScroll="True"
                             wpf:ScrollViewerAssist.IgnorePadding="{Binding Path=(wpf:ScrollViewerAssist.IgnorePadding), RelativeSource={RelativeSource TemplatedParent}}"
                             wpf:ScrollViewerAssist.PaddingMode="{Binding Path=(wpf:ScrollViewerAssist.PaddingMode), RelativeSource={RelativeSource TemplatedParent}}"
+                            wpf:ScrollViewerAssist.SupportHorizontalScroll="True"
                             HorizontalScrollBarVisibility="Hidden"
                             VerticalScrollBarVisibility="Hidden">
-                <StackPanel>
-                  <UniformGrid x:Name="CenteredHeaderPanel"
-                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  <StackPanel>
+                    <UniformGrid x:Name="CenteredHeaderPanel"
                                Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
+                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                wpf:TabAssist.BindableIsItemsHost="{Binding Visibility, RelativeSource={RelativeSource Self}}"
                                Focusable="False"
                                KeyboardNavigation.TabIndex="1"
                                Rows="1" />
-                  <VirtualizingStackPanel x:Name="HeaderPanel"
-                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    <VirtualizingStackPanel x:Name="HeaderPanel"
                                           Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
+                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                           wpf:TabAssist.BindableIsItemsHost="{Binding Visibility, RelativeSource={RelativeSource Self}}"
                                           Focusable="False"
                                           KeyboardNavigation.TabIndex="1"
                                           Orientation="Horizontal" />
-                </StackPanel>
-              </ScrollViewer>
+                  </StackPanel>
+                </ScrollViewer>
+
+                <!-- Wrapping headers -->
+                <ScrollViewer x:Name="PART_HeaderWrapScrollViewer"
+                            HorizontalScrollBarVisibility="Disabled"
+                            VerticalScrollBarVisibility="Auto"
+                            Visibility="Collapsed">
+                  <WrapPanel x:Name="HeaderWrapPanel"
+                           Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
+                           Background="Transparent"
+                           IsItemsHost="True"
+                           KeyboardNavigation.TabIndex="1" />
+                </ScrollViewer>
+              </Grid>
             </wpf:ColorZone>
             <Border x:Name="PART_BorderSelectedContent"
-                    Padding="{TemplateBinding Padding}"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Panel.ZIndex="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Panel.ZIndex)}"
-                    Background="{x:Null}"
-                    Focusable="False">
+                  Padding="{TemplateBinding Padding}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Panel.ZIndex="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Panel.ZIndex)}"
+                  Background="{x:Null}"
+                  Focusable="False">
               <ContentPresenter x:Name="PART_SelectedContentHost"
-                                Margin="{TemplateBinding Padding}"
-                                ContentSource="SelectedContent"
-                                ContentStringFormat="{TemplateBinding SelectedContentStringFormat}"
-                                ContentTemplate="{TemplateBinding SelectedContentTemplate}"
-                                ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"
-                                Focusable="False"
-                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                              Margin="{TemplateBinding Padding}"
+                              ContentSource="SelectedContent"
+                              ContentStringFormat="{TemplateBinding SelectedContentStringFormat}"
+                              ContentTemplate="{TemplateBinding SelectedContentTemplate}"
+                              ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"
+                              Focusable="False"
+                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
             </Border>
           </DockPanel>
 
           <ControlTemplate.Triggers>
+
+            <Trigger Property="wpf:TabAssist.HeaderBehavior" Value="Scrolling">
+              <Setter TargetName="PART_HeaderScrollViewer" Property="Visibility" Value="Visible"/>
+              <Setter TargetName="PART_HeaderWrapScrollViewer" Property="Visibility" Value="Collapsed"/>
+            </Trigger>
+            <Trigger Property="wpf:TabAssist.HeaderBehavior" Value="Wrapping">
+              <Setter TargetName="PART_HeaderScrollViewer" Property="Visibility" Value="Collapsed"/>
+              <Setter TargetName="PART_HeaderWrapScrollViewer" Property="Visibility" Value="Visible"/>
+            </Trigger>
+
             <Trigger Property="HorizontalContentAlignment" Value="Stretch">
               <Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
               <Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />