ControlTemplate.Triggers中的Setter更加灵活

Question

我正在尝试在XAML中为按钮添加样式。下面是我目前创建的样式。

<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>

问题是，这个按钮有两个嵌套的<Border>元素。当触发IsMouseOver时，我想要不同的BorderBrush=""属性。例如，当我将鼠标悬停在按钮上时，内部边框会变成红色，而外部边框会变成蓝色。

你能帮我解决这个问题吗？

- stil

Answer 1

尝试为边框设置名称并在触发器中使用TargetName，例如：

<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>

一些注意事项

• TargetName 只能在 <ControlTemplate.Triggers> 中设置，不能在 <Style.Triggers> 中设置
• TargetName 仅在一个 ControlTemplate 部分中起作用

- Anatoliy Nikolaev

Answer 2

给边框取一个名称，并在触发器设置器上使用TargetName属性。

<Setter TargetName="MyBorderName" Property="BorderBrush" Value="Red" />

- Mike Eason