WPF:如何在MVVM中播放故事板？

在MVVM模式中播放故事板，可以通过以下步骤实现：

创建视图模型（ViewModel）：首先，需要创建一个视图模型来表示整个应用程序的逻辑。视图模型应该包含所有需要在故事板中显示的数据和命令。
创建视图（View）：接下来，创建一个视图，它将显示故事板中的数据和交互。视图应该使用WPF的数据绑定功能，将数据从视图模型绑定到视图中的控件。
创建故事板（Storyboard）：在视图中创建一个故事板，它将定义动画效果和时间线。故事板可以使用WPF的动画和时间线功能来创建复杂的动画效果。
将故事板与视图模型绑定：最后，将故事板与视图模型绑定，以便在视图模型中的数据更改时触发动画效果。可以使用WPF的事件触发器和动作来实现此目的。

以下是一个简单的示例，演示如何在MVVM模式中播放故事板：

创建视图模型（ViewModel）：

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isPlaying;

    public bool IsPlaying
    {
        get { return _isPlaying; }
        set
        {
            _isPlaying = value;
            OnPropertyChanged("IsPlaying");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

创建视图（View）：

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
   <Window.DataContext>
       <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
       <Button Content="Play" IsEnabled="{Binding IsPlaying, Converter={StaticResource BooleanInverter}}"/>
       <Button Content="Pause" IsEnabled="{Binding IsPlaying}"/>
    </Grid>
</Window>

创建故事板（Storyboard）：

   <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1"/>
</Storyboard>

将故事板与视图模型绑定：

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <i:InvokeCommandAction Command="{Binding PlayCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
   <Button.Style>
       <Style TargetType="Button">
           <Style.Triggers>
                <DataTrigger Binding="{Binding IsPlaying}" Value="True">
                    <DataTrigger.EnterActions>
                       <BeginStoryboard Storyboard="{StaticResource PlayPauseStoryboard}"/>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

这个示例中，当用户单击“Play”按钮时，视图模型中的“IsPlaying”属性将更改为True，从而触发故事板中的动画效果。当用户单击“Pause”按钮时，视图模型中的“IsPlaying”属性将更改为False，从而停止动画效果。