More flexible setters in ControlTemplate.Triggers

Question

I'm trying to style a button in XAML. Below you can see what I created so far.

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#f2f2f7"/>
    <Setter Property="Padding" Value="6,4"/>
    <Setter Property="Foreground" Value="#222222" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#b1b1c0">
                    <Border CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0" BorderBrush="#f8f8fa" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        </ContentPresenter>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#8e8eba" />
                        <Setter Property="Foreground" Value="#f2f291" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The problem is, that this button has two <Border> elements nested one in another. I'd like to have different BorderBrush="" attribute when IsMouseOver trigger is activated. For example, when I put mouse over button, the inner border would red, and outer border would be blue.

Can you help me with that?

Answer 1

Try set the Name for Borders and use TargetName in Trigger like this:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#f2f2f7"/>
    <Setter Property="Padding" Value="6,4"/>
    <Setter Property="Foreground" Value="#222222" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="OuterBorder" CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#b1b1c0">
                    <Border Name="InnerBorder" CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0" BorderBrush="#f8f8fa" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#8e8eba" />
                        <Setter Property="Foreground" Value="#f2f291" />

                        <!-- Here use TargetName -->
                        <Setter TargetName="OuterBorder" Property="BorderBrush" Value="Red" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Some notes

• TargetName can be set in only <ControlTemplate.Triggers>, not in <Style.Triggers>
• TargetName operates only within the one ControlTemplate section