我在使用数据触发器为 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，但无济于事。有人可以解释为什么会发生这种情况以及如何解决吗？
最佳答案
动画完成后，您应该删除 Storyboard。您可以使用 RemoveStoryboard 类来执行此操作。只需给 BeginStoryboard 元素一个 Name ，然后将一个 RemoveStoryboard 元素添加到 ExitActions 的 DataTrigger :
<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>
另一个选项是将
FillBehavior 的 Storyboard 设置为 Stop 但是一旦动画完成，Ellipse 的位置将被恢复。去掉 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>
关于WPF 使用 DataTrigger 为 RenderTransform 设置动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50789378/