Ensure clear button does not overlap editable text in ComboBox (#3279)

* Ensure clear button does not overlap editable text in ComboBox

* Added comment on the initial offset

Author: nicolaihenriksen

MaterialDesignThemes.Wpf/Converters/DoubleToThicknessConverter.cs

@@ -5,13 +5,15 @@ namespace MaterialDesignThemes.Wpf.Converters
 {
     internal class DoubleToThicknessConverter : IValueConverter
     {
+        public double InitialOffset { get; set; }
+
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
             => (Dock)parameter switch
             {
-                Dock.Left => new Thickness((double)value, 0, 0, 0),
-                Dock.Top => new Thickness(0, (double)value, 0, 0),
-                Dock.Right => new Thickness(0, 0, (double)value, 0),
-                Dock.Bottom => new Thickness(0, 0, 0, (double)value),
+                Dock.Left => new Thickness(InitialOffset + (double)value, 0, 0, 0),
+                Dock.Top => new Thickness(0, InitialOffset + (double)value, 0, 0),
+                Dock.Right => new Thickness(0, 0, InitialOffset + (double)value, 0),
+                Dock.Bottom => new Thickness(0, 0, 0, InitialOffset + (double)value),
                 _ => Binding.DoNothing
             };
 

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ComboBox.xaml

@@ -26,6 +26,8 @@
   <converters:FloatingHintOffsetCalculationConverter x:Key="FloatingHintOffsetCalculationConverter" />
   <converters:ComboBoxClearButtonMarginConverter x:Key="ComboBoxClearButtonMarginConverter" />
   <converters:DoubleToThicknessConverter x:Key="DoubleToThicknessConverter" />
+  <!-- The InitialOffset of -8 is to adjust for internal margin/padding between the "selected content (text)" and the combo box chevron arrow -->
+  <converters:DoubleToThicknessConverter x:Key="DoubleToThicknessConverterWithNegativeOffset" InitialOffset="-8" />
   <converters:ThicknessCloneConverter x:Key="HelperTextMarginConverter" CloneEdges="Left" />
   <converters:ThicknessCloneConverter x:Key="DefaultOrFilledStyleTrailingIconPaddingConverterTop"
                                       AdditionalOffsetTop="2"
@@ -848,6 +850,11 @@
         <Setter TargetName="PART_Popup" Property="Background" Value="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={StaticResource RemoveAlphaBrushConverter}}" />
         <Setter TargetName="PART_Popup" Property="Tag" Value="{DynamicResource MaterialDesign.Brush.ComboBox.Popup.DarkBackground}" />
       </MultiTrigger>
+
+      <!-- PART_ClearButton -->
+      <DataTrigger Binding="{Binding ElementName=PART_ClearButton, Path=IsVisible}" Value="True">
+        <Setter TargetName="PART_EditableTextBox" Property="Margin" Value="{Binding ActualWidth, ElementName=PART_ClearButton, Converter={StaticResource DoubleToThicknessConverterWithNegativeOffset}, ConverterParameter={x:Static Dock.Right}}" />
+      </DataTrigger>
     </ControlTemplate.Triggers>
   </ControlTemplate>