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:

validation

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.

What do you want this to look like? I see the overlap, but it's not clear to me how you expect this to behave. — Matt, Jun 29 '11 at 07:21

Botz3000 · Accepted Answer · 2011-06-29T07:49:19.373

6

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.

edited Jun 29 '11 at 07:49

answered Jun 29 '11 at 07:33

Botz3000

39,020
8
103
127

Good answer, fair enough... I don't want my layout to jump around so it looks like tooltip it is. Thanks – hyp Jun 29 '11 at 07:39

score 1 · Answer 2 · edited Jan 17 '18 at 12:20

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>

WPF Validation Control Template overlapping

2 Answers2

Linked