DataTrigger 内的动画不会运行第二次

Question

这是代码：

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

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

同样奇怪的是，改变 DataTrigger 声明的顺序后，情况正好相反。

发生了什么阻止动画再次运行？

我可以使用 EventTriggers 以不同的方式执行此操作，但在更大的场景中我使用的是 DataTriggers，这就是我感到困惑的地方。

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

Answer 1

您需要在开始其他故事板之前停止故事板（将名称添加到故事板并在其他故事板运行之前停止它们中的每一个）：

<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 内的动画不会运行第二次

Animation inside DataTrigger won't run a second time

wpf

animation

xaml

datatrigger

DataTrigger 内的动画不会 运行 第二次

Animation inside DataTrigger won't run a second time

wpf

animation

xaml

datatrigger

DataTrigger 内的动画不会运行第二次