ControlTemplate.Triggers 中更灵活的设置器

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="" 属性。例如，当我将鼠标放在按钮上时，内边框为红色，外边框为蓝色。

你能帮我吗？

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>

Some notes

TargetName 只能在 <ControlTemplate.Triggers> 中设置，不能在 <Style.Triggers>
TargetName 仅在一个 ControlTemplate 部分中运行

Answer 2

为边框命名并在触发器 setter.

上使用 TargetName 属性

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

ControlTemplate.Triggers 中更灵活的设置器

More flexible setters in ControlTemplate.Triggers

c#

wpf

xaml

controltemplate