WPF 使用 DataTrigger 为 RenderTransform 设置动画

Question

我在使用数据触发器为 Canvas 对象的渲染变换设置动画时遇到困难。作为测试用例，我在 Canvas 上有一个椭圆和两个按钮。当我按下每个按钮时，我希望椭圆的位置动画到该按钮的 X 坐标:

我在这个特定示例中使用按钮的事实既不在这里也不在那里，关键是我试图用绑定(bind)到我的 View 模型中的属性的 DataTrigger 触发这些动画:

// this is the property my DataTrigger will bind to
private string _Anim;
public string Anim
{
    get { return this._Anim; }
    set
    {
        this._Anim = value;
        RaisePropertyChanged(() => this.Anim);
    }
}

// a command handler for the buttons that sets my animation property
public ICommand AnimCommand { get { return new RelayCommand<string>(OnAnim); } }
private void OnAnim(string value)
{
    this.Anim = String.Empty;   // cancel any existing animation, probably not needed...
    this.Anim = value;
}

这是我用来执行此操作的 Xaml。它基本上只是一个包含椭圆和两个按钮的 Canvas ，椭圆有 2 个 Storyboard ，响应后端属性设置为不同的字符串(即“左”和“右”)而触发:

<Viewbox xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <Canvas Width="350" Height="150" Background="CornflowerBlue">
        <Ellipse x:Name="MyEllipse" Width="20" Height="20" Fill="Red">
            <Ellipse.RenderTransform>
                <TranslateTransform x:Name="myTransform" X="50" Y="50" />
            </Ellipse.RenderTransform>
            <Ellipse.Style>
                <Style TargetType="Ellipse">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Anim}" Value="Left">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="100" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Anim}" Value="Right">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="200" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>

        <Button x:Name="btnLeft" Content="Left" Command="{Binding AnimCommand}" CommandParameter="Left" Canvas.Left="100" Canvas.Top="100" Width="32" Height="24" />
        <Button x:Name="btnRight" Content="Right" Command="{Binding AnimCommand}" CommandParameter="Right" Canvas.Left="200" Canvas.Top="100" Width="32" Height="24" />

    </Canvas>
</Viewbox>

当我运行它时，我可以点击第一个动画，然后点击第二个，两次的行为都是正确的。然而，以相反的顺序点击它们是行不通的……“右”按钮动画正确，“左”按钮什么都不做。就好像“正确的”动画仍在运行或锁定属性或其他东西一样，如果我在 Xaml 中交换 Storyboard声明的顺序，情况就会相反，这一事实进一步支持了这种情况。

这适用于 EventTriggers，我只看到它适用于 DataTriggers。我也试过使用 FillBehaviours 和 HandoffBehaviors，但无济于事。有人可以解释为什么会发生这种情况以及如何解决它吗？

Answer 1

动画完成后，您应该移除Storyboard。你可以使用 RemoveStoryboard类来做到这一点。只需给 BeginStoryboard 元素一个 Name，然后将一个 RemoveStoryboard 元素添加到 DataTrigger 的 ExitActions :

<Style TargetType="Ellipse">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Anim}" Value="Left">
            <DataTrigger.EnterActions>
                <BeginStoryboard Name="sb">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="100" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="sb" />
            </DataTrigger.ExitActions>
        </DataTrigger>
        <DataTrigger Binding="{Binding Anim}" Value="Right">
            <DataTrigger.EnterActions>
                <BeginStoryboard Name="sb2">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="200" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="sb2" />
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

另一个选项是将 Storyboard 的 FillBehavior 设置为 Stop，然后将 Ellipse 的位置设置为 Stop > 将在动画完成后恢复。

Doesn't work I'm afraid. Clicking Left then Right works at first, but then clicking Left again causes the animation to restart from position 0, even if I set the HandoffBehaviors and FillBehaviours.

去掉 XAML 中的 DataTriggers，然后编写一些自定义代码。这有效:

private void MyEllipse_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    INotifyPropertyChanged inpc = MyEllipse.DataContext as INotifyPropertyChanged;
    if (inpc != null)
        WeakEventManager<INotifyPropertyChanged, PropertyChangedEventArgs>.AddHandler(inpc, nameof(INotifyPropertyChanged.PropertyChanged), OnChanged);
}

private PropertyInfo _pi;
private void OnChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == "Anim")
    {
        _pi = _pi ?? sender.GetType().GetProperty(e.PropertyName);
        string anim = _pi?.GetValue(sender) as string;
        switch (anim)
        {
            case "Left":
                myTransform.BeginAnimation(TranslateTransform.XProperty, new DoubleAnimation() { To = 100.0, Duration = TimeSpan.FromSeconds(1) });
                break;
            case "Right":
                myTransform.BeginAnimation(TranslateTransform.XProperty, new DoubleAnimation() { To = 200.0, Duration = TimeSpan.FromSeconds(1) });
                break;
        }
    }
}

XAML:

<Viewbox xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <Canvas Width="350" Height="150" Background="CornflowerBlue">
        <Ellipse x:Name="MyEllipse" Width="20" Height="20" Fill="Red"
                         DataContextChanged="MyEllipse_DataContextChanged">
            <Ellipse.RenderTransform>
                <TranslateTransform x:Name="myTransform" X="50" Y="50" />
            </Ellipse.RenderTransform>
        </Ellipse>

        <Button x:Name="btnLeft" Content="Left" Command="{Binding AnimCommand}" CommandParameter="Left" Canvas.Left="100" Canvas.Top="100" Width="32" Height="24" />
        <Button x:Name="btnRight" Content="Right" Command="{Binding AnimCommand}" CommandParameter="Right" Canvas.Left="200" Canvas.Top="100" Width="32" Height="24" />
    </Canvas>
</Viewbox>