This is a migrated thread and some comments may be shown as answers.

Set Background color when focused

6 Answers 48 Views
MaskedInput (Numeric, DateTime, Text, Currency)
This is a migrated thread and some comments may be shown as answers.
Hans
Top achievements
Rank 1
Veteran
Hans asked on 22 Dec 2020, 03:41 PM

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

6 Answers, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 25 Dec 2020, 01:09 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products, quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hans
Top achievements
Rank 1
Veteran
answered on 04 Jan 2021, 08:26 AM

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

0
Dinko
Telerik team
answered on 05 Jan 2021, 08:41 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hans
Top achievements
Rank 1
Veteran
answered on 06 Jan 2021, 07:15 AM

Hello Dinko,

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

Regards,
Hans

0
Dinko
Telerik team
answered on 08 Jan 2021, 11:55 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hans
Top achievements
Rank 1
Veteran
answered on 11 Jan 2021, 08:50 AM

Hi Dinko,

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

Regards,
Hans

Tags
MaskedInput (Numeric, DateTime, Text, Currency)
Asked by
Hans
Top achievements
Rank 1
Veteran
Answers by
Dinko
Telerik team
Hans
Top achievements
Rank 1
Veteran
Share this question
or