WIP on fix.

Scroll position is now synced correctly, but the visibility property still needs to be respected properly.

Author: nicolaihenriksen

src/MaterialDesignThemes.Wpf/Behaviors/TextBoxHorizontalScrollBarBehavior.cs

@@ -0,0 +1,72 @@
+using Microsoft.Xaml.Behaviors;
+
+namespace MaterialDesignThemes.Wpf.Behaviors;
+
+internal class TextBoxHorizontalScrollBarBehavior : Behavior<ScrollViewer>
+{
+    public static readonly DependencyProperty TargetScrollBarProperty =
+        DependencyProperty.Register(nameof(TargetScrollBar), typeof(ScrollBar), typeof(TextBoxHorizontalScrollBarBehavior), new PropertyMetadata(null, TargetScrollBarChanged));
+    public ScrollBar TargetScrollBar
+    {
+        get => (ScrollBar)GetValue(TargetScrollBarProperty);
+        set => SetValue(TargetScrollBarProperty, value);
+    }
+
+    private static void TargetScrollBarChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        TextBoxHorizontalScrollBarBehavior b = (TextBoxHorizontalScrollBarBehavior)d;
+
+        if (e.OldValue is ScrollBar oldValue)
+        {
+            oldValue.Scroll -= b.TargetScrollBar_OnScroll;
+        }
+        if (e.NewValue is ScrollBar newValue)
+        {
+            newValue.Scroll += b.TargetScrollBar_OnScroll;
+        }
+    }
+
+    private void TargetScrollBar_OnScroll(object sender, ScrollEventArgs e)
+    {
+        if (AssociatedObject is not { } ao) return;
+        ao.ScrollToHorizontalOffset(e.NewValue);
+    }
+
+    private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
+        => AssociatedObject.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
+
+    private void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs e)
+    {
+        if (TargetScrollBar is not { } ts) return;
+
+        ts.ViewportSize = AssociatedObject.ViewportWidth;
+        ts.Maximum = AssociatedObject.ScrollableWidth;
+    }
+
+    private void AssociatedObject_ScrollChanged(object sender, ScrollChangedEventArgs e)
+    {
+        if (TargetScrollBar is not { } ts) return;
+
+        ts.Value = AssociatedObject.HorizontalOffset;
+    }
+
+    protected override void OnAttached()
+    {
+        base.OnAttached();
+        AssociatedObject.Loaded += AssociatedObject_Loaded;
+        AssociatedObject.SizeChanged += AssociatedObject_SizeChanged;
+        AssociatedObject.ScrollChanged += AssociatedObject_ScrollChanged;
+    }
+
+
+    protected override void OnDetaching()
+    {
+        if (AssociatedObject is { } ao)
+        {
+            ao.Loaded -= AssociatedObject_Loaded;
+            ao.SizeChanged -= AssociatedObject_SizeChanged;
+            ao.ScrollChanged -= AssociatedObject_ScrollChanged;
+        }
+        base.OnDetaching();
+    }
+}

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

@@ -4,7 +4,8 @@
                     xmlns:convertersInternal="clr-namespace:MaterialDesignThemes.Wpf.Converters.Internal"
                     xmlns:internal="clr-namespace:MaterialDesignThemes.Wpf.Internal"
                     xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
-                    xmlns:behaviors="clr-namespace:MaterialDesignThemes.Wpf.Behaviors">
+                    xmlns:behaviors="clr-namespace:MaterialDesignThemes.Wpf.Behaviors"
+                    xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
   <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml" />
     <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
@@ -131,7 +132,13 @@
                       CornerRadius="{TemplateBinding wpf:TextFieldAssist.TextFieldCornerRadius}"
                       SnapsToDevicePixels="True">
 
-                <Grid x:Name="ContentGrid"
+                <Grid>
+                  <Grid.RowDefinitions>
+                    <RowDefinition Height="*" />
+                    <RowDefinition Height="Auto" />
+                  </Grid.RowDefinitions>
+
+                  <Grid x:Name="ContentGrid"
                       MinHeight="16"
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                   <Grid.ColumnDefinitions>
@@ -153,7 +160,7 @@
                                 Opacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
                                 Visibility="{TemplateBinding wpf:TextFieldAssist.HasLeadingIcon, Converter={x:Static converters:BooleanToVisibilityConverter.CollapsedInstance}}" />
 
-                  <ScrollViewer x:Name="PART_ContentHost"
+                    <ScrollViewer x:Name="PART_ContentHost"
                                 Grid.Column="2"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
@@ -166,9 +173,13 @@
                                 HorizontalScrollBarVisibility="Hidden"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                 UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
-                                VerticalScrollBarVisibility="Hidden" />
+                                VerticalScrollBarVisibility="Hidden">
+                      <b:Interaction.Behaviors>
+                        <behaviors:TextBoxHorizontalScrollBarBehavior TargetScrollBar="{Binding ElementName=CustomScrollBar}"/>
+                      </b:Interaction.Behaviors>
+                    </ScrollViewer>
 
-                  <wpf:SmartHint x:Name="Hint"
+                    <wpf:SmartHint x:Name="Hint"
                                  Grid.Column="1"
                                  Grid.ColumnSpan="3"
                                  VerticalAlignment="Center"
@@ -290,6 +301,9 @@
                                   Height="auto"
                                   Width="auto" />
                   </Button>
+                </Grid>
+                  <ScrollBar x:Name="CustomScrollBar" Grid.Row="1" Orientation="Horizontal" />
+
                 </Grid>
               </Border>
             </AdornerDecorator>