wpf如何控制故事板

Question

我有這樣的用戶控件。 （從代碼項目得到了它，並修改了它）背後

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes; 
using System.Windows.Media.Animation; 

namespace DataTransfer.View.CustomControls 
{ 
    /// <summary> 
    /// Interaction logic for CircularProgressBar.xaml 
    /// </summary> 
    public partial class CircularProgressBar : UserControl 
    { 
    public CircularProgressBar() 
    { 
     InitializeComponent(); 
     if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)) 
     Stop(); 
    } 

    public void Start() 
    { 
     LayoutRoot.Visibility = Visibility.Visible; 
     CirccularProgressBarStoryBoard.Begin(); 
    } 

    public void Stop() 
    { 
     LayoutRoot.Visibility = Visibility.Collapsed; 
     CirccularProgressBarStoryBoard.Stop(); 
    } 
    } 
} 

<UserControl x:Class="DataTransfer.View.CustomControls.CircularProgressBar" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="120" d:DesignWidth="120" 

      Background="Transparent"> 
    <Grid> 
    <Viewbox> 
     <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Grid.RenderTransform> 
      <ScaleTransform x:Name="SpinnerScale" ScaleX="1.0" ScaleY="1.0" /> 
     </Grid.RenderTransform> 
     <Canvas RenderTransformOrigin="0.5,0.5" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Width="120" Height="120" > 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="20.1696" 
          Canvas.Top="9.76358" 
          Stretch="Fill" Fill="Orange" 
          Opacity="1.0"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="2.86816" 
          Canvas.Top="29.9581" Stretch="Fill" 
          Fill="Black" Opacity="0.9"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="5.03758e-006" 
          Canvas.Top="57.9341" Stretch="Fill" 
          Fill="Black" Opacity="0.8"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="12.1203" 
          Canvas.Top="83.3163" Stretch="Fill" 
          Fill="Black" Opacity="0.7"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="36.5459" 
          Canvas.Top="98.138" Stretch="Fill" 
          Fill="Black" Opacity="0.6"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="64.6723" 
          Canvas.Top="96.8411" Stretch="Fill" 
          Fill="Black" Opacity="0.5"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="87.6176" 
          Canvas.Top="81.2783" Stretch="Fill" 
          Fill="Black" Opacity="0.4"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="98.165" 
          Canvas.Top="54.414" Stretch="Fill" 
          Fill="Black" Opacity="0.3"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="92.9838" 
          Canvas.Top="26.9938" Stretch="Fill" 
          Fill="Black" Opacity="0.2"/> 
      <Ellipse Width="21.835" Height="21.862" 
          Canvas.Left="47.2783" 
          Canvas.Top="0.5" Stretch="Fill" 
          Fill="Black" Opacity="0.1"/> 
      <Canvas.RenderTransform> 
      <RotateTransform x:Name ="SpinnerRotate" Angle = "0" /> 
      </Canvas.RenderTransform>      
      <Canvas.Triggers> 
       <EventTrigger RoutedEvent ="ContentControl.Loaded" > 
       <BeginStoryboard> 
        <Storyboard x:Name="CirccularProgressBarStoryBoard"> 
        <DoubleAnimation 
        Storyboard.TargetName ="SpinnerRotate" 
        Storyboard.TargetProperty ="(RotateTransform.Angle)" 
        From="0" To="360" 
        Duration="0:0:01" 
        RepeatBehavior="Forever"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      </Canvas.Triggers> 
     </Canvas> 
     </Grid> 
    </Viewbox> 
    </Grid> 
</UserControl> 

代碼在我看來

<local:CircularProgressBar x:Name="cpb" Width="30" Height="30" VerticalAlignment="Bottom" Margin="563,0,117.667,278" RenderTransformOrigin="1.096,0.548" IsEnabled="{Binding CpbIsEnabled}" Visibility="{Binding CpbVisibility}"/> 

我需要控制停止和重新啓動動畫。我可以在視圖代碼做背後這樣

private void BeginA(bool pBegin) 
{ 
    if (pBegin == true) 
    { 
    cpb.CirccularProgressBarStoryBoard.Begin(); 
    cpb.LayoutRoot.Visibility = Visibility.Visible; 
    } 
    else 
    { 
    cpb.CirccularProgressBarStoryBoard.Stop(); 
    cpb.LayoutRoot.Visibility = Visibility.Hidden; 
    } 
} 

但我期待去控制它在視圖模型。我該怎麼做？ 我想通過在視圖模型中設置布爾屬性來控制開始/停止，但不知道如何將此屬性綁定到開始/停止方法。

只是試圖遵循MVVM的最佳做法。

在此先感謝。

Answer 1

A ViewModel 不應該控制故事板。 ViewModel知道什麼都沒有關於視圖的細節。

現在，ViewModel可以設置一個屬性，如LoadingData，然後觸發（使用DataTrigger）啓動故事板。它也可能引發視圖將註冊的事件StartingLoad。

無論哪種方式，視圖選擇如何處理視圖模型引發的狀態更改或事件。視圖模型不直接啓動或停止故事板。