WPF Stop Storyboard on Visibility Changed

Question

Hello, I have a UserControl with a story board and I want to stop the animation when the control's Visibility changes.

I created a Trigger to pause the animation and start it depending on the state, but I keep getting an ArgumentException.

Here is the XAML:

<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard x:Name="ProgressAnimation_BeginStoryboard" Storyboard="{StaticResource ProgressAnimation}"/>
    </EventTrigger>
    <Trigger Property="Control.Visibility" Value="Collapsed">
        <PauseStoryboard BeginStoryboardName="ProgressAnimation_BeginStoryboard" />
    </Trigger>
    <Trigger Property="Control.Visibility" Value="Visible">
        <ResumeStoryboard BeginStoryboardName="ProgressAnimation_BeginStoryboard" />
    </Trigger>
</UserControl.Triggers>

and here is the Exception:

The value "System.Windows.Media.Animation.PauseStoryboard" is not of type "System.Windows.SetterBase" and cannot be used in this generic collection. Parameter name: value

How would I do this in XAML ?

Thanks, Raul

Answer 1

Take a look at this sample from MSDN:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
 <StackPanel>
  <Rectangle Name="TargetRect" Width="200" Height="200" Fill="Blue"/>
  <Button Name="Begin">BeginStoryboard</Button>
  <Button Name="Pause">PauseStoryboard</Button>
  <Button Name="Resume">ResumeStoryboard</Button>
  <StackPanel.Triggers>
   <EventTrigger SourceName="Begin" RoutedEvent="Button.Click">
    <BeginStoryboard Name="ColorStoryboard">
     <Storyboard TargetName="TargetRect">
      <ColorAnimation Storyboard.TargetProperty="Fill.Color" To="Red" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
   <EventTrigger SourceName="Pause" RoutedEvent="Button.Click">
    <PauseStoryboard BeginStoryboardName="ColorStoryboard"/>
   </EventTrigger>
   <EventTrigger SourceName="Resume" RoutedEvent="Button.Click">
    <ResumeStoryboard BeginStoryboardName="ColorStoryboard"/>
   </EventTrigger>
  </StackPanel.Triggers>
 </StackPanel>
</Page>

The only difference I can see is that they are using EventTrigger here, but it should behave the same, at least in my experience.

Answer 2

What is setting the Visibility? Can you not bind to that value to control the Storyboard?