Change BorderBrush for RadMaskedDateTimeInput on Hover

1 Answer 24 Views
MaskedInput (Numeric, DateTime, Text, Currency) Styling
Top achievements
Rank 1
Mohammed asked on 01 Dec 2021, 11:46 AM

I'm using Implicit Styles with the NoXaml dlls (Office_Black) theme to change the look of the RadMaskedDateTimeInput. 

I'd like to know how to set the BorderBrush of the control when hovering the mouse.


Thank you



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 03 Dec 2021, 12:42 PM

Hello Mohammed,

To change the BorderBrush property of the RadMaskedDateTimeInput control on mouse hover, extract the control template present in the Template property of the style with x:Key="RadMaskedInputBaseStyle". After that, create a new style that targets the RadMasketInputBase element, and set the Template property to the extracted control template.

<Style x:Key="customstyle" TargetType="telerik:RadMaskedInputBase" BasedOn="{StaticResource RadMaskedInputBaseStyle}">
    <Setter Property="Template">
		    <!--Add extracted style-->

In this template, change the Value of the DiscreteObjectKeyFrame present in the VisualState with x:Name="MouseOver" to the desired color.

<VisualState x:Name="MouseOver">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyCustomSolidColorBrush}"/>
        <DoubleAnimation Duration="0" Storyboard.TargetName="ClearButton" Storyboard.TargetProperty="Opacity" To="1"/>

Then, create an additional style targeting the RadMaskedDateTimeInput and base it onto the custom style, which holds the modified control template.

<Style TargetType="telerik:RadMaskedDateTimeInput" BasedOn="{StaticResource customstyle}"/>

With that said, I have prepared a sample project for you to test, so, could you give it a try?

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

MaskedInput (Numeric, DateTime, Text, Currency) Styling
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question