绘制按钮上的 WPF 触发器答案

【问题标题】：WPF Trigger on Drawn Button绘制按钮上的 WPF 触发器
【发布时间】：2014-04-24 11:16:08
【问题描述】：

我通过此处提出的一些问题制作了一个三角形Button，一切正常，但现在我想添加Triggers，但没有任何反应。我有两个Buttons 应该有一些事情发生在IsMouseOver 但三角形指向不同的方向（）。所以我坚持我用所有的触发器创建了一个Style，然后有两种风格继承自这种风格并绘制三角形。但就像我说的那样，什么都没有发生。

前 2 个回答后更新：

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

【问题讨论】：

标签： wpf templates triggers styles controltemplate

【解决方案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" />

我刚刚注意到您已经更改/删除了原始代码示例...请不要这样做，因为这意味着答案、cmets（有时是问题）不再有意义。所以无论如何，你的 original 代码工作得很好（添加了{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 部分。要解决此问题，您只需将更多 Triggers 添加到您的 Back Style ControlTemplate：

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

【讨论】：

好吧，对不起。但是如果使用DateTrigger，则不会绘制任何内容，因为该部分位于Back Style?
我想避免这种情况，并从 DateTrigger 继承更多样式。但这似乎是不可能的。不过还是谢谢你。

【解决方案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>

【讨论】：