WPF Validation ErrorTemplate display trouble

Question

I have a simple WPF Grid with two rows and two columns. The second column contains TextBox-es which are bound to some view model properties. I need to customize these TextBoxes validation ErrorTemplates to display validation error just above the problem box.

Following code

<Style TargetType="Control" x:Key="ValidationControlStyle">
  <Setter Property="Validation.ErrorTemplate">
    <Setter.Value>
      <ControlTemplate>
        <StackPanel>
          <TextBlock Foreground="Red"
                     Text="{Binding ElementName=ErrorAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
          <AdornedElementPlaceholder x:Name="ErrorAdorner"/>
        </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

gives very ugly result when error message visually overlaps above row (see picture below)

How can I place validation error just above the problem field (Grid row should increase its height)?

Maybe place the Validation TextBlock in the main UI Layer, and set its Visibility using a DataTrigger based off of the `Validation.HasError`? I don't remember the exact binding syntax, but [this answer](http://stackoverflow.com/a/8978041/302677) looks like it should work. — Rachel, Jun 14 '16 at 21:06
@Rachel, yes, that's exactly what I finally did. Please, Answer the question and I will mark your advice as the answer. Thank you! — Serge P., Jun 15 '16 at 08:21

score 0 · Accepted Answer · answered Jun 15 '16 at 15:57

Maybe place the Validation TextBlock in the main UI Layer, and set its Visibility using a DataTrigger based off of the Validation.HasError?

Binding syntax should be something like this :

<Style x:Key="ErrorTextBlock" TargetType="{x:Type TextBlock}">
    <Setter Property="Visibility" Value="False" />
    <Setter Property="Foreground" Value="Red" />
    <DataTrigger Binding="{Binding ElementName=MyTextBox, Path=Validation.HasError" Value="True">
        <Setter Property="Visibility" Value="True"/>
    </DataTrigger>
</Style>

I'm sure there's some way to make it generic too if you want :)

WPF Validation ErrorTemplate display trouble

1 Answers1