Change BorderBrush for RadMaskedDateTimeInput on Hover

[Mohammed]

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

 

 

[Stenly]

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">
		<Setter.Value>
		    <!--Add extracted style-->
		</Setter.Value>
	</Setter>
</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">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyCustomSolidColorBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0" Storyboard.TargetName="ClearButton" Storyboard.TargetProperty="Opacity" To="1"/>
    </Storyboard>
</VisualState>

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?

Regards,
Stenly
Progress Telerik