Style on RadMaskedNumericInput Control

[Sajid]

Hey,

I know its a bit hasty, what i wanted to apply custom style on RadMaskedNumericInput Control and it just not working for me.
I'm not good at styling but the peice of code given below worked for my default .NET textbox. But when i apply it to RadTextbox it froze the input area, although applies the facny rounded corner and color.

Please tell me what am i doing wrong here.

 

 

<Style x:Key="TextBox" TargetType="{x:Type my:BaseNumericBox}">

 

 

<Setter Property="SnapsToDevicePixels"

 

Value="True" />

 

 

<Setter Property="OverridesDefaultStyle"

 

Value="True" />

 

 

<Setter Property="KeyboardNavigation.TabNavigation"

 

Value="none" />

 

 

<Setter Property="FocusVisualStyle"

 

Value="{x:Null}" />

 

 

<Setter Property="MinWidth"

 

Value="120" />

 

 

<Setter Property="MinHeight"

 

Value="20" />

　

 

 

<Setter Property="AllowDrop"

 

Value="true" />

　

 

 

<Setter Property="Template">

 

 

<Setter.Value>

 

 

<ControlTemplate TargetType="{x:Type my:BaseNumericBox}">

 

 

<Grid>

 

 

<Border Name="Border"

 

CornerRadius="2"

 

Padding="2"

 

BorderThickness="1">

 

 

<Border.Background>

 

 

<SolidColorBrush Color="{DynamicResource TextBoxControlLightColor}" />

 

 

</Border.Background>

 

 

<Border.BorderBrush>

 

 

<SolidColorBrush Color="{DynamicResource TextBoxBorderMediumColor}" />

 

 

</Border.BorderBrush>

 

 

<VisualStateManager.VisualStateGroups>

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

<VisualState x:Name="Disabled">

 

 

<Storyboard>

 

 

<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"

 

Storyboard.TargetProperty="(Panel.Background).

(SolidColorBrush.Color)">

 

 

<EasingColorKeyFrame KeyTime="0"

 

Value="{DynamicResource TextBoxDisabledControlLightColor}" />

 

 

</ColorAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</VisualState>

 

 

<VisualState x:Name="Normal">

 

 

<Storyboard>

 

 

<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"

 

Storyboard.TargetProperty="(Panel.Background).

(SolidColorBrush.Color)">

 

 

<EasingColorKeyFrame KeyTime="0"

 

Value="{DynamicResource TextBoxControlLightColor}" />

 

 

</ColorAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</VisualState>

 

 

<VisualState x:Name="ReadOnly">

 

 

<Storyboard>

 

 

<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"

 

Storyboard.TargetProperty="(Panel.Background).

(SolidColorBrush.Color)">

 

 

<EasingColorKeyFrame KeyTime="0"

 

Value="{DynamicResource TextBoxDisabledControlDarkColor}" />

 

 

</ColorAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</VisualState>

　

 

 

<VisualState x:Name="MouseOver" />

 

 

</VisualStateGroup>

 

 

</VisualStateManager.VisualStateGroups>

 

 

<ScrollViewer Margin="0"

 

x:Name="PART_ContentHost" />

 

 

</Border>

 

 

</Grid>

 

 

<ControlTemplate.Triggers>

 

 

<MultiTrigger>

 

 

<MultiTrigger.Conditions>

 

 

<Condition Property="IsFocused" Value="False"></Condition>

 

 

<Condition Property="Text" Value=""></Condition>

 

 

</MultiTrigger.Conditions>

 

 

<MultiTrigger.Setters>

 

 

</MultiTrigger.Setters>

 

 

</MultiTrigger>

 

 

<Trigger Property="IsFocused" Value="True">

 

 

<!--<Setter Property="BorderThickness" TargetName="BorderBase" Value="2.4,2.4,1,1"></Setter>-->

 

 

</Trigger>

 

 

<Trigger Property="IsEnabled" Value="False">

 

 

<Setter Property="Foreground" Value="DimGray" />

 

 

<!--<Setter Property="FontStyle" Value="Italic" />-->

 

 

</Trigger>

 

 

</ControlTemplate.Triggers>

 

 

</ControlTemplate>

 

 

</Setter.Value>

 

 

</Setter>

　

　

 

 

</Style>

[Tina Stancheva]

Hi Sajid,

In order to modify the default style of the RadMaskedNumericInputControl you'll have to edit its default ControlTemplate. You can find more info here. Also, please keep in mind that you'll have to keep the required elements of the template like the DisplayText and Content elements as they represent the content  of the MaskedNumericInput and in order to properly function, the control needs them.

I attached a sample project where I slightly modified the ControlTemplate of the RadMaskedNumericInput using the sample style you sent. Let me know if it helps.

Greetings,
Tina Stancheva
the Telerik team