Validation Tooltip Clipped in Windows 11 theme ?

[Romain]

Hi,

I find this article about the Validation Tooltip being clipped when using the Material theme.

I'm experiencing the same issue with the Windows 11 theme. Is the Win11 theme not using the tooltip element either ?  The themes looks pretty close to each other so... is Win11 an extension of Material ? 

Thank you for your help.

 

[Vicky]

Hi Romain,

Currently, we provide 3 types of validation error templates:

• ValidationTooltipTemplate - shown as a tooltip when hovering a tiny triangle at the top right corner of the invalid element (e.g., the RadNumericUpDown)
• StaticValidationTooltipTemplate - always shown while the element is not valid
• StaticValidationOnFocusTooltipTemplate - shown only while the invalid element is focused

Only the first one has an actual ToolTip element, while the others feature a TextBlock instead for displaying the error content. The Windows 11 theme uses the last validation template. Material uses the second one. I would not qualify the Windows 11 theme as an extension of the Material theme.

However, in terms of validation and clipping issues that can occur based on the template type, there is the option to choose a more suitable validation template for your app design, which I suppose is the first one. As stated in the article, using the NoXaml dlls brings a direct access to the ValidationTooltipTemplate through the StaticResource keyword. Assigning it to the Validation.ErrorTemplate property of the respective components will result to the error content displayed as a tooltip.

We are also in the process of creating a mechanism for switching the above-listed validation templates.

I hope you find the above information useful and if there is anything else we can help you with, you would not hesitate to contact us again.

Best Regards,
Vicky
Progress Telerik

[Romain]

thank you very much for your feedback. 

Is there a way to set the Validation.ErrorTemplate globally for the project, so all Telerik control that supports it are updated? 

[Vicky]

Hi,

The System.Windows.Controls.Validation.ErrorTemplate is an attached property, which requires an element to attach to.
I believe, the best approach in such scenario is to prepare a separate ResourceDictionary with Styles targeting the respective elements for which you need to apply the specified ErrorTemplate:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadWatermarkTextBox" BasedOn="{StaticResource RadWatermarkTextBoxStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadPasswordBox" BasedOn="{StaticResource RadPasswordBoxStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadDateTimePicker" BasedOn="{StaticResource RadDateTimePickerStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadAutoSuggestBox" BasedOn="{StaticResource RadAutoSuggestBoxStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadTimeSpanPicker" BasedOn="{StaticResource RadTimeSpanPickerStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadMaskedNumericInput" BasedOn="{StaticResource RadMaskedNumericInputStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadMaskedCurrencyInput" BasedOn="{StaticResource RadMaskedCurrencyInputStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadMaskedDateTimeInput" BasedOn="{StaticResource RadMaskedDateTimeInputStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadMaskedTextInput" BasedOn="{StaticResource RadMaskedTextInputStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadCalculatorPicker" BasedOn="{StaticResource RadCalculatorPickerStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadNumericUpDown" BasedOn="{StaticResource RadNumericUpDownStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
    <Style TargetType="telerik:RadAutoCompleteBox" BasedOn="{StaticResource RadAutoCompleteBoxStyle}">
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
    </Style>
</ResourceDictionary>

The above ResoruceDictionary is a sample one and includes all MS and Telerik input components. It should be merged on the highest level possible (App.xaml), or in the scope that you wish the elements to receive the respective error template. 

I hope you find the above information helpful. And please, do not hesitate to contact us again in case any further questions arise,

Best Regards,

Vicky
Progress Telerik

[Romain]

Thank you so much for your help. I started implementing similar approach, but your example covers all the controls we use.