Set Background color when focused

[Hans]

Hi,

I have this very simple style for my RadMaskedNumericInput control

<Style TargetType="telerik:RadMaskedNumericInput">
    <Setter Property="SelectionOnFocus" Value="SelectAll"/>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="Yellow"/>
        </Trigger>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="Background" Value="Gray"/>
        </Trigger>
    </Style.Triggers>
</Style>

 

Everything works fine except when the control receives focus, the background color does not change (remains green).  How come ?

Kind Regards,
Hans

[Dinko | Tech Support Engineer]

Hello Hans,

Thank you for the provided code snippet.

Internally in the template, the Background property is set when the control is focused, which has a higher priority than the implicit style. You could change the background property of the control in the code. You can subscribe to the GotFocus and LostFocus events. In the event handlers, you can change this property.

private void MaskedEdit_GotFocus(object sender, System.Windows.RoutedEventArgs e)
{
    var mask = sender as RadMaskedNumericInput;
    mask.Background = System.Windows.Media.Brushes.Yellow;
}

private void MaskedEdit_LostFocus(object sender, System.Windows.RoutedEventArgs e)
{
    var mask = sender as RadMaskedNumericInput;
    mask.Background = System.Windows.Media.Brushes.White;
}

Regards,
Dinko
Progress Telerik

[Hans]

Hi Dinko,

thanks for the information.  The provided solution works fine but I was hoping to find a solution that sets the background color throughout my complete solution (reason why I wanted to use a style).  Any ideas ? 

Regards,
Hans

[Dinko | Tech Support Engineer]

Hello Hans,

Another approach will be to extract and edit the default template of the control. May I ask you to confirm that you are using the default theme? If not, can you share which one are you merging in your application so that I can try to make this modification for you?

Regards,
Dinko
Progress Telerik

[Hans]

Hello Dinko,

we're using the Office2016 theme for all input controls.  A sample project would be much appreciated !

Regards,
Hans

[Dinko | Tech Support Engineer]

Hello Hans,

Thank you for your confirmation.

While modifying the default template, I came across the IsKeyboardFocusWithin property. I have tried to replace the IsFocused with this one and the Background is changed when the control is focused. Can you try this property on your side and let me know how it goes.

<Style TargetType="telerik:RadMaskedNumericInput" BasedOn="{StaticResource RadMaskedNumericInputStyle}">
    <Setter Property="SelectionOnFocus" Value="SelectAll"/>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <Setter Property="Background" Value="Yellow"/>
        </Trigger>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="Background" Value="Gray"/>
        </Trigger>
    </Style.Triggers>
</Style>

Regards,
Dinko
Progress Telerik

[Les]

Hi Guys,

   The IsKeyBoardFocusWithin property trigger works, but if I enter a number and tab out of the field, the value is not displayed unless and until I click on the textbox again. Is there a workaround for that?

Here's my XAML:

         <Style x:Key="InputField" TargetType="telerik:RadMaskedNumericInput" >
<Setter Property="Control.Height" Value="30" />
<Setter Property="Control.Width"  Value="110" />
<Setter Property="Control.Margin" Value="10 0 0 0" />
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Control.Background" Value="Blue"/>
<Setter Property="Control.Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>

Thanks,

Les

[Stenly]

Hello Les,

I have provided an answer to the ticket that you have opened regarding this question. I will also share here why this is caused.

This is present due to a VisualState in the default control template for the control for the Office_Blue theme, which in conjunction with this Trigger causes the Foreground property of an element inside the template to become Transparent when the control loses focus.

To prevent this from occurring while keeping the custom Trigger, the default template could be extracted from the Office_Blue theme and this VisualState (which has an x:Name="NotFocused") could be omitted. Then, the modified template could be applied to the control either via a Style or by directly setting it to its Template property.

[Hans]

Hi Dinko,

Perfect !  This does not only work for the RadMaskedNumericInput but for al other Rad controls as well !

Regards,
Hans