在WPF中的EventTrigger上更改按鈕背景顏色

Question

我試圖在用戶單擊它時更改我的Button的Background顏色。我正在使用觸發器來實現它。

我的XAML是：

<UserControl.Resources> 
    <Style x:Key="myBtnStyle" TargetType="{x:Type Button}"> 
     <!--VerticalAlignment="Top" VerticalContentAlignment="Top" Background="Blue" HorizontalAlignment="Right" 
     Height="24" Width="25" FontSize="16" FontWeight="Bold" --> 
     <Setter Property="VerticalAlignment" Value="Top" /> 
     <Setter Property="VerticalContentAlignment" Value="Top" /> 
     <Setter Property="Background" Value="Blue" /> 
     <Setter Property="HorizontalAlignment" Value="Right" /> 
     <Setter Property="Height" Value="24" /> 
     <Setter Property="Width" Value="25" /> 
     <Setter Property="FontSize" Value="16" /> 
     <Setter Property="FontWeight" Value="Bold" /> 
     <Style.Triggers> 
      <Trigger Property="Button.IsMouseOver" Value="true"> 
       <Setter Property="Background" Value="Yellow" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
<!-- 
    <ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}"> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsPressed" Value="True" > 
       <Setter Property="Background" Value="Cyan" /> 
      </Trigger> 

     </ControlTemplate.Triggers> 
    </ControlTemplate> --> 
</UserControl.Resources> 

<Button DockPanel.Dock="Right" Style="{StaticResource myBtnStyle}" Name="btnVert" Click="btnVert_Click" 
       Margin="10,10,10,0" ToolTip="Vertical" Content="V" /> 

我嘗試過各種設置，但在單擊鼠標時無法獲得的背景顏色改變上的按鈕。還提到了各種網站 - MSDN,SharpCorner,CodeProject以及其他許多網站。無法得到我錯在哪裏？

如何獲得Background點擊事件按鈕的顏色變化？

謝謝。

Answer 1

在這種情況下，你需要使用EventTrigger與Storyboard，因爲[Source]：

EventTrigger - 表示在響應事件適用的一組動作（動畫故事板）的觸發器。

實施例：

<Window.Resources> 
    <SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" /> 

    <Storyboard x:Key="ChangeBackgroundStoryboard"> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChangeBackgroundButton" 
             Storyboard.TargetProperty="Background"> 

      <DiscreteObjectKeyFrame KeyTime="0:0:0" 
            Value="{StaticResource ButtonBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 

<Grid> 
    <Grid.Triggers> 
     <EventTrigger SourceName="ChangeBackgroundButton" 
         RoutedEvent="Button.Click"> 

      <BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" /> 
     </EventTrigger> 
    </Grid.Triggers> 

    <Button Name="ChangeBackgroundButton" 
      Content="TestButton" 
      VerticalAlignment="Center" 
      HorizontalAlignment="Center" /> 
</Grid> 

這裏Storyboard資源，它定義了顏色ButtonBrush，它被設置在所述Click事件定義。欲瞭解更多信息，請訪問：

MSDN: EventTrigger

Edit

是，EventTrigger可以在模板中像這樣使用：

<Window.Resources> 
    <SolidColorBrush x:Key="IsMouseOverBackground" Color="AliceBlue" /> 
    <SolidColorBrush x:Key="IsPressedBrush" Color="Gainsboro" /> 
    <SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" /> 

    <Storyboard x:Key="ChangeBackgroundStoryboard"> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"> 
      <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ButtonBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 

    <Style x:Key="FlatButtonBaseStyle" TargetType="{x:Type Button}"> 
     <Setter Property="Width" Value="60" /> 
     <Setter Property="Height" Value="20" /> 
     <Setter Property="BorderThickness" Value="1" /> 
     <Setter Property="BorderBrush" Value="Gray" /> 
     <Setter Property="Background" Value="Transparent" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Border Name="Border" 
         Background="{TemplateBinding Background}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         BorderBrush="{TemplateBinding BorderBrush}"> 

         <ContentPresenter Name="Content" 
             Content="{TemplateBinding Content}" 
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             TextBlock.FontFamily="{TemplateBinding FontFamily}" 
             TextBlock.FontSize="{TemplateBinding FontSize}" /> 
        </Border> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="Border" Property="Background" Value="{StaticResource IsMouseOverBackground}" /> 
          <Setter Property="Opacity" Value="1" /> 
         </Trigger> 

         <Trigger Property="IsPressed" Value="True"> 
          <Setter TargetName="Border" Property="Background" Value="{StaticResource IsPressedBrush}" /> 
         </Trigger> 

         <!-- Here --> 
         <EventTrigger RoutedEvent="Button.Click"> 
          <BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" /> 
         </EventTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<WrapPanel> 
    <Button Content="Fisrt"     
      Style="{StaticResource FlatButtonBaseStyle}" 
      Margin="10" /> 

    <Button Content="Second" 
      Style="{StaticResource FlatButtonBaseStyle}" 
      Margin="10" /> 

    <Button Content="Third" 
      Style="{StaticResource FlatButtonBaseStyle}" 
      Margin="10" /> 
</WrapPanel> 

至於接觸的可能性爲其他按鈕通過一個Storyboard，您可以這樣做：

<Window.Resources> 
    <SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" /> 
    <SolidColorBrush x:Key="DefaultButtonBrush" Color="BlueViolet" /> 
</Window.Resources> 

<WrapPanel> 
    <WrapPanel.Triggers> 
     <EventTrigger SourceName="FisrtButton" 
         RoutedEvent="Button.Click"> 

      <BeginStoryboard> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FisrtButton" 
             Storyboard.TargetProperty="Background"> 

         <DiscreteObjectKeyFrame KeyTime="0:0:0" 
            Value="{StaticResource ButtonBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondButton" 
             Storyboard.TargetProperty="Background"> 

         <DiscreteObjectKeyFrame KeyTime="0:0:0" 
            Value="{StaticResource DefaultButtonBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThirdButton" 
             Storyboard.TargetProperty="Background"> 

         <DiscreteObjectKeyFrame KeyTime="0:0:0" 
            Value="{StaticResource DefaultButtonBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </WrapPanel.Triggers> 

    <Button Name="FisrtButton" 
      Content="Fisrt"     
      Margin="10" /> 

    <Button Name="SecondButton" 
      Content="Second" 
      Margin="10" /> 

    <Button Name="ThirdButton" 
      Content="Third" 
      Margin="10" /> 
</WrapPanel> 

在這種情況下，你只需要指定TargetName每一個按鈕，當你點擊第一個按鈕，其餘的顏色改變爲默認BlueViolet：

Answer 2

在WPF中，您可以使用Storyboard爲對象設置動畫。