WPF用RenderTransform动画DataTrigger

Question

我在使用数据触发器绘制画布对象的呈现转换时遇到了困难。作为测试用例，我在画布上有一个椭圆和两个按钮。当我按下每个按钮时，我想要椭圆的位置与该按钮的X坐标成动画：

​

​

在这个特定的例子中，我使用的按钮既不是这里也不是那里，关键是我试图使用绑定到视图模型中的属性的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。它基本上只是一个包含一个椭圆和两个按钮的画布，这个椭圆有两个故事板，当后端属性被设置为不同的字符串(例如，“左”和“右”)：

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

当我运行这个，我可以点击第一个动画，然后第二个，行为是正确的两次。然而，按相反顺序点击它们不会使work...the“右”按钮正确地动画，而“左”按钮什么也不做。就好像“右”动画仍然在运行或锁定属性或其他东西一样，如果我交换Xaml中故事板声明的顺序，情况就会进一步逆转。

这在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的Storyboard设置为Stop，但是一旦动画完成，Ellipse的位置将被恢复。

恐怕不行。单击“左然后右”开始工作，然后再次单击“左”会使动画从位置0重新启动，即使我设置了HandoffBehaviors和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>