RadMaskedTextInput Default Validation.ErrorTemplate

4 posts, 0 answers
  1. Jamie
    Jamie avatar
    3 posts
    Member since:
    Nov 2013

    Posted 16 Jan 2014 Link to this post

    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
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 21 Jan 2014 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Jamie
    Jamie avatar
    3 posts
    Member since:
    Nov 2013

    Posted 28 Jan 2014 in reply to Evgenia Link to this post

    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...
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 31 Jan 2014 Link to this post

    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
    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 >>
Back to Top