Validation Style

[Simon]

Hello,

I'm glad to see that Telerik have implemented validation supports for most of their controls.  However, I wonder why Telerik didn't use same validation style as Silverlight?

In the same form, my Silverlight control validation are displayed with one style, and the Telerik control are displayed with an other style.

Is there an easy way to fix this without editing each control individually?

Regards,

Simon

[Tina Stancheva]

Hi Simon,

Please accept my apology for the delayed response.

The ValidationTooltip style is designed to match the Telerik built-in themes and not the Silverlight default style. However, we see your point in wanting to apply the same validation styles throughout your application and this is why we are currently working on a MS-like theme that will allow you to style the Telerik controls as the MS controls thus achieving more consistent look in your projects.

In the meantime, if you are using the default Office_Black theme of the RadControls, you can 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.

I hope this information will help you. Please let us know if we can further assist you.

Regards,
Tina Stancheva
the Telerik team

[Simon]

Hello Tina,

I tried to implement your solution but unfortunately, there's an error on the following line of code saying the System:Boolean was not found (or that an assembly reference is missing):

 

 

 

 

<System:Boolean>true</System:Boolean>

Simon

[Tina Stancheva]

Hello Simon,

Can you please make sure that you have added alias to the system namespace in your xaml page:
xmlns:System="clr-namespace:System;assembly=mscorlib"
I attached a sample project where the custom validation style is used. I hope it helps you.

Regards,
Tina Stancheva
the Telerik team