How to Start,Stop,Pause and Resume animation to a Ellipse in WPF using VB.NET

Introduction

Here in this article we are discussing that how you can give animation to shapes in WPF. We have taken an ellipse on storyboard and some buttons like start, Pause, Resume, Leave to fill and stop for showing animation. We have coloured  ellipse with RadialGradientBrush. when we click start button animation in ellipse will start. Like start we can pause, resume and stop animation in the ellipse. The implementation of example needs Ellipse, StackPanel, RadialGradientBrush, Button and StoryBoard.

Getting Started

• Simply create a new WPF application. 
• Drag a StackPanel, Ellipse and Button control on MainWindow. Your Window will look like below.
  
  
   
• Your MainWindow.xaml page will look like below.
  
  <Window x:Class="MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="297" Width="366">
      <StackPanel Margin="15" Height="237" Width="321">
          <Ellipse Name="ellipse" Width="150" Height="142">
              <Ellipse.Fill>
                  <RadialGradientBrush>
                      <GradientStop Color="Pink" Offset="0" />
                      <GradientStop Color="White" Offset="0.1" />
                      <GradientStop Color="SkyBlue" Offset="0.9" />
                      <GradientStop Color="Yellow" Offset="1" />
                  </RadialGradientBrush>
              </Ellipse.Fill>
          </Ellipse>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
              <Button Name="butnStart">Start</Button>
              <Button Name="butnPause">Pause</Button>
              <Button Name="butnResume">Resume</Button>
          </StackPanel>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
              <Button Name="butnLeaveToFill">Leave To Fill</Button>
              <Button Name="butnStop">Stop</Button>
          </StackPanel>
          <StackPanel.Triggers>
              <EventTrigger RoutedEvent="Button.Click"
          SourceName="butnStart">
                  <EventTrigger.Actions>
                      <BeginStoryboard Name="MyFirstStoryboard"/>
                          <Storyboard>
                           <DoubleAnimation
                  Storyboard.TargetName="ellipse"
                  Storyboard.TargetProperty="Fill.RadiusX" From="0" To="1"
                  Duration="0:0:3" RepeatBehavior="5x" /> 
                        </Storyboard>
                      </BeginStoryboard>
                  </EventTrigger.Actions>
              </EventTrigger>
              <EventTrigger RoutedEvent="Button.Click" SourceName="butnPause">
                  <PauseStoryboard BeginStoryboardName="MyFirstStoryboard" />
              </EventTrigger>
              <EventTrigger RoutedEvent="Button.Click" SourceName="butnResume">
                  <ResumeStoryboard BeginStoryboardName="MyFirstStoryboard" />
              </EventTrigger>
              <EventTrigger RoutedEvent="Button.Click" SourceName="butnLeaveToFill">
                  <SkipStoryboardToFill BeginStoryboardName="MyFirstStoryboard" />
              </EventTrigger>
              <EventTrigger RoutedEvent="Button.Click" SourceName="butnStop">
                  <StopStoryboard BeginStoryboardName="MyFirstStoryboard" />
              </EventTrigger>
          </StackPanel.Triggers>
      </StackPanel>
  </Window>
   
• Now run your application.