Setting WPF text backcolor with focus and image

Question

WPF /MVVM Pattern

User control with multiple textboxes using validation attributes. In the following style, everything works as intended- EXCEPT for those with a validation error, the Focused backcolor is not being set, due to the method used in the control template to set the error image.

If I remove the control template, the backcolor is set properly when focused if the validation error is set. With the template, backcolor is always white/default.

Any suggestions on the XAML required to have both - different backcolor when focused and the error image when validation fails?

<Style TargetType="{x:Type TextBox}">
    <Setter Property="Margin" Value="1" />
    <Setter Property="ToolTip" Value="{Binding Description}"/>

    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="LightYellow"/>
        </Trigger>

        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="ToolTip"
                    Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}"/>

            <!--adds the error image and border, but also prevents background color change OnFocus-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid>
                            <Border  
                                    BorderBrush="#d99" x:Name="textBorder" 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>
</Style>

Answer 1

You should check out the DependencyProperty precedence rules

What happens here is that the ControlTemplate you define overrides the Style.Triggers defined just before.

What you can do to make it work is to set the actual Style with appropriate Triggers directly inside of the ControlTemplate Otherwise, as you've seen, WPF will just use the default template for a Grid.

The code should look like that:

<Style.Triggers>

    <Trigger Property="Validation.HasError" Value="true">
        <Setter Property="ToolTip"
                Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}"/>

        <!--adds the error image and border, but also prevents background color change OnFocus-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                    <Grid.Style>
                      <Style TargetType="{x:Type Grid}">
                        <Style.Triggers>
    <!-- The trigger about IsFocused should be here!
    <Trigger Property="IsFocused" Value="True">
        <Setter Property="Background" Value="LightYellow"/>
    </Trigger>
                        </Style.Triggers>
                      </Style>
                    </Grid.Style>
                        <Border  
                                BorderBrush="#d99" x:Name="textBorder" 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>