Show validation tooltip when control has focus

[Lukasz]

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.

 

[Evgenia]

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

[Lukasz]

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.

[Evgenia]

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

[Lukasz]

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

[Evgenia]

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