WPF Validation Control Template overlapping

Question

I've got a user control with a control template to show validation errors, validation template:

<ControlTemplate x:Key="TextBoxPropertyValidationTemplate">
        <StackPanel>
            <Border BorderBrush="Red" BorderThickness="1">
                <AdornedElementPlaceholder x:Name="MyAdorner" />
            </Border>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" MaxHeight="16" MaxWidth="16"
                       Source="{Binding Source={StaticResource ValidationIcon}, Converter={StaticResource UriConverter}}" 
                       Margin="1" RenderOptions.BitmapScalingMode="HighQuality"
                       VerticalAlignment="Center" HorizontalAlignment="Center" />
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left"
                           Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
                           TextWrapping="Wrap" Grid.Column="1" FontSize="10" Foreground="Red" />
            </Grid>

        </StackPanel>
    </ControlTemplate>

And I can't seem to get around a rather irritating problem which looks like this:

I've been trying to play around with margins on the user control and on the template also some Height=Auto etc but all these don't really help. Any ideas anyone?

If that helps the main user control (which nests the ones with validation) is in a TabItem with a AdornerDecorator.

Any help appreciated.

Answer 1

Alternately, instead of using ControlTemplate, you could put the error message TextBlock beside the TextBox, and set its Text property binding the TextBox's ErrorContent.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBox x:Name="txtName" Grid.Row="0">
        <TextBox.Text>
            <Binding Path="Name" NotifyOnValidationError="True" ValidatesOnExceptions="True" UpdateSourceTrigger="PropertyChanged">
                <Binding.ValidationRules>
                    <common:RequiredFieldValidationRule/>
                </Binding.ValidationRules>
            </Binding>
        </TextBox.Text>
    </TextBox>
    <TextBlock Grid.Row="1" Text="{Binding ElementName=txtName,Path=(Validation.Errors)[0].ErrorContent}"
               Visibility="{Binding ElementName=txtName,Path=Validation.HasError,Converter=...}" />
</Grid>

Answer 2

I'd say this is because your error message is on the AdornerLayer, which doesn't participate in the same layout as your control. MSDN says "rendering of an adorner is independent from rendering of the UIElement that the adorner is bound to." and that is why the message is just put on top of everything.

You could put the error text into the original template, hide it based on Validation.HasError and include it in the layout process that way.

But changing the layout of the control might not be the best way to go if a validation error occurs. You might consider providing additional information in a ToolTip.