How to change the label background when using the OutlinedTextBox style?

Question

I've encountered one problem while working with TextBox outlined style. I managed to change the font color in App.xaml, but I can't figure out how to change the text background when I click on the TextBox. Do you know what to do about it?

<TextBox  x:Name="txt_Username" 
          materialDesign:HintAssist.Hint="Enter username"
          Background="{x:Null}"
          Height="70"
          Width="300"
          FontFamily="Tolkien"
          BorderThickness="2"
          BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
          Style="{DynamicResource MaterialDesignOutlinedTextBox}"
          FontSize="22"
          Foreground="#FFEBE2E2" 
          Margin="0,-58,0,221" CaretBrush="{x:Null}" SelectionBrush="{x:Null}"
          />

Answer 1

If you want to set the hint background in both non-floating and floating state, use hint assist.

materialDesign:HintAssist.Background="Red"

Setting different backgrounds for non-floating and floating state is more difficult. Unfortunately, MaterialDesign does not expose a property to detect if the hint is currently floating or not. It is only available on the SmartHint element within the control template of the TextBox. Therefore, you cannot simply access it from outside and use a style trigger to change the background color.

If you want a definite solution, you have to copy the default styles (multiple, since the outlined style is based on others) from GitHub here for your version and adapt the MaterialDesignTextBoxBase.

• The trigger for the floating style is the MultiTrigger in line 360.

• The condition that determines the internal floating state is in line 364.

  <Condition SourceName="Hint" Property="IsHintInFloatingPosition" Value="True" />
  

• Adapt line 367 and set the brush that you want to apply for the floating state.

  <Setter Property="wpf:HintAssist.Background" Value="Red" />
  

The other derived style down to MaterialDesignOutlinedTextBox do not have to be adapted, but you need to copy them nevetheless to override them, otherwise they will be based on the original base styles.

---

There is a simple workaround for the moment. The brush in floating state is set to the MaterialDesignPaper brush, which is only used in this scenario, so overriding it locally changes the background color, but only if you did not set a background using hint assist. It will take precedence.

<TextBox x:Name="txt_Username" 
         ...>
   <TextBox.Resources>
      <SolidColorBrush x:Key="MaterialDesignPaper" Color="Red"/>
   </TextBox.Resources>
</TextBox>

Please be aware that the implementation might change and break this workaround in the future.