WPF: Starting and stopping animation via button clicks

bastianovic included in Toolbox

2022-10-01 345 words 2 minutes

Contents

How to start and stop animation by clicking buttons.

1 Create project

Fire up Visual Studio and create new “WPF Application” project (name it “WPFStartingStoppingAnimation”, for example):

./create-project.png — Create new WPF application

2 Add controls

Create a window with one TextBlock and two Buttons:

./main-window.png — Main application window

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<Window x:Class="WPFStartingStoppingAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="800">
	<Grid x:Name="GridMain">
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition/>
			<RowDefinition/>
		</Grid.RowDefinitions>
		<Button x:Name="ButtonStartAnimation"
			Grid.Column="1"
			Content="StartAnimation"/>
		<Button x:Name="ButtonStopAnimation"
			Grid.Column="1"
			Content="StopAnimation"
			Grid.Row="1"/>
		<TextBlock x:Name="TextBlockToAnimate"
			   HorizontalAlignment="Center"
			   TextWrapping="Wrap"
			   Text="TextBlock"
			   VerticalAlignment="Center"
			   Grid.RowSpan="2"
			   FontSize="36"/>
	</Grid>
</Window>

3 Add animation

Add triggers to grid for starting/stopping animation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<Grid.Triggers>
	<!-- Begin Storyboard animate opacity -->
	<EventTrigger RoutedEvent="Button.Click" SourceName="ButtonStartAnimation">
		<BeginStoryboard Name="MyBeginStoryboard">
			<Storyboard>
				<DoubleAnimation Storyboard.TargetName="TextBlockToAnimate"
						 Storyboard.TargetProperty="(TextBlock.Opacity)"
						 From="1.0"
						 To="0.0"
						 Duration="0:0:1"
						 AutoReverse="True"
						 RepeatBehavior="Forever" />
			</Storyboard>
		</BeginStoryboard>
	</EventTrigger>
	<!-- Stop the Storyboard -->
	<EventTrigger RoutedEvent="Button.Click" SourceName="ButtonStopAnimation">
		<StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
	</EventTrigger>
</Grid.Triggers>

Result

The finished application:

./running-application.gif — Main application window

Full code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


<Window x:Class="WPFStartingStoppingAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="800">
	<Grid x:Name="GridMain">
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition/>
			<RowDefinition/>
		</Grid.RowDefinitions>
		<Button x:Name="ButtonStartAnimation"
			Grid.Column="1"
			Content="StartAnimation"/>
		<Button x:Name="ButtonStopAnimation"
			Grid.Column="1"
			Content="StopAnimation"
			Grid.Row="1"/>
		<TextBlock x:Name="TextBlockToAnimate"
			   HorizontalAlignment="Center"
			   TextWrapping="Wrap"
			   Text="TextBlock"
			   VerticalAlignment="Center"
			   Grid.RowSpan="2"
			   FontSize="36"/>
		<Grid.Triggers>
			<!-- Begin Storyboard animate opacity -->
			<EventTrigger RoutedEvent="Button.Click" SourceName="ButtonStartAnimation">
				<BeginStoryboard Name="MyBeginStoryboard">
					<Storyboard>
						<DoubleAnimation Storyboard.TargetName="TextBlockToAnimate"
								 Storyboard.TargetProperty="(TextBlock.Opacity)"
								 From="1.0"
								 To="0.0"
								 Duration="0:0:1"
								 AutoReverse="True"
								 RepeatBehavior="Forever" />
					</Storyboard>
				</BeginStoryboard>
			</EventTrigger>
			<!-- Stop the Storyboard -->
			<EventTrigger RoutedEvent="Button.Click" SourceName="ButtonStopAnimation">
				<StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
			</EventTrigger>
		</Grid.Triggers>
	</Grid>
</Window>

Download sample project

Here you can download the sample project (built with Visual Studio 2022, .Net 6 - .zip, 4 KB).