Изменить цвет фона фона на EventTrigger в WPF

Question

Я пытаюсь изменить цвет моей кнопки, когда пользователь нажимает ее. Я использую триггеры для его достижения.

Мой 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.