绘制按钮上的WPF触发器

Question

我通过这里的一些问题制作了一个三角形Button，一切都很好，但现在我想添加Triggers，但什么都没发生。我有两个Buttons，它们应该在IsMouseOver上发生一些事情，但三角形指向不同的方向（<&>）。所以我想用所有的触发器创建一个Style，然后从这个样式继承两个样式并绘制三角形。但就像我说的，什么都没发生。

前2个Anwers后的更新：

<Style x:Key="DateTrigger" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Black"/>                                   
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="Red"/>                                 
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="Back" BasedOn="{StaticResource DateTrigger}" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Polygon Stroke="Black" Fill="{TemplateBinding Background}">
                        <Polygon.Points>
                            <Point X="74.2" Y="0"/>
                            <Point X="0" Y="25"/>
                            <Point X="74.2" Y="50"/>
                        </Polygon.Points>
                        </Polygon>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

您已将Trigger设置为影响Background属性，但尚未在ControlTemplate中定义该属性的用途。因此，Background属性值可能正在更改，但您看不到它，因为您没有在ControlTemplate中使用它。您可以使用TemplateBinding Markup Extension:从ControlTemplate访问Background属性

<Border Name="border"
        BorderThickness="1"
        Padding="4,2"
        BorderBrush="Black"
        CornerRadius="1"
        Background="{TemplateBinding Background}">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>

---

更新>>>

我不知道你为什么说Style仍然不工作。。。它工作得很好。只需将Style（包括{TemplateBinding Background}）应用于Button并将鼠标悬停在其上：

<Button Style="{StaticResource DateTrigger}" Content="Click me" />

我刚刚注意到您已经更改/删除了原来的代码示例。。。请不要这样做，因为这意味着答案、评论（有时还有问题）不再有意义。所以不管怎样，您的原始代码运行得很好（添加了{TemplateBinding Background}），所以如果我是您，我会替换它。这是我编辑的原始工作代码示例：

<Style x:Key="DateTrigger" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border"
                        BorderThickness="1"
                        Padding="4,2"
                        BorderBrush="Black"
                        CornerRadius="1"
                        Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>
                        <Setter Property="Foreground" Value="White"/>
                    </Trigger>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="Back" BasedOn="{StaticResource DateTrigger}" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Polygon Stroke="Black" Fill="White">
                    <Polygon.Points>
                        <Point X="74.2" Y="0"/>
                        <Point X="0" Y="25"/>
                        <Point X="74.2" Y="50"/>
                    </Polygon.Points>
                </Polygon>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

---

更新2>>>

你不能使用Back Style，因为其中的ControlTemplate将取代DateTrigger Style中的ControlTemplate，以及Triggers部分。要解决此问题，您只需在Back Style ControlTemplate:中添加更多Triggers即可

<Style x:Key="Back" BasedOn="{StaticResource DateTrigger}" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Polygon Stroke="Black" Fill="{TemplateBinding Background}">
                    <Polygon.Points>
                        <Point X="74.2" Y="0"/>
                        <Point X="0" Y="25"/>
                        <Point X="74.2" Y="50"/>
                    </Polygon.Points>
                </Polygon>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>
                        <Setter Property="Foreground" Value="White"/>
                    </Trigger>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Button Style="{StaticResource Back}" Content="Click me" />

Answer 2

首先，您的Trigger设置了Button.Background，而不是Border.Background，因此您需要将TargetName设置为Border 的名称

<Setter TargetName="border" Property="Background" Value="Black"/>

或者使用TemplateBinding并将Button.Background与Border.Background 结合

<Border Name="border" ... Background="{TemplateBinding Background}">

第二个问题是，在我看来，你认为ControlTemplate是以某种方式合并的。事实并非如此。当您在Back样式中设置Template时，您将覆盖从DateTrigger样式继承的值，从而有效地丢失了所有触发器。一种解决方案是将Content设置为Back样式，而不是Template

<Style x:Key="Back" BasedOn="{StaticResource DateTrigger}" TargetType="Button">
   <Setter Property="Content">
      <Setter.Value>
         <Polygon Stroke="Black" Fill="White">
            <Polygon.Points>
               <Point X="74.2" Y="0"/>
               <Point X="0" Y="25"/>
               <Point X="74.2" Y="50"/>
            </Polygon.Points>
         </Polygon>
      </Setter.Value>
   </Setter>
</Style>