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

Question

当用户单击它时，我正在尝试更改按钮的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>

在这种情况下，您只需为每个Button指定TargetName，当您点击第一个Button时，其余的颜色会变为默认的BlueViolet：

Answer 2

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