使用触发器的 WPF 按钮行为

Question

我有一个Button，其自定义外观由ControlTemplate 定义。

它包含一个Canvas，其中包含一个Path。我想根据鼠标状态在Path.Opacity 中添加更改：

• 默认 - 0.5
• 鼠标悬停，未按下 - 1.0
• 鼠标悬停，按下 - 0.5

只需将Path.Opacity 的本地值设置为0.5 并为Trigger 添加一个Trigger，即可涵盖第一种情况：

<Button x:Class="ImagingShop.Panosphere.Controls.PathButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="100"
        Name="pathButton">

    <Button.Template>
        <ControlTemplate>
            <Canvas Background="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Width}">
                <Canvas.Style>
                    <Style TargetType="Canvas">
                        <Setter Property="Path.Opacity" Value="0.5"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Path.Opacity" Value="1.0"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Canvas.Style>
                <Path Data="{Binding ElementName=pathButton, Path=PathData}" Stretch="Uniform" Fill="#FFFFFFFF" Width="{TemplateBinding Width}" Height="{TemplateBinding Width}"/>
            </Canvas>
        </ControlTemplate>
    </Button.Template>

    <Grid>

    </Grid>
</Button>

但是，第三种情况不起作用。我添加了以下触发器：

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="Button.IsPressed" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="Path.Opacity" Value="0.75"/>
</MultiTrigger>

所以这应该将Path.Opacity 设置为0.75 是鼠标悬停在按钮上并且按钮被按下。

由于不透明度更改为0.5 而不是0.75，我对此感到困惑！触发器似乎适用，但没有按预期工作...

Answer 1

您为什么不使用Button 的Opacity 并直接在Button 的Style 上触发，您的ControlTemplate 除了这个Path 之外什么都没有。

<Style TargetType="{x:Type local:PathButton}">
  <Setter Property="Opacity"
          Value=".5" />
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:PathButton}">
        <Canvas Width="{TemplateBinding Width}"
                Height="{TemplateBinding Width}"
                Background="Transparent">
          <Path Width="{TemplateBinding Width}"
                Height="{TemplateBinding Width}"
                Data="{Binding ElementName=pathButton,
                                Path=PathData}"
                Fill="#FFFFFFFF"
                Opacity="{TemplateBinding Opacity}"
                Stretch="Uniform" />
        </Canvas>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Style.Triggers>
    <Trigger Property="IsMouseOver"
              Value="True">
      <Setter Property="Opacity"
              Value="1" />
    </Trigger>
    <Trigger Property="IsPressed"
              Value="True">
      <Setter Property="Opacity"
              Value=".75" />
    </Trigger>
  </Style.Triggers>
</Style>

将产生您期望的输出。

更新：

您可以只在ResourceDictionary 中包含Style，并在代码隐藏文件中包含子类声明。这将只生成一个 xaml 文件。在此方法中，您不会留下 2 个 xaml 文件。

还将PathData 的绑定切换为RelativeSource 绑定。

您可以从Here 下载此示例。打开看看

我还使用了一个插件 NestIn，它允许您通过编辑 vsproj 文件并添加 DependsOn 属性将文件分组到自定义组中。这使您可以将 ResourceDictionary 和代码隐藏类文件组合到一个实体 PathButton.xaml 中，就像 UserControl 和 Window 在 IDE 中的代码隐藏文件一样。