Fix positioning of helper text and validation error in TextBox

The helper text and the validation error now respects a custom padding

MaterialDesignThemes.Wpf/Converters/ThicknessCloneConverter.cs

@@ -0,0 +1,43 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace MaterialDesignThemes.Wpf.Converters;
+
+public class ThicknessCloneConverter : IValueConverter
+{
+    public ThicknessEdges CloneEdges { get; set; } = ThicknessEdges.All;
+
+    public double NonClonedEdgeValue { get; set; } = 0;
+
+    public double? FixedLeft { get; set; }
+    public double? FixedTop { get; set; }
+    public double? FixedRight { get; set; }
+    public double? FixedBottom { get; set; }
+
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is Thickness thickness)
+        {
+            double left = FixedLeft ?? (CloneEdges.HasFlag(ThicknessEdges.Left) ? thickness.Left : NonClonedEdgeValue);
+            double top = FixedTop ?? (CloneEdges.HasFlag(ThicknessEdges.Top) ? thickness.Top : NonClonedEdgeValue);
+            double right = FixedRight ?? (CloneEdges.HasFlag(ThicknessEdges.Right) ? thickness.Right : NonClonedEdgeValue);
+            double bottom = FixedBottom ?? (CloneEdges.HasFlag(ThicknessEdges.Bottom) ? thickness.Bottom : NonClonedEdgeValue);
+            return new Thickness(left, top, right, bottom);
+        }
+        return DependencyProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotImplementedException();
+}
+
+[Flags]
+public enum ThicknessEdges
+{
+    None = 0,
+    Left = 1,
+    Top = 2,
+    Right = 4,
+    Bottom = 8,
+    All = Left | Top | Right | Bottom
+}

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TextBox.xaml

@@ -18,6 +18,7 @@
   <converters:CursorConverter x:Key="ArrowCursorConverter" FallbackCursor="Arrow" />
   <converters:CursorConverter x:Key="IBeamCursorConverter" FallbackCursor="IBeam" />
   <converters:StringLengthValueConverter x:Key="StringLengthValueConverter" />
+  <converters:ThicknessCloneConverter x:Key="HelperTextMarginConverter" CloneEdges="Left" />
 
   <Style x:Key="MaterialDesignCharacterCounterTextBlock"
          TargetType="TextBlock"
@@ -259,7 +260,8 @@
                   <ColumnDefinition />
                   <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-                <TextBlock x:Name="HelperTextTextBlock" Style="{Binding Path=(wpf:HintAssist.HelperTextStyle), RelativeSource={RelativeSource TemplatedParent}}" />
+                <TextBlock x:Name="HelperTextTextBlock" Style="{Binding Path=(wpf:HintAssist.HelperTextStyle), RelativeSource={RelativeSource TemplatedParent}}"
+                           Margin="{TemplateBinding Padding, Converter={StaticResource HelperTextMarginConverter}}"/>
                 <Border x:Name="CharacterCounterContainer" Grid.Column="1">
                   <TextBlock x:Name="CharacterCounterTextBlock" Style="{Binding Path=(wpf:TextFieldAssist.CharacterCounterStyle), RelativeSource={RelativeSource TemplatedParent}}" />
                 </Border>
@@ -304,13 +306,11 @@
             <Trigger Property="wpf:TextFieldAssist.HasFilledTextField" Value="True">
               <Setter Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
               <Setter TargetName="Hint" Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="{x:Static wpf:Constants.DefaultTextBoxViewMarginEmbedded}" />
-              <Setter TargetName="HelperTextTextBlock" Property="Margin" Value="16,0,0,0" />
             </Trigger>
             <Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
               <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
               <Setter Property="BorderThickness" Value="1" />
               <Setter TargetName="Hint" Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="{x:Static wpf:Constants.DefaultTextBoxViewMarginEmbedded}" />
-              <Setter TargetName="HelperTextTextBlock" Property="Margin" Value="16,0,0,0" />
               <Setter TargetName="Hint" Property="FloatingOffset">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource FloatingHintOffsetCalculationConverter}">

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml

@@ -1,10 +1,15 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
+                    xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
+                    xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters">
   <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
 
   <ControlTemplate x:Key="MaterialDesignValidationErrorTemplate">
     <ControlTemplate.Resources>
+      <converters:ThicknessCloneConverter x:Key="FloatingHintValidationErrorTextMarginConverter" CloneEdges="Left" />
+      <converters:ThicknessCloneConverter x:Key="FilledValidationErrorTextMarginConverter" CloneEdges="Left" FixedTop="2" FixedBottom="2" />
+      <converters:ThicknessCloneConverter x:Key="OutlinedValidationErrorTextMarginConverter" CloneEdges="Left" FixedTop="2" />
+
       <DataTemplate DataType="{x:Type ValidationError}">
         <TextBlock MaxWidth="{Binding ElementName=Placeholder, Path=ActualWidth}"
                    Margin="2"
@@ -20,6 +25,7 @@
       <AdornedElementPlaceholder Name="Placeholder" />
       <Border x:Name="DefaultErrorViewer"
               Background="{Binding ElementName=Placeholder, Path=AdornedElement.(wpf:ValidationAssist.Background)}"
+              Margin="{Binding ElementName=Placeholder, Path=AdornedElement.Padding, Converter={StaticResource FloatingHintValidationErrorTextMarginConverter}}"
               Visibility="Collapsed">
         <TextBlock MaxWidth="{Binding ElementName=Placeholder, Path=ActualWidth}"
                    Margin="0,2"
@@ -95,12 +101,12 @@
       </DataTrigger>
 
       <DataTrigger Binding="{Binding ElementName=Placeholder, Path=AdornedElement.(wpf:TextFieldAssist.HasOutlinedTextField)}" Value="True">
-        <Setter TargetName="DefaultErrorViewer" Property="Margin" Value="16,2,0,0" />
+        <Setter TargetName="DefaultErrorViewer" Property="Margin" Value="{Binding ElementName=Placeholder, Path=AdornedElement.Padding, Converter={StaticResource OutlinedValidationErrorTextMarginConverter}}" />
         <Setter TargetName="ValidationPopup" Property="VerticalOffset" Value="2" />
       </DataTrigger>
 
       <DataTrigger Binding="{Binding ElementName=Placeholder, Path=AdornedElement.(wpf:TextFieldAssist.HasFilledTextField)}" Value="True">
-        <Setter TargetName="DefaultErrorViewer" Property="Margin" Value="16,2,0,2" />
+        <Setter TargetName="DefaultErrorViewer" Property="Margin" Value="{Binding ElementName=Placeholder, Path=AdornedElement.Padding, Converter={StaticResource OutlinedValidationErrorTextMarginConverter}}" />
       </DataTrigger>
     </ControlTemplate.Triggers>
   </ControlTemplate>