MouseOver和MouseDown上的动画按钮

Question

我正在为WPF中的标准Button创建自己的ControlTemplate.当用户用鼠标悬停在按钮上时,我想更改按钮的背景,当用户按下按钮时(另一种颜色),我想更改按钮的背景.这似乎是一种常见的行为,但我无法让它发挥作用.

我的模板由一个带有图像的边框组成.它是我想要制作动画的边框的背景颜色(真正的渐变).我的模板中有触发器可以激活动画(故事板).

MouseOver/Out工作得很好.按下按钮时出现问题.Press动画应该运行,Release动画也是如此.但在此之后,MouseOut永远不会运行.该按钮卡在MouseOver状态.

我究竟做错了什么？

<ControlTemplate TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="MouseOverAnimation">
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.2" />
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.2" />
        </Storyboard>
        <Storyboard x:Key="MouseOutAnimation">
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffeeeeee" Duration="0:0:0.2" />
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffcccccc" Duration="0:0:0.2" />
        </Storyboard>
        <Storyboard x:Key="MouseDownAnimation">
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" />
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ff9a9aff" Duration="0:0:0.1" />
        </Storyboard>
        <Storyboard x:Key="MouseUpAnimation">
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.1" />
            <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" />
        </Storyboard>
    </ControlTemplate.Resources>


    <Border x:Name="ButtonBorder" CornerRadius="0" BorderBrush="#55aaaaaa" BorderThickness="1" Width="23" Height="22">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientBrush.GradientStops>
                    <GradientStop x:Name="ButtonBorderGradientStop1" Color="#ffeeeeee" Offset="0.0" />
                    <GradientStop x:Name="ButtonBorderGradientStop2" Color="#ffcccccc" Offset="1.0" />
                </GradientBrush.GradientStops>
            </LinearGradientBrush>
        </Border.Background>
        <Image x:Name="ButtonIcon" Source="icons/searchicon_bw.png" Width="16" Height="16" />
    </Border>


    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource MouseDownAnimation}" />
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource MouseUpAnimation}" />
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers> 
</ControlTemplate>

Answer 1

动画有一个名为FillBehavior的属性,默认值为HoldEnd.

MouseUp动画完成后,它将保留值,防止鼠标移出动画正常显示.鼠标输出动画实际上确实在运行,但由鼠标向上动画覆盖.如果你翻转你的触发器的顺序,首先放置IsPressed,你可以看到IsMouseOver动画涵盖了所有的IsPressed动画.

您可以将FillBehavior设置为" 停止",以使动画在完成后停止覆盖属性.

在您的情况下,在MouseOutAnimation和MouseUpAnimation上将FillBehavior设置为Stop可以解决问题.

(在此示例中,在故事板上设置,因此它适用于所有包含的动画.)

<ControlTemplate.Resources> 
    <Storyboard x:Key="MouseOverAnimation" Storyboard.TargetProperty="Color"> 
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.2" /> 
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseOutAnimation" Storyboard.TargetProperty="Color"
                FillBehavior="Stop"> <!-- <=================== -->
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffeeeeee" Duration="0:0:0.2" /> 
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffcccccc" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseDownAnimation" Storyboard.TargetProperty="Color"> 
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffc7c7ff" Duration="0:0:0.1" /> 
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ff9a9aff" Duration="0:0:0.1" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseUpAnimation" Storyboard.TargetProperty="Color"
                FillBehavior="Stop">  <!-- <=================== -->
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.1" /> 
        <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.1" /> 
    </Storyboard> 
</ControlTemplate.Resources>

您可以在MSDN文章"动画结束后发生的事情下的动画概述"中找到有关FillBehavior的更多信息？.