WPF 按钮样式触发器答案

【问题标题】：WPF Button Styling TriggerWPF 按钮样式触发器
【发布时间】：2012-06-02 09:27:45
【问题描述】：

我被 WPF 中的样式所困扰。当用户将鼠标悬停在按钮上时，我需要更改背景渐变，但我不知道如何进行更改。这是我到目前为止的代码：

    <Style x:Key="Button_Green" TargetType="{x:Type Button}">
    <Setter Property="FontSize" Value="11" />
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="2" BorderBrush="#387f38" BorderThickness="1">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF5BB75B" Offset="0" />
                            <GradientStop Color="#FF449B44" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF5BB75B" Offset="0" />
                        <GradientStop Color="#FF398239" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Cursor" Value="Hand" />
        </Trigger>
    </Style.Triggers>
</Style>

鼠标光标正常变化，但背景渐变没有变化。

【问题讨论】：

标签： .net wpf

【解决方案1】：

您需要将 setter 的目标设置为您在 ControlTemplate 中定义的 Border 元素。目前，它针对Button 本身的Background 属性，该属性被您的自定义ControlTemplate 隐藏。

<Style x:Key="Button_Green" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="11" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="MyBackgroundElement" CornerRadius="2" BorderBrush="#387f38" BorderThickness="1">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF5BB75B" Offset="0" />
                        <GradientStop Color="#FF449B44" Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
                <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="MyBackgroundElement" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF5BB75B" Offset="0" />
                                <GradientStop Color="#FF398239" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Cursor" Value="Hand" />
               </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

在这里，我向Border 元素添加了一个x:Name 属性，以便可以使用Setter 上的TargetName 属性来引用它。

【讨论】：

我收到此错误：“无法在样式设置器上设置目标名称属性。”
另外，如果我将此代码放在 Application.xmal 中（它在它自己的资源字典中），我会收到此错误：“属性 'TargetName' 不代表 'Setter' 的有效目标因为找不到名为“MyBackgroundElement”的元素。请确保在使用它的任何设置器、触发器或条件之前声明目标。”
我认为您需要将样式触发器更改为模板触发器作为 ControlTemplate 的一部分。我认为父样式不了解子模板中创建的元素。
当然，Triggers 作用于ControlTemplate 中的元素需要在该模板的范围内定义。谢谢你，史蒂夫！

【解决方案2】：

从模板中改变这个 sn-p

<Border CornerRadius="2" BorderBrush="#387f38" BorderThickness="1">
   <Border.Background>
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#FF5BB75B" Offset="0" />
           <GradientStop Color="#FF449B44" Offset="1" />
       </LinearGradientBrush>
   </Border.Background>
   <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>

对此（重要的部分是Background="{TemplateBinding Background}"）：

<Border CornerRadius="2" BorderBrush="#387f38" BorderThickness="1" Background="{TemplateBinding Background}">       
   <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>

然后像这样为您的样式添加一个额外的设置器：

<Setter Property="Background">
  <Setter.Value>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="#FF5BB75B" Offset="0" />
          <GradientStop Color="#FF449B44" Offset="1" />
      </LinearGradientBrush>
  </Setter.Value>
</Setter>

【讨论】：