This is a migrated thread and some comments may be shown as answers.

RadMaskedTextInput Default Validation.ErrorTemplate

3 Answers 402 Views

MaskedInput (Numeric, DateTime, Text, Currency)

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 21 Jan 2014, 09:47 AM

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

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 31 Jan 2014, 12:08 PM

MaskedInput-DataAnnotations.zip

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