RadMaskedTextInput Default Validation.ErrorTemplate

[Jamie]

Hi

I'm currently using a MaskedTextInput control and have noticed that the default error template used to display validation errors is different to that used by other controls on my form (TextBox, RadCombo, RadDatePicker etc).

I'm using the StyleManager to apply the Windows7 theme to all the controls...

I don't want to create a custom template and apply this to the MaskedTextInput as described in other posts, I simply want to use the same standard error template (Windows7 theme) that the other controls all seem to use so that my UI is consistent...

Please can you suggest how this may be achieved?

Thanks

Jamie

[Evgenia]

Hello Jamie,

Indeed inconsistent Validation templates in our themes is an ongoing task of ours. 
The ValidationTooltip style is designed to match the Telerik built-in themes and not the WPF default style for some of the controls like RadDateTimePicker for example. However, we see your point in wanting to apply the same validation styles throughout your application.
Till we fix the problem on our side I suggest that you override the default style of the Telerik ValidationTooltip by defining an implicit style for the control as demonstrated bellow:

<ControlTemplate x:Key="ErrorTooltipTemplate" TargetType="ToolTip">
    <Grid x:Name="RootVisual"
            Margin="5 0"
            Opacity="0"
            RenderTransformOrigin="0 0">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="xform" X="-25" />
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OpenStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0" />
                    <VisualTransition GeneratedDuration="0:0:0.2" To="Open">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.2"
                                                Storyboard.TargetName="xform"
                                                Storyboard.TargetProperty="X"
                                                To="0">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase Amplitude=".3" EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation Duration="0:0:0.2"
                                                Storyboard.TargetName="RootVisual"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1" />
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Closed">
                    <Storyboard>
                        <DoubleAnimation Duration="0"
                                            Storyboard.TargetName="RootVisual"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Open">
                    <Storyboard>
                        <DoubleAnimation Duration="0"
                                            Storyboard.TargetName="xform"
                                            Storyboard.TargetProperty="X"
                                            To="0" />
                        <DoubleAnimation Duration="0"
                                            Storyboard.TargetName="RootVisual"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter />
    </Grid>
</ControlTemplate>
<ControlTemplate x:Key="ValidationTooltipTemplate" TargetType="Telerik_Windows_Controls_Chromes:ValidationTooltip">
    <Grid x:Name="VisualRoot">
        <ToolTipService.ToolTip>
            <ToolTip x:Name="PART_ToolTip"
                        Placement="Right"
                        PlacementTarget="{TemplateBinding TooltipPlacementTarget}"
                        Template="{StaticResource ErrorTooltipTemplate}">
                <ToolTip.Triggers>
                    <EventTrigger RoutedEvent="Canvas.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ToolTip" Storyboard.TargetProperty="IsHitTestVisible">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <System:Boolean>true</System:Boolean>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ToolTip.Triggers>
                <ContentPresenter Content="{TemplateBinding TooltipContent}" ContentTemplate="{TemplateBinding TooltipContentTemplate}" />
            </ToolTip>
        </ToolTipService.ToolTip>
        <Border BorderBrush="#FFDB000C"
                BorderThickness="1"
                CornerRadius="1">
            <Grid Width="12"
                    Height="12"
                    Margin="1,-4,-4,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Background="Transparent">
                <Path Margin="1,3,0,0"
                        Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"
                        Fill="#FFDC000C" />
                <Path Margin="1,3,0,0"
                        Data="M 0,0 L2,0 L 8,6 L8,8"
                        Fill="#ffffff" />
            </Grid>

        </Border>

    </Grid>
</ControlTemplate>
<SolidColorBrush x:Key="ValidationTooltipForeground" Color="#FFFFFFFF" />
<DataTemplate x:Key="TooltipContentTemplate">
    <Grid Margin="5,0">
        <Border Margin="4,4,-4,-4"
                Background="#052A2E31"
                CornerRadius="5" />
        <Border Margin="3,3,-3,-3"
                Background="#152A2E31"
                CornerRadius="4" />
        <Border Margin="2,2,-2,-2"
                Background="#252A2E31"
                CornerRadius="3" />
        <Border Margin="1,1,-1,-1"
                Background="#352A2E31"
                CornerRadius="2" />

        <Border Background="#FFDC000C" CornerRadius="2" />
        <Border CornerRadius="2">
            <TextBlock MaxWidth="250"
                        Margin="8,4,8,4"
                        Foreground="White"
                        Text="{Binding [0].ErrorContent}"
                        TextWrapping="Wrap" />

        </Border>
    </Grid>
</DataTemplate>
<Style TargetType="Telerik_Windows_Controls_Chromes:ValidationTooltip">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template" Value="{StaticResource ValidationTooltipTemplate}" />
    <Setter Property="TooltipContentTemplate" Value="{StaticResource TooltipContentTemplate}" />
</Style>

This style matches the MS validation tooltip style and if you place it in the App.xaml file Resources it will be applied to all RadControls where the Telerik ValidationTooltip is used and for which no theme is applied.

Please accept our apologies for any inconvenience caused.

Regards,
Evgenia
Telerik

[Jamie]

Evgenia

I've just tried to implement this in my app.xaml as suggested but unfortunately the reference to Telerik_Windows_Controls_Chromes:ValidationTooltip doesn't resolve.

I've looked at the Telerik.Windows.Controls.Chromes Namespace and for WPF it only contains ButtonChrome and ShadowChrome. The validationTooltip is listed under the SIlverlight implementation of this dll however...

Please advise how I can implement this in wpf...

[Evgenia]

Hello Jamie,

Apologies for misleading you. ValidationTooltip template can be set via control template with TargetType telerikChromes:ValidationTooltip only in Silverlight. To be able to have data validation custom template in WPF you should use the attached property Validation.ErrorTemplate. I attached a sample that demonstrates this in action.

Hope it helps.

Regards,
Evgenia
Telerik