Validation.ErrorTemplate Style Issue

Question

I am trying to apply a style to a text box when the content is not valid.

The following style works:

     <Style x:Key="textBoxNormalStyle" TargetType="{x:Type TextBox}">
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="ForceCursor" Value="False"/>
    <Setter Property="Foreground" Value="{StaticResource TextColor}"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="3,0,3,0"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border Background="{StaticResource TextBackColor}" BorderBrush="{StaticResource BorderColor}" x:Name="Bd" CornerRadius="4" BorderThickness="2">
                    <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
<Setter Property="Validation.ErrorTemplate">
  <Setter.Value>
    <ControlTemplate>
    </ControlTemplate>
  </Setter.Value>
</Setter>
<Style.Triggers>
  <Trigger Property="Validation.HasError" Value="True">
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="ForceCursor" Value="False"/>
    <Setter Property="Foreground" Value="{StaticResource TextColor}"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="3,0,3,0"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type TextBox}">
          <Grid Name="test">
            <Border Background="{StaticResource TextBackColor}" BorderBrush="#d99" x:Name="Bd" CornerRadius="4" BorderThickness="2">
              <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
            </Border>
            <Image Name="ErrorImage" Width="24" Height="24" Margin="0,0,4,0" Source="/Images/error.png" HorizontalAlignment="Right">
            </Image>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Trigger>
</Style.Triggers>

However I want to get rid of the trigger above and move the control template within the trigger to the Validation.ErrorTemplate section. But when I do this the control for the error template does not display correctly (the size of the error template defaults to the size of the image contained within it, left aligned, and blocks the text the user might have typed in the textbox).

Is there a cleaner way for the xaml above?

Answer 1

The ErrorTemplate is an adorner, not a replacement for the control template. You include an AdornedElementPlaceholder in the template where you want to leave space for the original control. So, your error template should look like:

<Setter Property="Validation.ErrorTemplate">
    <Setter.Value>
        <ControlTemplate>
            <Grid Name="test">
                <AdornedElementPlaceholder/>
                <Image Name="ErrorImage" Width="24" Height="24" Margin="0,0,4,0" Source="/Images/error.png" HorizontalAlignment="Right"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Since you also want to change the color of the border, I would use a TemplateBinding for the border brush and change that in the Validation.HasError trigger:

<Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type TextBox}">
            <Border Background="{StaticResource TextBackColor}" BorderBrush="{TemplateBinding BorderBrush}" x:Name="Bd" CornerRadius="4" BorderThickness="2">
                <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>
<Style.Triggers>
    <Trigger Property="Validation.HasError" Value="True">
        <Setter Property="BorderBrush" Value="#d99"/>
    </Trigger>
</Style.Triggers>