Align (scrolling) TabControl with MD spec

src/MaterialDesignThemes.Wpf/Behaviors/Internal/TabControlHeaderScrollBehavior.cs

@@ -0,0 +1,168 @@
+using System.Diagnostics;
+using System.Windows.Media.Animation;
+using Microsoft.Xaml.Behaviors;
+
+namespace MaterialDesignThemes.Wpf.Behaviors.Internal;
+
+public class TabControlHeaderScrollBehavior : Behavior<ScrollViewer>
+{
+    public static readonly DependencyProperty CustomHorizontalOffsetProperty =
+    DependencyProperty.RegisterAttached("CustomHorizontalOffset", typeof(double),
+        typeof(TabControlHeaderScrollBehavior), new PropertyMetadata(0d, CustomHorizontalOffsetChanged));
+    public static double GetCustomHorizontalOffset(DependencyObject obj) => (double)obj.GetValue(CustomHorizontalOffsetProperty);
+    public static void SetCustomHorizontalOffset(DependencyObject obj, double value) => obj.SetValue(CustomHorizontalOffsetProperty, value);
+    private static void CustomHorizontalOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var scrollViewer = (ScrollViewer)d;
+        scrollViewer.ScrollToHorizontalOffset((double)e.NewValue);
+    }
+
+    public static readonly DependencyProperty TabScrollDirectionProperty =
+        DependencyProperty.RegisterAttached("TabScrollDirection", typeof(TabScrollDirection),
+            typeof(TabControlHeaderScrollBehavior), new PropertyMetadata(TabScrollDirection.Unknown));
+    public static TabScrollDirection GetTabScrollDirection(DependencyObject obj) => (TabScrollDirection)obj.GetValue(TabScrollDirectionProperty);
+    public static void SetTabScrollDirection(DependencyObject obj, TabScrollDirection value) => obj.SetValue(TabScrollDirectionProperty, value);
+
+    public TabControl TabControl
+    {
+        get => (TabControl)GetValue(TabControlProperty);
+        set => SetValue(TabControlProperty, value);
+    }
+
+    public static readonly DependencyProperty TabControlProperty =
+        DependencyProperty.Register(nameof(TabControl), typeof(TabControl),
+            typeof(TabControlHeaderScrollBehavior), new PropertyMetadata(null, OnTabControlChanged));
+
+
+    private static void OnTabControlChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var behavior = (TabControlHeaderScrollBehavior)d;
+        if (e.OldValue is TabControl oldTabControl)
+        {
+            oldTabControl.SelectionChanged -= behavior.OnTabChanged;
+            oldTabControl.SizeChanged -= behavior.OnTabControlSizeChanged;
+        }
+        if (e.NewValue is TabControl newTabControl)
+        {
+            newTabControl.SelectionChanged += behavior.OnTabChanged;
+            newTabControl.SizeChanged += behavior.OnTabControlSizeChanged;
+        }
+    }
+
+    public FrameworkElement ScrollableContent
+    {
+        get => (FrameworkElement)GetValue(ScrollableContentProperty);
+        set => SetValue(ScrollableContentProperty, value);
+    }
+
+    public static readonly DependencyProperty ScrollableContentProperty =
+        DependencyProperty.Register(nameof(ScrollableContent), typeof(FrameworkElement),
+            typeof(TabControlHeaderScrollBehavior), new PropertyMetadata(null, OnScrollableContentChanged));
+
+    private static void OnScrollableContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var behavior = (TabControlHeaderScrollBehavior)d;
+        behavior.AddPaddingToScrollableContentIfWiderThanViewPort();
+    }
+
+    private double? _desiredScrollStart;
+    private bool _isAnimatingScroll;
+
+    private void OnTabChanged(object sender, SelectionChangedEventArgs e)
+    {
+        TabControl tabControl = (TabControl)sender;
+
+        if (e.AddedItems.Count > 0)
+        {
+            _desiredScrollStart = AssociatedObject.ContentHorizontalOffset;
+            SetTabScrollDirection(tabControl, (IsMovingForward() ? TabScrollDirection.Forward : TabScrollDirection.Backward));
+        }
+
+        bool IsMovingForward()
+        {
+            if (e.RemovedItems.Count == 0) return true;
+            int previousIndex = GetItemIndex(e.RemovedItems[0]);
+            int nextIndex = GetItemIndex(e.AddedItems[^1]);
+            return nextIndex > previousIndex;
+        }
+
+        int GetItemIndex(object? item) => tabControl.Items.IndexOf(item);
+    }
+
+    private void OnTabControlSizeChanged(object sender, SizeChangedEventArgs _) => AddPaddingToScrollableContentIfWiderThanViewPort();
+    private void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs _) => AddPaddingToScrollableContentIfWiderThanViewPort();
+
+    private void AddPaddingToScrollableContentIfWiderThanViewPort()
+    {
+        if (ScrollableContent is null)
+            return;
+
+        if (ScrollableContent.ActualWidth > TabControl.ActualWidth)
+        {
+            double offset = TabAssist.GetTabScrollOffset(TabControl);
+            ScrollableContent.Margin = new(offset, 0, offset, 0);
+        }
+        else
+        {
+            ScrollableContent.Margin = new();
+        }
+    }
+
+    protected override void OnAttached()
+    {
+        base.OnAttached();
+        AssociatedObject.ScrollChanged += AssociatedObject_ScrollChanged;
+        AssociatedObject.SizeChanged += AssociatedObject_SizeChanged;
+        Dispatcher.BeginInvoke(() => AddPaddingToScrollableContentIfWiderThanViewPort());
+    }
+
+    protected override void OnDetaching()
+    {
+        base.OnDetaching();
+        if (AssociatedObject is { } ao)
+        {
+            ao.ScrollChanged -= AssociatedObject_ScrollChanged;
+            ao.SizeChanged -= AssociatedObject_SizeChanged;
+        }
+    }
+
+    private void AssociatedObject_ScrollChanged(object sender, ScrollChangedEventArgs e)
+    {
+        Debug.WriteLine($"ContentHorizontalOffset: {AssociatedObject.ContentHorizontalOffset}, HorizontalOffset: {e.HorizontalOffset}, HorizontalChange: {e.HorizontalChange}, ViewportWidth: {e.ViewportWidth}, ExtentWidth: {e.ExtentWidth}");
+        TimeSpan duration = TabAssist.GetTabScrollDuration(TabControl);
+        if (duration == TimeSpan.Zero)
+            return;
+        if ( _isAnimatingScroll || _desiredScrollStart is not { } desiredOffsetStart)
+            return;
+
+        double originalValue = desiredOffsetStart;
+        double newValue = e.HorizontalOffset;
+
+        _isAnimatingScroll = true;
+
+        // HACK: Temporarily disable user interaction while the animated scroll is ongoing. This prevents the double-click of a tab stopping the animation prematurely.
+        bool originalIsHitTestVisibleValue = TabControl.IsHitTestVisible;
+        TabControl.SetCurrentValue(FrameworkElement.IsHitTestVisibleProperty, false);
+
+        AssociatedObject.ScrollToHorizontalOffset(originalValue);
+        Debug.WriteLine($"Initiating animated scroll from {originalValue} to {newValue}. Change is: {e.HorizontalChange}");
+        DoubleAnimation scrollAnimation = new(originalValue, newValue, new Duration(duration));
+        scrollAnimation.Completed += (_, _) =>
+        {
+            Debug.WriteLine("Animation completed");
+            _desiredScrollStart = null;
+            _isAnimatingScroll = false;
+
+            // HACK: Set the hit test visibility back to its original value
+            TabControl.SetCurrentValue(FrameworkElement.IsHitTestVisibleProperty, originalIsHitTestVisibleValue);
+        };
+        AssociatedObject.BeginAnimation(TabControlHeaderScrollBehavior.CustomHorizontalOffsetProperty, scrollAnimation);
+    }
+}
+
+public enum TabScrollDirection
+{
+    Unknown,
+    Backward,
+    Forward
+}

src/MaterialDesignThemes.Wpf/Internal/BringIntoViewHijackingStackPanel.cs

@@ -0,0 +1,48 @@
+
+using MaterialDesignThemes.Wpf.Behaviors.Internal;
+
+namespace MaterialDesignThemes.Wpf.Internal;
+
+public class BringIntoViewHijackingStackPanel : StackPanel
+{
+    public TabScrollDirection TabScrollDirection
+    {
+        get => (TabScrollDirection)GetValue(TabScrollDirectionProperty);
+        set => SetValue(TabScrollDirectionProperty, value);
+    }
+
+    public static readonly DependencyProperty TabScrollDirectionProperty =
+        DependencyProperty.Register(nameof(TabScrollDirection), typeof(TabScrollDirection),
+            typeof(BringIntoViewHijackingStackPanel), new PropertyMetadata(TabScrollDirection.Unknown));
+
+    public double TabScrollOffset
+    {
+        get => (double)GetValue(TabScrollOffsetProperty);
+        set => SetValue(TabScrollOffsetProperty, value);
+    }
+
+    public static readonly DependencyProperty TabScrollOffsetProperty =
+        DependencyProperty.Register(nameof(TabScrollOffset),
+            typeof(double), typeof(BringIntoViewHijackingStackPanel), new PropertyMetadata(0d));
+
+    public BringIntoViewHijackingStackPanel()
+        => AddHandler(FrameworkElement.RequestBringIntoViewEvent, new RoutedEventHandler(OnRequestBringIntoView), false);
+
+    private void OnRequestBringIntoView(object sender, RoutedEventArgs e)
+    {
+        if (e.OriginalSource is FrameworkElement child && child != this)
+        {
+            e.Handled = true;
+
+            // TODO: Consider making the "TabScrollDirection" a destructive read (i.e. reset the value once it is read) to avoid leaving a Backward/Forward value that may be misinterpreted at a later stage.
+            double offset = TabScrollDirection switch {
+                TabScrollDirection.Backward => -TabScrollOffset,
+                TabScrollDirection.Forward => TabScrollOffset,
+                _ => 0
+            };
+            var point = child.TranslatePoint(new Point(), this);
+            var newTargetRect = new Rect(new Point(point.X + offset, point.Y), child.RenderSize);
+            BringIntoView(newTargetRect);
+        }
+    }
+}

src/MaterialDesignThemes.Wpf/TabAssist.cs

@@ -69,4 +69,24 @@ public static void SetHeaderBehavior(DependencyObject obj, TabControlHeaderBehav
     public static readonly DependencyProperty HeaderBehaviorProperty =
         DependencyProperty.RegisterAttached("HeaderBehavior", typeof(TabControlHeaderBehavior), typeof(TabAssist),
             new PropertyMetadata(TabControlHeaderBehavior.Scrolling));
+
+    public static double GetTabScrollOffset(DependencyObject obj)
+        => (double)obj.GetValue(TabScrollOffsetProperty);
+
+    public static void SetTabScrollOffset(DependencyObject obj, double value)
+        => obj.SetValue(TabScrollOffsetProperty, value);
+
+    public static readonly DependencyProperty TabScrollOffsetProperty =
+        DependencyProperty.RegisterAttached("TabScrollOffset", typeof(double),
+            typeof(TabAssist), new PropertyMetadata(0d));
+
+    public static TimeSpan GetTabScrollDuration(DependencyObject obj)
+        => (TimeSpan)obj.GetValue(TabScrollDurationProperty);
+
+    public static void SetTabScrollDuration(DependencyObject obj, TimeSpan value)
+        => obj.SetValue(TabScrollDurationProperty, value);
+
+    public static readonly DependencyProperty TabScrollDurationProperty =
+        DependencyProperty.RegisterAttached("TabScrollDuration", typeof(TimeSpan),
+            typeof(TabAssist), new PropertyMetadata(TimeSpan.Zero));
 }

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

@@ -1,6 +1,9 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters"
+                    xmlns:internal="clr-namespace:MaterialDesignThemes.Wpf.Internal"
+                    xmlns:behaviorsInternal="clr-namespace:MaterialDesignThemes.Wpf.Behaviors.Internal"
+                    xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
                     xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
 
   <ResourceDictionary.MergedDictionaries>
@@ -36,7 +39,12 @@
                               wpf:ScrollViewerAssist.PaddingMode="{Binding Path=(wpf:ScrollViewerAssist.PaddingMode), RelativeSource={RelativeSource TemplatedParent}}"
                               HorizontalScrollBarVisibility="Hidden"
                               VerticalScrollBarVisibility="Hidden">
-          <StackPanel>
+          <b:Interaction.Behaviors>
+            <behaviorsInternal:TabControlHeaderScrollBehavior TabControl="{Binding RelativeSource={RelativeSource TemplatedParent}}" ScrollableContent="{Binding ElementName=ScrollableContent}" />
+          </b:Interaction.Behaviors>
+          <internal:BringIntoViewHijackingStackPanel x:Name="ScrollableContent"
+                                                     TabScrollDirection="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(behaviorsInternal:TabControlHeaderScrollBehavior.TabScrollDirection)}"
+                                                     TabScrollOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TabAssist.TabScrollOffset)}">
             <UniformGrid x:Name="CenteredHeaderPanel"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
@@ -53,7 +61,7 @@
                                                 Focusable="False"
                                                 KeyboardNavigation.TabIndex="1"
                                                 Orientation="Horizontal" />
-          </StackPanel>
+          </internal:BringIntoViewHijackingStackPanel>
         </ScrollViewer>
       </wpf:ColorZone>
 
@@ -227,6 +235,9 @@
     <Setter Property="wpf:ElevationAssist.Elevation" Value="Dp4" />
     <Setter Property="wpf:RippleAssist.Feedback" Value="{DynamicResource MaterialDesign.Brush.Button.Ripple}" />
     <Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="False" />
+    <!-- MD spec says 52 DP, but that seems a little excessive in practice -->
+    <Setter Property="wpf:TabAssist.TabScrollOffset" Value="40" />
+    <Setter Property="wpf:TabAssist.TabScrollDuration" Value="0:0:0.250" />
 
     <Style.Triggers>
       <Trigger Property="wpf:TabAssist.HeaderBehavior" Value="Wrapping">

tests/MaterialDesignThemes.UITests/WPF/TabControls/TabControlTests.cs

@@ -152,4 +152,56 @@ public async Task TabControl_ShouldRespectSelectedContentTemplate_WhenSetDirectl
 
         recorder.Success();
     }
+
+    [Test]
+    public async Task ScrollingTabs_UniformGrid()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        //Arrange
+        const int numTabs = 10;
+        StringBuilder xaml = new("<TabControl>");
+        for (int i = 1; i <= numTabs; i++)
+        {
+            xaml.Append($"""
+                <TabItem Header="TAB {i}">
+                  <TextBlock Margin="8" Text="Tab {i}" />
+                </TabItem>
+                """);
+        }
+        xaml.Append("</TabControl>");
+        IVisualElement<TabControl> tabControl = await LoadXaml<TabControl>(xaml.ToString());
+
+        //Act
+
+        //Assert
+
+        recorder.Success();
+    }
+
+    [Test]
+    public async Task ScrollingTabs_VirtualizingStackPanel()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        //Arrange
+        const int numTabs = 10;
+        StringBuilder xaml = new("<TabControl HorizontalContentAlignment=\"Left\">");
+        for (int i = 1; i <= numTabs; i++)
+        {
+            xaml.Append($"""
+                <TabItem Header="TAB {i}">
+                  <TextBlock Margin="8" Text="Tab {i}" />
+                </TabItem>
+                """);
+        }
+        xaml.Append("</TabControl>");
+        IVisualElement<TabControl> tabControl = await LoadXaml<TabControl>(xaml.ToString());
+
+        //Act
+
+        //Assert
+
+        recorder.Success();
+    }
 }