如何正确设置样式的WPF EventTrigger? [英] How to correctly set an WPF EventTrigger in style?

问题描述

我有一个WPF风格的边框.用于按钮.

I have a WPF style that is a border. It is used for a button.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
    <Setter Property="ClickMode" Value="Press"/>
    <EventSetter Event="PreviewMouseUp" Handler="RegularButtonRelease"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid">
                    <Border x:Name="border" CornerRadius="2" BorderBrush="#FF444444" BorderThickness="1">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.2" >
                                <GradientStop Color="#ffaaaaaa" Offset="0" />
                                <GradientStop Color="White" Offset="1" />
                            </LinearGradientBrush>                             
                        </Border.Background>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <!--some style -->
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--some style -->                                
                    </Trigger>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                        <BeginStoryboard>
                            <Storyboard Duration="0:0:2" AutoReverse="False">
                                <ColorAnimation 
                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                    FillBehavior="Stop" To="Tomato"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想在给定的时间内将边框背景色设置为另一种颜色，当我释放鼠标单击按钮时. (例如，按下按钮时该按钮为黑色，而当我释放按钮时，该按钮变为红色，然后又变回白色)

I want to set the border background color to a different one for a given time, when I release the mouse click on the button. (e.g. the button is black when pressed, and when I release, it changes to red, then changes back to white)

使用上面的代码，我可以看到释放鼠标按钮后按钮的颜色不断变化，并且事件处理程序RegularButtonRelease也被连续触发. 不久，应用程序挂起，并给了我System.StackOverflowException

Using the above code, I can see the button color keep changing after I release mouse button, and my event handler RegularButtonRelease is fired continuously too. Soon the appplication hangs, and gives me a System.StackOverflowException exception.

如果我删除了EventTrigger样式，则我的应用程序将正确执行，因此我的EventTrigger一定是错误的.

If I take away the EventTrigger in style, my applications perform correctly, so my EventTrigger must be wrong.

我的问题是，如何正确设置鼠标悬停时的背景颜色变化(使用EventTrigger或其他方法)?

My question is, how could I correctly set a background color change at mouse button up (using the EventTrigger or something else)?

更新:

我尝试使用以下方法同时设置边框和背景:

I try to set the border and background at the same time using:

<ColorAnimation 
    Duration="0:0:0.8" 
    Storyboard.TargetName="border" 
    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
    To="Red"/>
<ColorAnimation 
    Duration="0:0:0.8" 
    Storyboard.TargetName="border" 
    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
    To="Red"/>

这一次边界线变为红色，就像一个饰物.但是背景仍然存在，没有任何变化.

This time the border line is changing to red, works like a charm. But the background still sits there, no any changes.

如何正确更改背景?

推荐答案

首先，您的错误: 您正在尝试更改Background的Color，因为将其设置为LinearGradientBrush是不可能的，其次您根本没有设置Storyboard.TargetName.

First, your mistakes : You are trying to change Color of Background which is not possible as it is set to LinearGradientBrush, and secondly you have not set Storyboard.TargetName at all.

我做了一些更改，首先:将x:Name分配给第二个GradientStop，然后在动画中将此x:Name用作Storyboard.TargetName="C2".

I have done some changes, first : Assign x:Name to second GradientStop, and then use this x:Name as Storyboard.TargetName="C2" in animation.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
        <Setter Property="ClickMode" Value="Press"/>
        <EventSetter Event="PreviewMouseUp" Handler="RegularButtonRelease"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid">
                        <Border x:Name="border" CornerRadius="2" BorderBrush="#FF444444" BorderThickness="1">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.2" >
                                    <GradientStop Color="#ffaaaaaa" Offset="0" />
                                    <GradientStop x:Name="C2" Color="White" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <!--some style -->
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--some style -->
                        </Trigger>
                        <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                            <BeginStoryboard>
                                <Storyboard Duration="0:0:1" AutoReverse="False">
                                    <ColorAnimation Storyboard.TargetName="C2"
                                        Storyboard.TargetProperty="Color" 
                                        FillBehavior="Stop" To="Red"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这篇关于如何正确设置样式的WPF EventTrigger?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！