Unable to Add Dark Background Color on Hover and Click for RadPasswordBox with Windows 11 Theme and NoXAML DLL

[Anas]

Hi,

I'm working with the Telerik RadPasswordBox and I'm currently using the Windows 11 theme along with the NoXAML DLL in a WPF project. However, I am unable to apply a dark background color to the RadPasswordBox when it's hovered over or clicked.

Here’s what I’m trying to achieve:

• Hover Effect: When the user hovers over the RadPasswordBox, I want the background to change to a dark color.
• Click Effect: Similarly, when the RadPasswordBox is clicked, the background should remain dark until the focus is lost.

I have tried setting the Background property in the relevant triggers, but it does not seem to work as expected. Could anyone provide guidance or a solution on how to implement this with the Windows 11 theme and NoXAML DLL?

Thank you for your help!
below is my code

 <telerik:RadPasswordBox
     x:Name="ClientIdTextBox"
     Grid.Column="1"
     Width="600"
     BorderThickness="0"
     FontSize="20"
     Foreground="#A7A3DC"
     Style="{StaticResource CustomPasswordBoxStyle}"
     WatermarkContent="ClientID">
     <telerik:RadPasswordBox.WatermarkTemplate>
         <DataTemplate>
             <TextBlock
                 Foreground="#A7A3DC"
                 Opacity="0.7"
                 Text="{Binding}" />
         </DataTemplate>
     </telerik:RadPasswordBox.WatermarkTemplate>
 </telerik:RadPasswordBox>
  <Style x:Key="CustomPasswordBoxStyle" TargetType="telerik:RadPasswordBox">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="Foreground" Value="#A7A3DC" />
      <Setter Property="FontSize" Value="20" />
      <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Background" Value="#080812" />
          </Trigger>
          <Trigger Property="IsFocused" Value="True">
              <Setter Property="Background" Value="#080812" />
          </Trigger>
      </Style.Triggers>
  </Style>

 

[Stenly]

Hello Anas,

For the mouse hover effect, the RadPasswordBox component uses the MouseOverBackgroundBrush attached property of the ThemeHelper class when the Windows 11 theme is applied.

In order to change it, add a new Setter to the Style that you shared for the ThemeHelper.MouseOverBackgroundBrush property and set it to the desired value:

<!--xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"-->

<Style TargetType="telerik:RadPasswordBox" BasedOn="{StaticResource RadPasswordBoxStyle}">
    <Setter Property="helpers:ThemeHelper.MouseOverBackgroundBrush" Value="DarkGray"/>
</Style>

For the focus effect (click effect), the default Style of the control utilizes the FocusBackgroundBrush property of the ThemeHelper class.

To achieve this part of the requirement, set the mentioned property to the desired value:

<Style TargetType="telerik:RadPasswordBox" BasedOn="{StaticResource RadPasswordBoxStyle}">
    <Setter Property="helpers:ThemeHelper.MouseOverBackgroundBrush" Value="DarkGray"/>
    <Setter Property="helpers:ThemeHelper.FocusBackgroundBrush" Value="DarkOrange"/>
</Style>

With this being said, could you give these suggestions a try?

Regards,
Stenly
Progress Telerik