Home > Back-end >  How to change the label background when using the OutlinedTextBox style?
How to change the label background when using the OutlinedTextBox style?

Time:04-12

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 with outlined style in floating state displaying a blue border and a hint on the top left with a grey background and blue text spelling "Enter username".

<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}"
          />

CodePudding user response:

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 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 Hint in non-floating state without background on the left and in floating state with red background on the right.

  • Related