Validation Style

4 posts, 0 answers
  1. Simon
    Simon avatar
    159 posts
    Member since:
    Sep 2010

    Posted 18 May 2011 Link to this post

    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
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 25 May 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Simon
    Simon avatar
    159 posts
    Member since:
    Sep 2010

    Posted 07 Jun 2011 Link to this post

    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

  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 08 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top