title: Can't Pause Storyboard in WPF
body: <p>I have a ListView where each item contains two Images defined in a DataTemplate.  When the ListView's SelectedItem changes, I use style triggers to begin storyboards that change the opacity on the two images of the SelectedItem over a total duration of 4 seconds. After the storyboards are complete, I change the SelectedItem to the next item from code so that the same animations occur on the next two images, and so on.</p>
  
  <p>I have a pause button that should pause the storyboards, however it has no effect - the storyboards animation still continue.  I've verified through debugging that the Pause button's click event is called and that the Pause() methods are called on the storyboards.</p>
  
  <p>Here is my UserControl:</p>
  
  <pre><code>&lt;UserControl
      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:ignore="http://www.galasoft.ch/ignore"
      xmlns:viewModel="clr-namespace:WpfTestBase.ViewModel"
      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
      xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
      xmlns:local="clr-namespace:WpfTestBase"
      xmlns:Custom="http://www.galasoft.ch/mvvmlight"
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
      x:Class="WpfTestBase.View.ListPresentationView"
      mc:Ignorable="d mc"
      d:DesignHeight="480"
      d:DesignWidth="640"
      &gt;
  &lt;UserControl.Resources&gt;
      &lt;Storyboard x:Key="PromptStoryboard"&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
              &lt;DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"&gt;
              &lt;/DiscreteDoubleKeyFrame&gt;
              &lt;DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="0.25"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
      &lt;Storyboard x:Key="TargetStoryboard"&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
              &lt;DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"&gt;
              &lt;/DiscreteDoubleKeyFrame&gt;
              &lt;DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
      &lt;Storyboard x:Key="CombinedStoryboard" Completed="Storyboard_Completed_1"&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
              &lt;DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"&gt;
              &lt;/DiscreteDoubleKeyFrame&gt;
              &lt;DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="0"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
  
      &lt;Style x:Key="CombinedListViewItemStyle" TargetType="{x:Type ListView}"&gt;
          &lt;Style.Setters&gt;
              &lt;Setter Property="BorderThickness" Value="0" /&gt;
              &lt;Setter Property="FontSize" Value="16" /&gt;
              &lt;Setter Property="FontFamily" Value="Arial" /&gt;
              &lt;Setter Property="ItemContainerStyle"&gt;
                  &lt;Setter.Value&gt;
                      &lt;Style TargetType="ListViewItem"&gt;
                          &lt;Setter Property="Background" Value="Transparent" /&gt;
                          &lt;Setter Property="Opacity" Value="1"/&gt;
                          &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
                          &lt;Setter Property="Template"&gt;
                              &lt;Setter.Value&gt;
                                  &lt;ControlTemplate TargetType="{x:Type ListViewItem}"&gt;
                                      &lt;ContentPresenter /&gt;
                                  &lt;/ControlTemplate&gt;
                              &lt;/Setter.Value&gt;
                          &lt;/Setter&gt;
                          &lt;Style.Triggers&gt;
                              &lt;Trigger Property="ListViewItem.IsSelected" Value="True"&gt;
                                  &lt;Trigger.EnterActions&gt;
                                      &lt;BeginStoryboard Storyboard="{StaticResource CombinedStoryboard}"&gt;
                                      &lt;/BeginStoryboard&gt;
                                  &lt;/Trigger.EnterActions&gt;
                              &lt;/Trigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style.Setters&gt;
      &lt;/Style&gt;
  
      &lt;DataTemplate x:Key="CombinedDataTemplate"&gt;
          &lt;Grid ShowGridLines="True"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="50"/&gt;
                  &lt;ColumnDefinition Width="100"/&gt;
                  &lt;ColumnDefinition Width="100"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;Image Grid.Column="1" Opacity="0.25" Source="{Binding PromptUriString}"&gt;
                  &lt;Image.Style&gt;
                      &lt;Style TargetType="{x:Type Image}"&gt;
                          &lt;Style.Triggers&gt;
                              &lt;DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
                                                      AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
                                           Value="True"&gt;
                                  &lt;DataTrigger.EnterActions&gt;
                                      &lt;BeginStoryboard Storyboard="{StaticResource PromptStoryboard}"&gt;
                                      &lt;/BeginStoryboard&gt;
                                  &lt;/DataTrigger.EnterActions&gt;
                              &lt;/DataTrigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/Image.Style&gt;
              &lt;/Image&gt;
              &lt;Image Grid.Column="2" Opacity="0.25" Source="{Binding TargetUriString}"&gt;
                  &lt;Image.Style&gt;
                      &lt;Style TargetType="{x:Type Image}"&gt;
                          &lt;Style.Triggers&gt;
                              &lt;DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
                                                      AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
                                           Value="True"&gt;
                                  &lt;DataTrigger.EnterActions&gt;
                                      &lt;BeginStoryboard Storyboard="{StaticResource TargetStoryboard}"&gt;
                                      &lt;/BeginStoryboard&gt;
                                  &lt;/DataTrigger.EnterActions&gt;
                              &lt;/DataTrigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/Image.Style&gt;
              &lt;/Image&gt;
  
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  &lt;/UserControl.Resources&gt;
  
  &lt;i:Interaction.Triggers&gt;
      &lt;i:EventTrigger EventName="Loaded"&gt;
          &lt;Custom:EventToCommand Command="{Binding LoadedCommand}"/&gt;
      &lt;/i:EventTrigger&gt;
  &lt;/i:Interaction.Triggers&gt;
  &lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition/&gt;
          &lt;RowDefinition Height="50"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Viewbox Stretch="Fill"&gt;
          &lt;ListView x:Name="listViewCombined"
                    ItemsSource="{Binding Qs}" 
                    Margin="0" 
                    BorderBrush="{x:Null}"
                    BorderThickness="4"
                    SelectedItem="{Binding SelectedQ, Mode=TwoWay}"
                    SelectionChanged="listViewCombined_SelectionChanged"
                    ItemTemplate="{DynamicResource CombinedDataTemplate}"
                    Style="{StaticResource CombinedListViewItemStyle}"
                    IsHitTestVisible="False"&gt;
          &lt;/ListView&gt;
      &lt;/Viewbox&gt;
      &lt;StackPanel Orientation="Horizontal"
                  Grid.Row="1"&gt;
          &lt;Button Name="PauseButton"
                  Content="Pause"
                  Click="Pause_Click"
                  Margin="10"/&gt;
          &lt;Button Name="ResumeButton"
                  Content="Resume"
                  Click="Resume_Click"
                  Margin="10"/&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>And my code-behind:</p>
  
  <pre><code>using Microsoft.Win32;
  using System;
  using System.Windows;
  using System.Windows.Controls;
  using System.Windows.Media.Animation;
  using WpfTestBase.ViewModel;
  
  namespace WpfTestBase.View
  {
  /// &lt;summary&gt;
  /// Interaction logic for MainWindow.xaml
  /// &lt;/summary&gt;
  public partial class ListPresentationView
  {
      public ListPresentationView()
      {
          InitializeComponent();
          DataContext = new ListPresentationViewModel();
      }
  
      private void listViewCombined_SelectionChanged(object sender, SelectionChangedEventArgs e)
      {
          var sbPrompt = FindResource("PromptStoryboard") as Storyboard;
          listViewCombined.BeginStoryboard(sbPrompt);
      }
  
      private void Storyboard_Completed_1(object sender, EventArgs e)
      {
          var vm = this.DataContext as ListPresentationViewModel;
          vm.CombinedAnimationCompletedCommand.Execute(null);
      }
  
      private void SuspendOrResumeStoryboard(PowerModes mode)
      {
          if (mode == PowerModes.Resume || mode == PowerModes.Suspend)
          {
              var vm = this.DataContext as ListPresentationViewModel;
              if (vm != null)
              {
                  try
                  {
                      var sbPrompt = FindResource("PromptStoryboard") as Storyboard;
                      var sbTarget = FindResource("TargetStoryboard") as Storyboard;
                      var sbCombined = FindResource("CombinedStoryboard") as Storyboard;
  
                      if (sbPrompt != null &amp;&amp; sbTarget != null)
                      {
                          if (mode == PowerModes.Suspend)
                          {
                              sbPrompt.Pause();
                              sbTarget.Pause();
                              sbCombined.Pause();
  
                              Console.WriteLine("===PAUSED" + " " + DateTime.Now.ToString("HH:mm:ss.fff"));
                          }
                          else if (mode == PowerModes.Resume)
                          {
                              sbPrompt.Resume();
                              sbTarget.Resume();
                              sbCombined.Resume();
                              Console.WriteLine("===RESUMED" + " " + DateTime.Now.ToString("HH:mm:ss.fff"));
                          }
                      }
                  }
                  catch (Exception ex)
                  {
                      Console.WriteLine(ex.Message);
                  }
              }
          }
      }
  
      private void Pause_Click(object sender, RoutedEventArgs e)
      {
          SuspendOrResumeStoryboard(PowerModes.Suspend);
      }
  
      private void Resume_Click(object sender, RoutedEventArgs e)
      {
          SuspendOrResumeStoryboard(PowerModes.Resume);
      }
  }
  }
  </code></pre>
  
  <p>And my ViewModel:</p>
  
  <pre><code>using GalaSoft.MvvmLight;
  using GalaSoft.MvvmLight.Command;
  using System;
  using System.Collections.Generic;
  using WpfTestBase.Model;
  
  namespace WpfTestBase.ViewModel
  {
  /// &lt;summary&gt;
  /// This class contains properties that a View can data bind to.
  /// &lt;para&gt;
  /// See http://www.galasoft.ch/mvvm
  /// &lt;/para&gt;
  /// &lt;/summary&gt;
  public class ListPresentationViewModel : ViewModelBase
  {
      private int _currCombinedIndex = 0;
      public List&lt;WmtQ&gt; Qs { get; set; }
  
      /// &lt;summary&gt;
      /// The &lt;see cref="SelectedQ" /&gt; property's name.
      /// &lt;/summary&gt;
      public const string SelectedQPropertyName = "SelectedQ";
  
      private WmtQ _selectedQ = null;
  
      /// &lt;summary&gt;
      /// Sets and gets the SelectedQ property.
      /// Changes to that property's value raise the PropertyChanged event. 
      /// &lt;/summary&gt;
      public WmtQ SelectedQ
      {
          get
          {
              return _selectedQ;
          }
          set
          {
              Set(() =&gt; SelectedQ, ref _selectedQ, value);
  
          }
      }
  
      private RelayCommand _loadedCommand;
  
      /// &lt;summary&gt;
      /// Gets the LoadedCommand.
      /// &lt;/summary&gt;
      public RelayCommand LoadedCommand
      {
          get
          {
              return _loadedCommand
                  ?? (_loadedCommand = new RelayCommand(
                  () =&gt;
                  {
                      SelectedQ = Qs[_currCombinedIndex];
                  }));
          }
      }
  
      private RelayCommand _combinedAnimationCompletedCommand;
  
      /// &lt;summary&gt;
      /// Gets the CombinedAnimationCompletedCommand.
      /// &lt;/summary&gt;
      public RelayCommand CombinedAnimationCompletedCommand
      {
          get
          {
              return _combinedAnimationCompletedCommand
                  ?? (_combinedAnimationCompletedCommand = new RelayCommand(
                  () =&gt;
                  {
                      _currCombinedIndex++;
                      if (_currCombinedIndex &lt; Qs.Count)
                      {
                          SelectedQ = Qs[_currCombinedIndex];
                      }
                  }));
          }
      }
  
      /// &lt;summary&gt;
      /// Initializes a new instance of the ListPresentationViewModel class.
      /// &lt;/summary&gt;
      public ListPresentationViewModel()
      {
          Qs = new List&lt;WmtQ&gt;();
          var qList = new List&lt;WmtQ&gt; { new WmtQ("One", "A"), new WmtQ("Two", "B"), new WmtQ("Three", "C"), new WmtQ("Four", "D") };
          Qs = qList;
      }
  
  }
  }
  </code></pre>