Show validation tooltip when control has focus

6 posts, 0 answers
  1. Lukasz
    Lukasz avatar
    25 posts
    Member since:
    Aug 2014

    Posted 22 Mar Link to this post

    Hi,

    Is it possible to show validation tooltip when control has focus in Windows8 theme just like it is in Windows8Touch theme?

    It is hard for my users to know that they have to hover over this very small triangle for more information about validation error.

     

  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 24 Mar Link to this post

    Hello Lukasz,

    You can have the Validation Tooltip shown on focus the way you required but for the purpose you'll have to modify its default control template. To apply the new template please use the Validation.ErrorTemplate property. You can do this either in style setter or by setting it to the control itself. For example:

        <Style x:Key="RadWatermarkTextBoxStyle" TargetType="telerik1:RadWatermarkTextBox">
            <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
     ....
    </Style>

    The difference in the two ValidationTooltip templates in Windows8 and Windows8Touch themes is that in the first one we use Tooltip to show the ErrorContent and in Windows8Touch theme we have placed it as Content of a Label. 
    I'm providing the modified version of ValidationTooltipTemplate for Windows8 theme for your easiness:

    <ControlTemplate x:Key="ValidationTooltipTemplate">
          <StackPanel Orientation="Horizontal">
              <Grid SnapsToDevicePixels="True">
                  <AdornedElementPlaceholder x:Name="Holder"/>
                  <Border BorderBrush="{telerik:Windows8Resource ResourceKey=ValidationBrush}" BorderThickness="1"/>
              </Grid>
              <Grid MinHeight="36" Margin="2 0" SnapsToDevicePixels="True">
                  <Grid>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition/>
                          <ColumnDefinition/>
                      </Grid.ColumnDefinitions>
                      <Path
                              Width="5"
                              Height="8"
                              Margin="0 0 -1 0"
                              Data="M4,0 L0,4 4,8Z"
                              Stretch="None"
                              StrokeThickness="0"
                              Fill="{telerik:Windows8Resource ResourceKey=ValidationBrush}"
                              HorizontalAlignment="Left"
                              VerticalAlignment="Top"/>
                      <Border
                              Background="{telerik:Windows8Resource ResourceKey=ValidationBrush}"
                              BorderBrush="{telerik:Windows8Resource ResourceKey=ValidationBrush}"
                              BorderThickness="1"
                              Grid.Column="1"
                              Padding="1">
                          <Label
                                  Foreground="{telerik:Windows8Resource ResourceKey=MainBrush}"
                                  FontSize="{telerik:Windows8Resource ResourceKey=FontSize}"
                                  FontFamily="{telerik:Windows8Resource ResourceKey=FontFamily}"
                                  Content="{Binding ElementName=Holder, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}"/>
                      </Border>
                  </Grid>
              </Grid>
          </StackPanel>
      </ControlTemplate>

    Feel free to customize it per your own needs.

    Regards,
    Evgenia
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Lukasz
    Lukasz avatar
    25 posts
    Member since:
    Aug 2014

    Posted 27 Mar in reply to Evgenia Link to this post

    Thanks very much. Your example does not hide error message when control loses focus, use of stackpanel gives problems when error text font has bigger height than adorned control, but it give me a direction and I try to improve it myself.
  4. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 28 Mar Link to this post

    Hi Lukasz,

    Indeed the Error Message stays open even when the control doesn't have the focus no more and this is intended. Let's say for example that you want to create a Form where there are several Input controls with different Validation in each. We would like each of them to keep showing its Error Message when the input is invalid so that you don't get surprised that nothing happens by clicking a Submit button for example. Similar visual appearance is applicable for Web Forms for example.

    Let me know if you need any further assistance with any of the mentioned changes you'd like to do.

    Regards,
    Evgenia
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Lukasz
    Lukasz avatar
    25 posts
    Member since:
    Aug 2014

    Posted 28 Mar in reply to Evgenia Link to this post

    Hi Evgenia,

    I managed to fix visual apperance but still have problems with layout.

    Do you have any examples where error message is displayed in adorner layer? Having it normal visual tree causes error messages to be partially hidden behind other controls or when there is no more room on the right side in usercontrol container.

    Regards,
    Łukasz

  6. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 31 Mar Link to this post

    Hi Lukasz,

    I prepared a small sample based on your last post - -the Error Content of the Adorned Element now appears inside the control itself by wrapping it inside the AdornedElementPlaceholder. I also limited the Error Message to be visible in 2 sec via Animation (the control still shows that it has invalid content but with red border around it after the end of those 2 sec). Let me know how this works for you and feel free to modify it per your on needs:

    <Window.Resources>
        <Storyboard x:Key="AnimateValidation">
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" 
                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
     
        <ControlTemplate x:Key="ValidationTooltipTemplate">
            <StackPanel Orientation="Vertical">
                <Border BorderBrush="Red" BorderThickness="1">
                    <AdornedElementPlaceholder Name="myControl">
     
                        <TextBlock Foreground="White" Background="Red" 
                                           Text="{Binding ElementName=myControl
                                           Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                            <TextBlock.Triggers>
                                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                    <BeginStoryboard Storyboard="{StaticResource AnimateValidation}" />
                                </EventTrigger>
                            </TextBlock.Triggers>
                        </TextBlock>
                    </AdornedElementPlaceholder>
                </Border>
            </StackPanel>
        </ControlTemplate>
     
    </Window.Resources>
     
    <StackPanel>
        <telerik:Label Content="Enter any number: " Margin="2" />
        <telerik:RadMaskedTextInput Mask="####" Height="50" Margin="2" EmptyContent="Masked Input"
                                    Validation.ErrorTemplate="{StaticResource ValidationTooltipTemplate}"
                                    ErrorMessage="{Binding Text, ElementName=customErrorMessage}"
                                    Value="{Binding MyValue, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" >
        </telerik:RadMaskedTextInput>
    </StackPanel>


    Regards,
    Evgenia
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top