Start And Stop An Animation Using StoryBoard

In this article, i am going to explain how you can start and stop an animation using StoryBoard
on the click event of the Start Animation and Stop button from the user interface.


Note:- In this article you also learn how to use the RadialGradienBrush and customize the default interface of the Button in the WPF application using the Template.

Note:- First, I explain how to use RadialGradientBrush.
Caution:- To use animation using StoryBoard, RadialGradient is not necessary.

.XAML Code for RadialGradientBrush is :-

<Grid Height="300" Width="400">

<Grid.Background>

<RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

<GradientStop Color="Red" Offset="0"></GradientStop>

<GradientStop Color="Cyan" Offset="0.99"></GradientStop>

<GradientStop Color="Green" Offset="0.75"></GradientStop>

<GradientStop Color="White" Offset="1.0"></GradientStop>

</RadialGradientBrush>

</Grid.Background>

</Grid>

Note:- Use ControlTemplate to customize the default appearance of the Control in WPF.

We use ControlTemplate For customize the appearance of Button control:-

Here is the .XAML code for it:-

<Button Name="btnStartAnimation" FontSize="10" FontWeight="Bold" Content="Render Transform" Canvas.Left="100" Canvas.Top="75"

RenderTransformOrigin="0.5,0.5">

<Button.Template>

<ControlTemplate TargetType="{x:Type Button}">

<Grid>

<Ellipse Height="50" Width="90" Opacity="0.75" Fill="Red" Stroke="Red"></Ellipse>

<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>

</Grid>

</ControlTemplate>

</Button.Template>

<Button.RenderTransform>

<RotateTransform x:Name="rotate" Angle="0" ></RotateTransform>

</Button.RenderTransform>

</Button>

Note:- Here is the complete .XAML code for start and Stop Animation using StoryBoard

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WPF Start and stop Storyboard Animation" Height="400" Width="450" WindowStyle="ToolWindow" ResizeMode="NoResize">

<Grid Height="300" Width="400">

<Grid.Background>

<RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

<GradientStop Color="Red" Offset="0"></GradientStop>

<GradientStop Color="Cyan" Offset="0.99"></GradientStop>

<GradientStop Color="Green" Offset="0.75"></GradientStop>

<GradientStop Color="White" Offset="1.0"></GradientStop>

</RadialGradientBrush>

</Grid.Background>

<StackPanel Height="200" Width="300">

<Canvas Height="200" Width="300">

<Canvas.Background>

<RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

<GradientStop Color="Red" Offset="0.0"></GradientStop>

<GradientStop Color="White" Offset="0.25"></GradientStop>

<GradientStop Color="Green" Offset="0.75"></GradientStop>

<GradientStop Color="White" Offset="1.0"></GradientStop>

</RadialGradientBrush>

</Canvas.Background>

<Button Name="bntClose" Content="X" Canvas.Left="280" Canvas.Top="-1"></Button>

<Path Stroke="Black" StrokeThickness="2" Canvas.Left="0" Canvas.Top="20">

<Path.Data>

<PathGeometry>

<PathFigure StartPoint="300,0">

<LineSegment Point="0,0" />

</PathFigure>

</PathGeometry>

</Path.Data>

</Path>

<TextBlock FontSize="15" Foreground="White" HorizontalAlignment="Center" Canvas.Left="80" Canvas.Top="30">WPF Animation</TextBlock>

<Button Name="btnStartAnimation" FontSize="10" FontWeight="Bold" Content="Render Transform" Canvas.Left="100" Canvas.Top="75" RenderTransformOrigin="0.5,0.5">

<Button.Template>

<ControlTemplate TargetType="{x:Type Button}">

<Grid>

<Ellipse Height="50" Width="90" Opacity="0.75" Fill="Red" Stroke="Red"></Ellipse>

<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>

</Grid>

</ControlTemplate>

</Button.Template>

<Button.RenderTransform>

<RotateTransform x:Name="rotate" Angle="0" ></RotateTransform>

</Button.RenderTransform>

</Button>

<Button Name="btnStop" Content="Stop" Canvas.Left="250" Canvas.Top="165"></Button>

<Canvas.Triggers>

<EventTrigger SourceName="btnStartAnimation" RoutedEvent="Button.Click">

<EventTrigger.Actions>

<BeginStoryboard Name="animationStart">

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="rotate"

Storyboard.TargetProperty="Angle"

From="0"

To="360"

FillBehavior="Stop"

Duration="0:0:2"

RepeatBehavior="Forever">

</DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger SourceName="btnStop" RoutedEvent="Button.Click">

<EventTrigger.Actions>

<StopStoryboard BeginStoryboardName="animationStart"></StopStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Canvas.Triggers>

</Canvas>

</StackPanel>

</Grid>

</Window>

Note:- Press F5 to run this application, it looks like this. It has two button Rotate Transform and Stop;

When the user click on the Rotate Transform button the animation start, and when user click on Stop button the animation stops.

Note:- The animated windows looks like this:-



Thanking U.