故事板的数据触发器未触发

Question

我在同一个图像上有 5 个不同的 DataTrigger，每个都用于相同的 Binding，但具有不同的值，每个将图像旋转不同的角度。每次更改该值后，该值都会重置为 0。当我没有添加该DataTrigger.ExitActions> <RemoveStoryboard>东西时，它们工作了一次，但它们只工作了一次，所以如果steps绑定再次获得这个值，它们就不会触发。<Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Source="{Binding drehteller_image}">        <Image.RenderTransform>            <RotateTransform/>        </Image.RenderTransform>        <Image.Style>            <Style>                <Style.Triggers>                    <DataTrigger Binding="{Binding steps}" Value="1">                        <DataTrigger.EnterActions>                            <BeginStoryboard x:Name="Storyboard1Step">                                <Storyboard>                                    <DoubleAnimation                                        Storyboard.TargetProperty="RenderTransform.Angle"                                         By="72"                                        Duration="00:00:00:03"                                    />                                </Storyboard>                            </BeginStoryboard>也许有人知道我做错了什么，我认为这RemoveStoryboard可能会解决他们只解雇一个的问题，但看起来他们没有。编辑：发现如果没有，ExitActions我可以根据需要多次触发值 1 的触发器，只要值永远不会高于 1，所以如果我一旦触发值 2 的触发器，值 1 的触发器将不会不再工作，如果我使用值 3 触发触发器，则值 2 的触发器将不再工作。等等，猜猜你已经明白了。

Answer 1

一个非常简单直接的解决方案是在后面的代码中运行动画：

var viewModel = new ViewModel();

viewModel.PropertyChanged += (s, e) =>

{

    if (e.PropertyName == nameof(viewModel.Steps))

    {

        drehteller.RenderTransform.BeginAnimation(

            RotateTransform.AngleProperty,

            new DoubleAnimation

            {

                By = viewModel.Steps * 72,

                Duration = TimeSpan.FromSeconds(3)

            });

    }

};

DataContext = viewModel;

这与 MVVM 并不矛盾，因为视图模型仍然对视图一无所知。这是一个纯粹的视图方面。

Answer 2

您还可以使用附加行为来完成此操作。这些是可重用的视图逻辑，您可以将它们附加到各种 UI 元素，而无需将它们放在代码隐藏中。

您将需要Microsoft.Xaml.Behaviors.Wpf NuGet 包（这曾经作为 Visual Studio 的“Blend for Visual Studio SDK for .NET”组件的一部分进行分发，但在 VS 2019 中发生了变化）。

定义你的行为。请注意，AssociatedObject指的是Image与此行为相关的 ，请参见下文。

public class AnimateBehavior : Behavior<Image>

{

    public int Steps

    {

        get => (int)GetValue(StepsProperty);

        set => SetValue(StepsProperty, value);

    }

    public static readonly DependencyProperty StepsProperty =

        DependencyProperty.Register(nameof(Steps), typeof(int), typeof(AnimateBehavior), new PropertyMetadata(0, (d, e) => ((AnimateBehavior)d).StepsChanged(e)));

    private void StepsChanged(DependencyPropertyChangedEventArgs e)

    {

        if (AssociatedObject == null)

            return;

        AssociatedObject.RenderTransform.BeginAnimation(

            RotateTransform.AngleProperty,

            new DoubleAnimation()

            {

                By = (int)e.NewValue * 72,

                Duration = TimeSpan.FromSeconds(3),

            });

    }

}

然后在您的 XAML 中，您将需要此命名空间：

xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"

然后：

<Image ...>

    <Image.RenderTransform>

        <RotateTransform/>

    </Image.RenderTransform>

    <behaviors:Interaction.Behaviors>

        <local:AnimateBehavior Steps="{Binding steps}"/>

    </behaviors:Interaction.Behaviors>

</Image>