Validation.ErrorTemplate size

Question

I've got the following control template which I use as a Validation.ErrorTemplate for TextBoxes:-

<ControlTemplate x:Key="ControlValidationErrorTemplate">
  <DockPanel LastChildFill="True">
    <Border Background="Red"
            DockPanel.Dock="right"
            Padding="2,0,2,0"
            ToolTip="{Binding ElementName=valAdorner, Path=AdornedElement.(Validation.Errors), Converter={x:Static val:ValidationErrorsConverter.Instance}}">
      <TextBlock Text="!"
                 VerticalAlignment="center"
                 HorizontalAlignment="center"
                 FontWeight="Bold"
                 Foreground="white" />
    </Border>
    <AdornedElementPlaceholder x:Name="valAdorner"
                               VerticalAlignment="Center">
      <Border BorderBrush="red"
              BorderThickness="1" />
    </AdornedElementPlaceholder>
  </DockPanel>
</ControlTemplate>

When a TextBox contains invalid content, the above template applies a red border and adds a red box containing an exclamation mark immediately to the right of the TB.

The problem is, the exclamation mark overlaps anything immediately to the right of the TB, rather than the layout changing to accomomodate the exclamation mark. I have a similar problem in DataGrids - the exclamation mark overlaps the right-hand edge of the containing cell, rather than the column width increasing to accommodate it.

Using Snoop, it appears that the template is being displayed in an "adorner layer" which I assume is a separate visual tree? This would explain why the window's layout isn't recalculated to take into account the exclamation mark. Can anyone suggest a way to achieve what I want?

Answer 1

As I suspected, it's due to the error template being rendered on the adorner layer, so it doesn't affect the layout of the window. See: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/9de3c9e5-5759-4f88-9184-175d3eaabdad/

I'm now using this control template instead:-

<ControlTemplate x:Key="ControlValidationErrorTemplate">
  <Grid>
    <Polygon Points="9,9 9,0 0,0"
             Stroke="Red"
             StrokeThickness="1"
             Fill="Red"
             HorizontalAlignment="Right"
             VerticalAlignment="Top"
             ToolTip="{Binding ElementName=valAdorner, Path=AdornedElement.(Validation.Errors), Converter={x:Static val:ValidationErrorsConverter.Instance}}" />
    <AdornedElementPlaceholder x:Name="valAdorner"
                               VerticalAlignment="Center">
      <Border BorderBrush="red"
              BorderThickness="1" />
    </AdornedElementPlaceholder>
  </Grid>
</ControlTemplate>

This draws a red border around the control, with a small red triangle overlapping the top-right corner of the control - hovering over this displays a tooltip containing the error message.