Animate Fill.RadiusY
<Window x:Class="InteractiveStoryboard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Interactive Storyboard" Height="300" Width="300">
<StackPanel Margin="10">
<Ellipse Name="ellipse" Width="150" Height="150">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0" />
<GradientStop Color="LightCoral" Offset="0.1" />
<GradientStop Color="Gold" Offset="0.9" />
<GradientStop Color="Purple" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
<Button Name="btnBegin">Begin</Button>
<Button Name="btnPause">Pause</Button>
<Button Name="btnResume">Resume</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Name="btnSkipToFill">Skip To Fill</Button>
<Button Name="btnStop">Stop</Button>
</StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Button.Click"
SourceName="btnBegin">
<EventTrigger.Actions>
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Fill.RadiusY" From="0" To="1"
Duration="0:0:2" RepeatBehavior="5x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="btnPause">
<PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="btnResume">
<ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="btnSkipToFill">
<SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="btnStop">
<StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</Window>
Related examples in the same category