在WPF中更改EventTrigger上的按钮背景颜色

I am trying to change the Background color of my Button when the user clicks it. I am using triggers to achieve it.

我试图在用户点击它时更改我的按钮的背景颜色。我正在使用触发器来实现它。

My XAML is:

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

I tried various settings, but couldn't get the Background color changed on the Button when mouse is clicked. Also referred various sites - MSDN, SharpCorner, CodeProject and many others too. Couldn't get where am I going wrong?

我尝试了各种设置，但单击鼠标时无法在按钮上更改背景颜色。还提到了各种网站 - MSDN，SharpCorner，CodeProject等等。无法到达我哪里错了？

How to get the Background color changed of Button on clicked event?

如何在点击的事件中更改Button的背景颜色？

Thanks.

谢谢。

2 个解决方案

#1

In this situation, you need to use EventTrigger with Storyboard, because [Source]:

在这种情况下，您需要将EventTrigger与Storyboard一起使用，因为[Source]：

EventTrigger - represents a trigger that applies a set of actions (animation storyboards) in response to an event.

EventTrigger - 表示应用一组操作（动画故事板）以响应事件的触发器。

Example:

例：

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

Here Storyboard defined in resources, which defines the color ButtonBrush, which is set at the Click event. For more information, please see:

这里在资源中定义了Storyboard，它定义了ButtonErush的颜色，它在Click事件中设置。有关更多信息，请参阅：

MSDN: EventTrigger

MSDN：EventTrigger

Edit

编辑

Yes, EventTrigger can be used in the template like this:

是的，可以在模板中使用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>

As for the possibility of contact to the other buttons through one Storyboard, you can do so:

至于通过一个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>

In this case, you just need to specify TargetName for every Button, when you click on the first Button, the color of the remaining changes to default BlueViolet:

在这种情况下，您只需要为每个Button指定TargetName，当您单击第一个Button时，剩余的颜色将更改为默认的BlueViolet：

#2

In WPF, you can animate objects by using Storyboard.

在WPF中，您可以使用Storyboard为对象设置动画。