Overriding Trigger from Style that is affecting control inside Template

Question

I have default style for all textboxes. Something like this:

<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type TextBox}">
      <Border x:Name="vaBorder" BorderThickness="1" CornerRadius="0" Padding="2,1,0,1" 
                         BorderBrush="{TemplateBinding BorderBrush}">
        <Grid>
          <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>           
      </Border>
      <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
          <Setter TargetName="vaBorder" Property="Background" Value="{DynamicResource {x:Static Themes:ResourceKeys.DisabledControlBackground}}"/>
          <Setter TargetName="PART_ContentHost" Property="Opacity" Value="0.7"/>
        </Trigger>
        <Trigger Property="IsReadOnly" Value="True">
          <Setter TargetName="vaBorder" Property="Background" Value="{DynamicResource {x:Static Themes:ResourceKeys.DisabledControlBackground}}"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Setter.Value>
</Setter>

As you can see there is a trigger that changes Background of vaBorder control when TextBox IsReadOnly property is set to True.

I put a TextBox control on my page, but just for this specific page I want the Background of that vaBorder control inside TextBox be different colour plus make text opaque.

Is it possible to do it from just overriding the style triggers somehow or do I need to pretty much create new style and override the whole Template from scratch?

Answer 1

You need to overrid ControlTemplate to override your ControlTemplate.Triggers

You have 2 solutions:

1. Create new Style on the page where you what another Background for vaBorder

2. Create attached property from type Brush and assignd them from Style setter. Modify your ControlTemplate:

   a). Add border for each state: DisabledBorder and Readonly border.

   b). Bind properties Background in your borders to appropriate attached properties

   c). In your triggers change visibity instead of changing background

   d). In the page where you want to use another color apply different values for those attached properties.

For foreground - implement same idea. I hope I've given it clear.

Attached property:

 public class Helper
{

    public static Brush GetReadonlyBackground(DependencyObject obj)
    {
        return (Brush)obj.GetValue(ReadonlyBackgroundProperty);
    }

    public static void SetReadonlyBackground(DependencyObject obj, Brush value)
    {
        obj.SetValue(ReadonlyBackgroundProperty, value);
    }

    public static readonly DependencyProperty ReadonlyBackgroundProperty =
        DependencyProperty.RegisterAttached("ReadonlyBackground", typeof(Brush), typeof(Helper), new PropertyMetadata(null));


}

Style:

   <Style TargetType="{x:Type TextBox}">
        <Setter Property="local:Helper.ReadonlyBackground"
                Value="HotPink" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border x:Name="vaBorder"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="0"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" />
                        <Border x:Name="BorderRadonly"
                                Visibility="Collapsed"
                                Background="{Binding Path=(local:Helper.ReadonlyBackground),RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}" />
                        <ScrollViewer x:Name="PART_ContentHost"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled"
                                 Value="False">
                            <Setter TargetName="vaBorder"
                                    Property="Background"
                                    Value="DarkGray" />
                            <Setter TargetName="PART_ContentHost"
                                    Property="Opacity"
                                    Value="0.7" />
                        </Trigger>
                        <Trigger Property="IsReadOnly"
                                 Value="True">
                            <Setter TargetName="BorderRadonly"
                                    Property="Visibility"
                                    Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Usage:

<StackPanel>
    <TextBox Text="Text Text"
             IsReadOnly="True" />
    <TextBox Text="Text Text"
             IsReadOnly="True"
             local:Helper.ReadonlyBackground="Aqua" />
</StackPanel>

Result: