DataTrigger中的动画不会第二次运行 [英] Animation inside DataTrigger won't run a second time

问题描述

这是代码:

<Grid>
    <Ellipse Fill="Turquoise" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100">
        <Ellipse.Style>
            <Style TargetType="Ellipse">
                <Style.Setters>
                    <Setter Property="Ellipse.RenderTransform">
                        <Setter.Value>
                            <TranslateTransform X="0" Y="50"/>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=rectRight, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
                                    <!--<DoubleAnimation To="{Binding Path=Width}" Duration="0:0:1"/>--> <!--Doesn't work inside a Style Trigger-->
                                    <DoubleAnimation To="250" Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=rectLeft, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
                                    <DoubleAnimation To="45" Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal">
    <Rectangle Name="rectLeft" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
    <Rectangle Name="rectRight" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
    </StackPanel>
</Grid>

目标是当鼠标悬停在右矩形上时向右移动椭圆，而当鼠标悬停在左矩形上时向左移动椭圆.发生的情况是，将椭圆形悬停在左侧后，椭圆将不再向右移动.

The goal is to animate the Ellipse right when hovering over the right rectangle and left when hovering over the left rectangle. What happens is that after hovering over the left one the Ellipse will no longer move right.

还奇怪的是，在更改了DataTrigger声明的顺序之后，情况恰恰相反.

What's also weird is that after changing the order of the DataTrigger declarations around, the reverse is the case.

发生了什么事，阻止了动画再次运行?

What's going on that prevents the animation from running again?

我可以使用EventTriggers以不同的方式执行此操作，但是在更大的场景中，我使用的是DataTriggers，这是我不知所措的地方.

I can do this a different way using EventTriggers but in my larger scenario I am using DataTriggers and this is where I am flummoxed.

另一件事是，我想将DoubleAnimation.To属性绑定到椭圆的宽度，但是显然您不能在Style DataTriggers中做到这一点，而且我还没有找到一个好的解决方法.感谢您的帮助.

Another thing is that I wanted to Bind the DoubleAnimation.To property to the Width of the Ellipse but apparently you can't do that in Style DataTriggers and I've yet to find a good workaround. Any help is appreciated.

推荐答案

您需要先停止故事板，然后再开始其他故事板(在故事板中添加名称，并在其他故事板运行之前停止它们):

You need to stop the storyboard before you start other one(add names to both the storyboard & stop each of them before the other runs):

<Grid>
    <Ellipse Fill="Turquoise" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100">
        <Ellipse.Style>
            <Style TargetType="Ellipse">
                <Style.Setters>
                    <Setter Property="Ellipse.RenderTransform">
                        <Setter.Value>
                            <TranslateTransform X="0" Y="50"/>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=rectRight, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <StopStoryBoard BeginStoryBoardName="Second"/>
                            <BeginStoryboard x:Name="First">
                                <Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
                                    <!--<DoubleAnimation To="{Binding Path=Width}" Duration="0:0:1"/>--> <!--Doesn't work inside a Style Trigger-->
                                    <DoubleAnimation To="250" Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=rectLeft, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <StopStoryBoard BeginStoryBoardName="First"/>
                            <BeginStoryboard x:Name="Second">
                                <Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
                                    <DoubleAnimation To="45" Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal">
    <Rectangle Name="rectLeft" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
    <Rectangle Name="rectRight" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
    </StackPanel>
</Grid>

这篇关于DataTrigger中的动画不会第二次运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！