Layout bounding box of MaterialDesignFloatingHintTextBox does not include validation text or helper text

[jbooth88]

Bug explanation

The validation error text on the MaterialDesignFloatingHintTextBox (possibly other styles as well, not tested) renders outside of the textbox layout bounding box, causing issues where other controls get overlapped when validation errors are visible.

The HelperText attached property has a similar issue, although the background of the HelperText appears to be transparent, and I don't think the helper text is hit test visible, so although the issue is the same, the side effects are slightly different.

Sample xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
        
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="450" Width="800"
        TextElement.FontSize="18"
        >

    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="24">
        <TextBox
            md:HintAssist.Hint="Property A"
            md:TextFieldAssist.HasClearButton="True"                        
            Text="{Binding PropertyA, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Delay=500}"
            HorizontalAlignment="Left"
            MinWidth="192"
            Style="{DynamicResource MaterialDesignFloatingHintTextBox}"
            />
        <CheckBox 
            Content="Poperty A text box will interfere with this control if validation fails." 
            FontSize="14"
            Style="{DynamicResource MaterialDesignCheckBox}"
            />
        <TextBox
            md:HintAssist.Hint="Property B"
            md:TextFieldAssist.HasClearButton="True"
            md:HintAssist.HelperText="Sample helper test"
            md:HintAssist.HelperTextFontSize="12"
            Text="{Binding PropertyB, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Delay=500}"
            HorizontalAlignment="Left"
            MinWidth="192"
            Style="{DynamicResource MaterialDesignFloatingHintTextBox}"
            />
        <CheckBox 
            Content="Poperty B text box will interfere with this control if it includes helper text." 
            FontSize="14"
            Style="{DynamicResource MaterialDesignCheckBox}"
            />
    </StackPanel>
</Window>

Sample viewmodel using CommunityToolkit.Mvvm

public partial class ViewModel : ObservableValidator
{
    public ViewModel()
    {
        PropertyA = string.Empty;
        PropertyB = "12345678";
        PropertyC = true;
    }

    [ObservableProperty]
    [NotifyDataErrorInfo]
    [Required]
    private string? propertyA;

    [ObservableProperty]
    [NotifyDataErrorInfo]
    [Required]
    [RegularExpression("^\\d{8}$", ErrorMessage = "Property is not valid.")]
    private string? propertyB;

    [ObservableProperty]
    private bool propertyC;
}

Version

4.9

[jbooth88]

Is this related to #3250? If the helper text is a popup, it's a reasonable explanation about why this is happening

[nicolaihenriksen]

@jbooth88 I would say that the issue you link to is definitely related.

By default the validation template places the validation text in an adorner below the adorned element. Which also means it will cover neighboring content if it is placed to close to the bottom of the control (i.e. adorned element).

ValidationAssist.UsePopup=true will cause the validation text to be shown in a Popup, and here you then have slightly more control of the placement using ValidationAssist.PopupPlacement attached property. But it suffers the same "side-effect": it can cover other content if you don't plan ahead and make room for it.

[MichelMichels]

At this moment in time, this behavior is intended and you should account for this in your UI by adding space for possible validation message. Closing this issue.