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

Introduction


Here in this article I am explainning that how we can give animation to the shapes of the WPF. As we have taken a ellipse on storyboard and some buttons as start, pause, resume, Leave to fill and stop for showing animation. We have coloured the ellipse with RadialGradientBrush. When we click the start button the animation in the ellipse will start. Like start we can pause, resume and stop animation in the ellipse. The implementation 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.
  
  
  

Output