WPF。如何通过绑定停止数据触发动画？

Question

在 WPF 工具包数据网格中，我有一个绑定到单元格元素不透明度的数据触发器。

当 UpVisibility 更改为 1 时，路径变得可见，并且动画开始将其淡化为 0。这有效。

然而我现在的问题 - 如果我需要提前停止/取消褪色并将 UpVisibility 设置为 0，路径仍然可见并褪色，因为什么也没发生......

如何将不透明度降低到0 立即使用 MyValue 对象？

<Path Data="M 5,0 0,10 10,10" Height="10" Width="10" Fill="Green" Opacity="{Binding MyValue[0].UpVisibility}" Margin="5,0,5,0">
    <Path.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding MyValue[0].UpVisibility}" Value="1.0">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:10" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style> 
</Path>

Answer 1

还可以使用 DataTrigger 上的 ExitAction 来停止故事板，当绑定值更改为超出目标状态时调用。只需给您的 BeginStoryboard 命名，并在 StopStoryboard 操作中引用它，如下所示：

<DataTrigger.EnterActions>
    <BeginStoryboard Name="your_storyboard_name">
        ...
    </BeginStoryboard>
</DataTrigger.EnterActions>

<DataTrigger.ExitActions>
    <StopStoryboard BeginStoryboardName="your_storyboard_name" />
</DataTrigger.ExitActions>

这可能比启动第二个故事板来停止或屏蔽不同的故事板更合适。

Answer 2

您是否尝试过类似的操作（未经测试的示例）：

<Path Data="M 5,0 0,10 10,10" Height="10" Width="10" Fill="Green" Opacity="{Binding MyValue[0].UpVisibility}" Margin="5,0,5,0">
    <Path.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding MyValue[0].UpVisibility}" Value="1.0">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:10" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>

我将动画持续时间设置为 0 以使其即时。如果您没有定义 From 属性，您将指示 WPF 以当前 DependencyProperty 值启动，因此它将顺利过渡。

Answer 3

如果您需要在后面的代码中重置动画，您通常会执行这样的调用：

 MyControl.BeginAnimation(OpacityProperty, null);

但是如何根据 MVVM 在 XAML 中执行此操作？答案是：

<Style>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Vanishing}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard TargetProperty="Opacity">
                        <DoubleAnimation To="0" Duration="0:0:0.5" FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard TargetProperty="Opacity">
                        <DoubleAnimation To="{x:Null}" Duration="0:0:0"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

要在 ViewModel 中调用动画，我们可以这样做：

Vanishing = true;
await Task.Delay(500);
Vanishing = false;

同时确保绑定属性（在我的例子中消失）调用 INotifyPropertyChanged 来通知视图新值