[SmartHint] Add opt-in AP to control hint padding brush (#3701)

nicolaihenriksen · Keboo · web-flow · commit f13c4956d355 · 2024-10-23T22:45:46.000-07:00
* Add AP to use for padding brush

* Apply AP in SmartHint style

* Forward AP and remove no longer needed trigger in TextBox style

* Apply AP fix in AutoSuggestBox style

* Apply AP fix in PasswordBox style

* Apply AP fix in ComboBox style

* Apply AP fix in DatePicker style

* Apply AP fix in TimePicker style

* Add showcasing of AP to demo apps

* Adjust UI tests

* Update src/MaterialDesignThemes.Wpf/HintAssist.cs

Co-authored-by: Kevin B &lt;Keboo@users.noreply.github.com&gt;

---------

Co-authored-by: Kevin B &lt;Keboo@users.noreply.github.com&gt;
diff --git a/src/MainDemo.Wpf/Fields.xaml b/src/MainDemo.Wpf/Fields.xaml
@@ -671,6 +671,20 @@
       </smtx:XamlDisplay>
     </StackPanel>
 
+    <Rectangle Style="{StaticResource PageSectionSeparator}" />
+    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Custom Background" />
+
+    <WrapPanel Margin="0,0,0,32" Background="Chocolate">
+      <smtx:XamlDisplay Margin="16"
+                        UniqueKey="fields_custom_background_1">
+        <TextBox Width="200"
+                 Style="{StaticResource MaterialDesignOutlinedTextBox}"
+                 materialDesign:HintAssist.Hint="Hint text"
+                 materialDesign:HintAssist.HintPaddingBrush="Chocolate" />
+        <!-- Set HintAssist.HintPaddingBrush to match the custom background to get correct coloring of the hint padding (when floated) -->
+      </smtx:XamlDisplay>
+    </WrapPanel>
+
     <Rectangle Style="{StaticResource PageSectionSeparator}" />
     <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="AutoSuggestBox" />
 
diff --git a/src/MaterialDesign3.Demo.Wpf/Fields.xaml b/src/MaterialDesign3.Demo.Wpf/Fields.xaml
@@ -518,5 +518,19 @@
         </smtx:XamlDisplay>
       </StackPanel>
     </Grid>
+
+    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Text="Custom Background" Margin="0,20,0,0" />
+
+    <WrapPanel Margin="0,0,0,32" Background="Chocolate">
+      <smtx:XamlDisplay Margin="16"
+                        UniqueKey="fields_custom_background_1">
+        <TextBox Width="200"
+                 Style="{StaticResource MaterialDesignOutlinedTextBox}"
+                 materialDesign:HintAssist.Hint="Hint text"
+                 materialDesign:HintAssist.HintPaddingBrush="Chocolate" />
+        <!-- Set HintAssist.HintPaddingBrush to match the custom background to get correct coloring of the hint padding (when floated) -->
+      </smtx:XamlDisplay>
+    </WrapPanel>
+    
   </StackPanel>
 </UserControl>
diff --git a/src/MaterialDesignThemes.Wpf/HintAssist.cs b/src/MaterialDesignThemes.Wpf/HintAssist.cs
@@ -119,6 +119,17 @@ public static void SetBackground(DependencyObject element, Brush value)
         => element.SetValue(BackgroundProperty, value);
     #endregion
 
+    #region AttachedProperty: HintPaddingBrush
+    public static readonly DependencyProperty HintPaddingBrushProperty =
+        DependencyProperty.RegisterAttached("HintPaddingBrush", typeof(Brush), typeof(HintAssist), new PropertyMetadata(null));
+
+    public static Brush? GetHintPaddingBrush(DependencyObject obj)
+        => (Brush)obj.GetValue(HintPaddingBrushProperty);
+
+    public static void SetHintPaddingBrush(DependencyObject obj, Brush? value)
+        => obj.SetValue(HintPaddingBrushProperty, value);
+    #endregion
+
     #region AttachedProperty : HelperTextProperty
     public static readonly DependencyProperty HelperTextProperty
         = DependencyProperty.RegisterAttached("HelperText", typeof(string), typeof(HintAssist),
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.AutoSuggestBox.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.AutoSuggestBox.xaml
@@ -156,21 +156,22 @@
                         VerticalScrollBarVisibility="Hidden" />
 
                   <wpf:SmartHint x:Name="Hint"
-                         Grid.Column="1"
-                         Grid.ColumnSpan="3"
-                         VerticalAlignment="Center"
-                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                         FloatingOffset="{TemplateBinding wpf:HintAssist.FloatingOffset}"
-                         FloatingScale="{TemplateBinding wpf:HintAssist.FloatingScale}"
-                         FontFamily="{TemplateBinding wpf:HintAssist.FontFamily}"
-                         FontSize="{TemplateBinding FontSize}"
-                         HintOpacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
-                         HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
-                         UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
-                         FloatingTarget="{Binding ElementName=PART_ContentHost}"
-                         HintHost="{Binding RelativeSource={RelativeSource TemplatedParent}}"
-                         wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}">
+                                 Grid.Column="1"
+                                 Grid.ColumnSpan="3"
+                                 VerticalAlignment="Center"
+                                 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                 FloatingOffset="{TemplateBinding wpf:HintAssist.FloatingOffset}"
+                                 FloatingScale="{TemplateBinding wpf:HintAssist.FloatingScale}"
+                                 FontFamily="{TemplateBinding wpf:HintAssist.FontFamily}"
+                                 FontSize="{TemplateBinding FontSize}"
+                                 HintOpacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
+                                 HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
+                                 UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
+                                 FloatingTarget="{Binding ElementName=PART_ContentHost}"
+                                 HintHost="{Binding RelativeSource={RelativeSource TemplatedParent}}"
+                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                                 wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}">
                     <wpf:SmartHint.InitialHorizontalOffset>
                       <MultiBinding Converter="{StaticResource FloatingHintInitialHorizontalOffsetConverter}">
                         <Binding ElementName="PrefixTextBlock" Path="ActualWidth" />
@@ -369,14 +370,6 @@
               <Setter TargetName="Hint" Property="FloatingMargin" Value="4,0" />
               <Setter TargetName="Hint" Property="InitialVerticalOffset" Value="{Binding ElementName=Hint, Path=ActualHeight, Converter={StaticResource DivisionConverter}, ConverterParameter=2}" />
             </Trigger>
-            <MultiTrigger>
-              <MultiTrigger.Conditions>
-                <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
-                <Condition Property="wpf:HintAssist.IsFloating" Value="True" />
-                <Condition SourceName="Hint" Property="IsHintInFloatingPosition" Value="True" />
-              </MultiTrigger.Conditions>
-              <Setter TargetName="Hint" Property="wpf:HintAssist.Background" Value="{DynamicResource MaterialDesign.Brush.Background}" />
-            </MultiTrigger>
 
             <!-- IsEnabled -->
             <MultiTrigger>
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ComboBox.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ComboBox.xaml
@@ -411,6 +411,7 @@
                              FloatingTarget="{Binding ElementName=PART_EditableTextBox}"
                              HintHost="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                              wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                             wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                              UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
                 <wpf:SmartHint.InitialHorizontalOffset>
@@ -595,14 +596,6 @@
         <Setter TargetName="Hint" Property="FloatingMargin" Value="4,0" />
         <Setter TargetName="Hint" Property="InitialVerticalOffset" Value="{Binding ElementName=Hint, Path=ActualHeight, Converter={StaticResource DivisionConverter}, ConverterParameter=2}" />
       </Trigger>
-      <MultiTrigger>
-        <MultiTrigger.Conditions>
-          <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
-          <Condition Property="wpf:HintAssist.IsFloating" Value="True" />
-          <Condition SourceName="Hint" Property="IsHintInFloatingPosition" Value="True" />
-        </MultiTrigger.Conditions>
-        <Setter TargetName="Hint" Property="wpf:HintAssist.Background" Value="{DynamicResource MaterialDesign.Brush.Background}" />
-      </MultiTrigger>
 
       <!-- Floating hint -->
       <MultiTrigger>
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml
@@ -59,6 +59,7 @@
                                wpf:HintAssist.FontFamily="{TemplateBinding wpf:HintAssist.FontFamily}"
                                wpf:HintAssist.Foreground="{TemplateBinding wpf:HintAssist.Foreground}"
                                wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                               wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}"
                                wpf:HintAssist.HelperTextStyle="{TemplateBinding wpf:HintAssist.HelperTextStyle}"
                                wpf:HintAssist.Hint="{TemplateBinding wpf:HintAssist.Hint}"
                                wpf:HintAssist.HintOpacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.PasswordBox.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.PasswordBox.xaml
@@ -212,7 +212,8 @@
                                  HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
                                  UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
                                  FloatingTarget="{Binding ElementName=PART_ContentHost}"
-                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}">
+                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                                 wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}">
                     <wpf:SmartHint.InitialHorizontalOffset>
                       <MultiBinding Converter="{StaticResource FloatingHintInitialHorizontalOffsetConverter}">
                         <Binding ElementName="PrefixTextBlock" Path="ActualWidth" />
@@ -361,14 +362,6 @@
               <Setter TargetName="Hint" Property="FloatingMargin" Value="4,0" />
               <Setter TargetName="Hint" Property="InitialVerticalOffset" Value="{Binding ElementName=Hint, Path=ActualHeight, Converter={StaticResource DivisionConverter}, ConverterParameter=2}" />
             </Trigger>
-            <MultiTrigger>
-              <MultiTrigger.Conditions>
-                <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
-                <Condition Property="wpf:HintAssist.IsFloating" Value="True" />
-                <Condition SourceName="Hint" Property="IsHintInFloatingPosition" Value="True" />
-              </MultiTrigger.Conditions>
-              <Setter Property="wpf:HintAssist.Background" Value="{DynamicResource MaterialDesign.Brush.Background}" />
-            </MultiTrigger>
 
             <!-- IsEnabled -->
             <MultiTrigger>
@@ -838,7 +831,8 @@
                                  HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
                                  UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
                                  FloatingTarget="{Binding ElementName=PART_ContentHost}"
-                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}">
+                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                                 wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}">
                     <wpf:SmartHint.InitialHorizontalOffset>
                       <MultiBinding Converter="{StaticResource FloatingHintInitialHorizontalOffsetConverter}">
                         <Binding ElementName="PrefixTextBlock" Path="ActualWidth" />
@@ -1000,14 +994,6 @@
               <Setter TargetName="Hint" Property="FloatingMargin" Value="4,0" />
               <Setter TargetName="Hint" Property="InitialVerticalOffset" Value="{Binding ElementName=Hint, Path=ActualHeight, Converter={StaticResource DivisionConverter}, ConverterParameter=2}" />
             </Trigger>
-            <MultiTrigger>
-              <MultiTrigger.Conditions>
-                <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
-                <Condition Property="wpf:HintAssist.IsFloating" Value="True" />
-                <Condition SourceName="Hint" Property="IsHintInFloatingPosition" Value="True" />
-              </MultiTrigger.Conditions>
-              <Setter Property="wpf:HintAssist.Background" Value="{DynamicResource MaterialDesign.Brush.Background}" />
-            </MultiTrigger>
 
             <!-- IsEnabled -->
             <MultiTrigger>
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.SmartHint.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.SmartHint.xaml
@@ -18,6 +18,7 @@
       <converters:FloatingHintContainerMarginConverter x:Key="FloatingHintContainerMarginConverter" />
       <converters:FloatingHintTextBlockMarginConverter x:Key="FloatingHintTextBlockMarginConverter" />
       <converters:FloatingHintClippingGridConverter x:Key="FloatingHintClippingGridConverter" />
+      <converters:FirstNonNullConverter x:Key="FirstNonNullConverter" />
     </Style.Resources>
     <Setter Property="wpf:BehaviorsAssist.Behaviors">
       <Setter.Value>
@@ -212,7 +213,7 @@
                           <Binding Source="{StaticResource NoContentFloatingScale}" />
                         </MultiBinding>
                       </ContentControl.RenderTransform>
-                      <Grid x:Name="HintBackgroundGrid" Background="{TemplateBinding wpf:HintAssist.Background}" IsHitTestVisible="False">
+                      <Grid x:Name="HintBackgroundGrid" Tag="{DynamicResource MaterialDesign.Brush.Background}" IsHitTestVisible="False">
                         <ContentControl Content="{TemplateBinding Hint}" IsTabStop="False">
                           <ContentControl.Margin>
                             <MultiBinding Converter="{StaticResource FloatingHintContainerMarginConverter}">
@@ -227,6 +228,18 @@
                   </Canvas>
                 </Grid>
               </Grid>
+              <ControlTemplate.Triggers>
+                <Trigger Property="IsHintInFloatingPosition" Value="True">
+                  <Setter TargetName="HintBackgroundGrid" Property="Background">
+                    <Setter.Value>
+                      <MultiBinding Converter="{StaticResource FirstNonNullConverter}">
+                        <Binding Path="(wpf:HintAssist.HintPaddingBrush)" RelativeSource="{RelativeSource TemplatedParent}" />
+                        <Binding Path="Tag" ElementName="HintBackgroundGrid" />
+                      </MultiBinding>
+                    </Setter.Value>
+                  </Setter>
+                </Trigger>
+              </ControlTemplate.Triggers>
             </ControlTemplate>
           </Setter.Value>
         </Setter>
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TextBox.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TextBox.xaml
@@ -211,7 +211,8 @@
                                  UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
                                  FloatingTarget="{Binding ElementName=PART_ContentHost}"
                                  HintHost="{Binding RelativeSource={RelativeSource TemplatedParent}}"
-                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}">
+                                 wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                                 wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}">
                     <wpf:SmartHint.InitialHorizontalOffset>
                       <MultiBinding Converter="{StaticResource FloatingHintInitialHorizontalOffsetConverter}">
                         <Binding ElementName="PrefixTextBlock" Path="ActualWidth" />
@@ -385,14 +386,6 @@
               <Setter TargetName="Hint" Property="FloatingMargin" Value="4,0" />
               <Setter TargetName="Hint" Property="InitialVerticalOffset" Value="{Binding ElementName=Hint, Path=ActualHeight, Converter={StaticResource DivisionConverter}, ConverterParameter=2}" />
             </Trigger>
-            <MultiTrigger>
-              <MultiTrigger.Conditions>
-                <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
-                <Condition Property="wpf:HintAssist.IsFloating" Value="True" />
-                <Condition SourceName="Hint" Property="IsHintInFloatingPosition" Value="True" />
-              </MultiTrigger.Conditions>
-              <Setter TargetName="Hint" Property="wpf:HintAssist.Background" Value="{DynamicResource MaterialDesign.Brush.Background}" />
-            </MultiTrigger>
 
             <!-- IsEnabled -->
             <MultiTrigger>
diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml
@@ -72,6 +72,7 @@
                                    wpf:HintAssist.FontFamily="{TemplateBinding wpf:HintAssist.FontFamily}"
                                    wpf:HintAssist.Foreground="{TemplateBinding wpf:HintAssist.Foreground}"
                                    wpf:HintAssist.Background="{TemplateBinding wpf:HintAssist.Background}"
+                                   wpf:HintAssist.HintPaddingBrush="{TemplateBinding wpf:HintAssist.HintPaddingBrush}"
                                    wpf:HintAssist.HelperTextStyle="{TemplateBinding wpf:HintAssist.HelperTextStyle}"
                                    wpf:HintAssist.Hint="{TemplateBinding wpf:HintAssist.Hint}"
                                    wpf:HintAssist.HintOpacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
diff --git a/tests/MaterialDesignThemes.UITests/WPF/DatePickers/DatePickerTests.cs b/tests/MaterialDesignThemes.UITests/WPF/DatePickers/DatePickerTests.cs
@@ -253,11 +253,10 @@ public async Task DatePicker_WithOutlinedStyleAndNoCustomHintBackgroundSet_Shoul
         var datePickerTextBox = await datePicker.GetElement<DatePickerTextBox>("/DatePickerTextBox");
         var hintBackgroundGrid = await datePicker.GetElement<Grid>("HintBackgroundGrid");
 
-        var defaultBackground = Colors.Transparent;
         var defaultFloatedBackground = await GetThemeColor("MaterialDesign.Brush.Background");
 
         // Assert (unfocused state)
-        Assert.Equal(defaultBackground, await hintBackgroundGrid.GetBackgroundColor());
+        Assert.Null(await hintBackgroundGrid.GetBackgroundColor());
 
         // Act
         await datePickerTextBox.MoveKeyboardFocus();
diff --git a/tests/MaterialDesignThemes.UITests/WPF/TimePickers/TimePickerTests.cs b/tests/MaterialDesignThemes.UITests/WPF/TimePickers/TimePickerTests.cs
@@ -560,11 +560,10 @@ public async Task TimePicker_WithOutlinedStyleAndNoCustomHintBackgroundSet_Shoul
         var timePickerTextBox = await timePicker.GetElement<TimePickerTextBox>("/TimePickerTextBox");
         var hintBackgroundGrid = await timePicker.GetElement<Grid>("HintBackgroundGrid");
 
-        var defaultBackground = Colors.Transparent;
         var defaultFloatedBackground = await GetThemeColor("MaterialDesign.Brush.Background");
 
         // Assert (unfocused state)
-        Assert.Equal(defaultBackground, await hintBackgroundGrid.GetBackgroundColor());
+        Assert.Null(await hintBackgroundGrid.GetBackgroundColor());
 
         // Act
         await timePickerTextBox.MoveKeyboardFocus();
