Change Hint Background on TimePicker with Version 4.7.1

[N0m4n904]

Does anyone know how I would set the Background Color of the Hint of the TextBox of the TimePicker Control?

Looking at the code HintAssist.Background does not work.

I tried setting MaterialDesignPaper and MaterialDesignDarkBackground to the color I want, but that doesn't work either.

The code I currently have for the TimePicker is this:

<materialDesign:TimePicker
      Grid.Row="4"
      Grid.Column="0"
      MaxWidth="320"
      FontFamily="Calibri"
      FontWeight="Bold"
      FontSize="12"
      SelectedTime="{Binding SelectedTimeNight}"
      Margin="10,10,10,0"
      Foreground="{StaticResource FontColor}"
      materialDesign:HintAssist.Foreground="{StaticResource FontColor}"
      materialDesign:HintAssist.Hint="{Binding NightShiftText, FallbackValue={StaticResource NightShift}}"
      Is24Hours="True"
      Text="{Binding NightShift, UpdateSourceTrigger=PropertyChanged}"
      Style="{StaticResource MaterialDesignOutlinedTimePicker}" />

And it results in this:

The Background of the Assist is clearly set to a value, but I can't find a way to change it.
If I pick the Color using Gimp I get #303030 as the value. When I check the code where this Color is used I get two obsolete colors.

[nicolaihenriksen]

@N0m4n904 I would assume the intention was for HintAssist.Background to do exactly that, but as you correctly point out, that does not work.

I believe the root cause is that the HintAssist.Background is not correctly pushed down onto the TextBox in the time picker along all the other HintAssist properties (see here). Since these are not "inheritable" attached properties, they need to be explicitly passed down.

As mentioned, I believe this is a bug, and you probably don't have any great workarounds currently apart from hijacking the styles and making the changes there (which may not even be trivial in this case). Would you mind adding this as an issue, then we can get it fixed. If you feel comfortable doing so, you could even add a PR with the fix.

[N0m4n904]

Hi @nicolaihenriksen
how would I hijack the styles? Like I said, I tried to overwrite the colors already, but it doesn't seem to work.
How would I hijack the styles to get the changes instead of waiting for a new release which won't work with .net5.0 anymore.

[nicolaihenriksen]

@N0m4n904 Something along these lines will get you closer I suspect:

<materialDesign:TimePicker ...>
  <materialDesign:TimePicker.Resources>
    <SolidColorBrush x:Key="MaterialDesignPaper">Fuchsia</SolidColorBrush>
    <Style x:Key="MaterialDesignTimePickerTextBox" TargetType="{x:Type materialDesign:TimePickerTextBox}" BasedOn="{StaticResource MaterialDesignTimePickerTextBox}">
      <Setter Property="materialDesign:HintAssist.Background" Value="{DynamicResource MaterialDesignPaper}" />
    </Style>
  </materialDesign:TimePicker.Resources>
</materialDesign:TimePicker>

This hijacks the style for the MaterialDesignTimePickerTextBox, but the HintAssist.Background only kicks in when the hint is not elevated. And thus in order to also change the color when the hint is elevated, we also hijack the MaterialDesignPaper brush and override it to whatever you want. Not an ideal solution, but you may be able to work with a variation of this to solve your issue?

It probably also affects the popup since it resides lower in the visual tree, so you may need to tweak further to avoid that. Again, probably not a trivial thing...

[N0m4n904]

Thanks for the quick answer. I will give it a shot.

[nicolaihenriksen]

@N0m4n904
I just tested and it did affect the Popup. However, moving the brush under the style like below seems to solve that issue.

<Style x:Key="MaterialDesignTimePickerTextBox" TargetType="{x:Type materialDesign:TimePickerTextBox}" BasedOn="{StaticResource MaterialDesignTimePickerTextBox}">
  <Style.Resources>
    <SolidColorBrush x:Key="MaterialDesignPaper">Fuchsia</SolidColorBrush>
  </Style.Resources>
  <Setter Property="materialDesign:HintAssist.Background" Value="{DynamicResource MaterialDesignPaper}" />
</Style>
</materialDesign:TimePicker.Resources>

[N0m4n904]

This fixed it. Thank you very much. I will open an issue about this now, so you guys can fix it