ErrorTemplate on RadMaskedNumericInput

[Inger Marie]

I am trying to replace RadMaskedTextBox with the appropriate RadMaskedInput-controls.

I now have a RadMaskedNumericInput like this:

<telerik:RadMaskedNumericInput x:Name="_numberOfPages" Margin="2" Grid.Column="4" Grid.Row="2"  MinWidth="60"
        VerticalAlignment="Center" HorizontalAlignment="Stretch"
        Mask="d" FormatString="D2" TextMode="MaskedText"
        AllowInvalidValues="False"
        MaskedInput:MaskedInputExtensions.Minimum="0"
        SelectionOnFocus="SelectAll"
        ErrorMessage="Invalid number of pages"
        Value="{Binding ProjectListItemViewModel.SettableNumberOfPages, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnExceptions=True, NotifyOnValidationError=True}"
        Style="{StaticResource RadMaskedNumericInputStyle}"                                               />

The RadMaskedNumericInputStyle looks like this:

<ControlTemplate TargetType="{x:Type Control}" x:Key="ValidationErrorTemplate">
        <DockPanel LastChildFill="true">
            <Border BorderBrush="{StaticResource ErrorBrush}" BorderThickness="3" Panel.ZIndex="999"
                    Background="White" DockPanel.Dock="right" Margin="-8,0,0,0" Width="16" Height="16" CornerRadius="10"
                    ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                <Rectangle Fill="{StaticResource ErrorBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="3"
                        RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="315" />
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Border>

            <AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center">
                <Border BorderBrush="{StaticResource ErrorBrush}" BorderThickness="1" />
            </AdornedElementPlaceholder>
        </DockPanel>
    </ControlTemplate>


    <Style TargetType="{x:Type Controls:RadMaskedNumericInput}" x:Key="RadMaskedNumericInputStyle">
        <Setter Property="FontFamily" Value="Calibri" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="SelectionOnFocus" Value="CaretToEnd" />
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationErrorTemplate}" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
       <Style.Triggers>...</Style.Triggers>
    </Style>

My problem is that the original red X is still there if I put my mouse over - even if it is a valid input (see attachment).
What I want is the red border and the red sign on the border. What I do not want (ever) is the red sign with the cross in it.

Can you help me? Thx

[Pavel R. Pavlov]

Hello Inger,

Thank you for providing us with detailed information about your scenario. The red circle with an "x" in it is the clear button the control. If you press it the control will set its Value to null. You can control its Visibility using the IsClearButtonVisible property of the control.

I hope this information will help.

Regards,
Pavel R. Pavlov
Telerik

[Inger Marie]

Duh.. thanks.
The red color kind of threw me off. In my program I use red to signal errors or problems. My own clear-content buttons are black X on a transparent background.

But thanks, problem solved.