Module 13

Animations in WPF

Module Overview

• Using Animations

• Using Triggers

• Implementing Data Visualizations

Lesson 1: Using Animations

• Understanding Animations

• Defining Animations

• Controlling Animations

Understanding Animations

Animations enable you to animate controls and graphical objects:Animations enable you to animate controls and graphical objects:

• Animate properties such as Width, Height, and Opacity

• Grouped together by using Storyboard objects

• Animate properties such as Width, Height, and Opacity

• Grouped together by using Storyboard objects

Types of animation:Types of animation:

• ColorAnimation

• DoubleAnimation

• Point Animation

• Custom

• ColorAnimation

• DoubleAnimation

• Point Animation

• Custom

Defining Animations

You add animation elements to a Storyboard element to define animationsYou add animation elements to a Storyboard element to define animations

<Storyboard x:Name="myStoryboard"> <DoubleAnimation From="30" To="200" Duration="00:00:3" Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> <DoubleAnimation.EasingFunction> <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2" /> </DoubleAnimation.EasingFunction> </DoubleAnimation></Storyboard>

<Storyboard x:Name="myStoryboard"> <DoubleAnimation From="30" To="200" Duration="00:00:3" Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> <DoubleAnimation.EasingFunction> <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2" /> </DoubleAnimation.EasingFunction> </DoubleAnimation></Storyboard>

You control animations by using the following methods on the Storyboard class:You control animations by using the following methods on the Storyboard class:

Controlling Animations

• Begin

• Pause

• Resume

• SetSpeedRatio

• Seek

• SeekAlignedToLastTick

• SkipToFill

• Stop

• Begin

• Pause

• Resume

• SetSpeedRatio

• Seek

• SeekAlignedToLastTick

• SkipToFill

• Stop

Lesson 2: Using Triggers

• Understanding Triggers

• Defining Event Triggers

• Defining Property Triggers

Understanding Triggers

A trigger sets properties or starts actions:A trigger sets properties or starts actions:

Triggered by property value changes or eventsTriggered by property value changes or events

Trigger types:Trigger types:

• EventTrigger

• PropertyTrigger

• EventTrigger

• PropertyTrigger

• MultiTrigger

• DataTrigger and MultiDataTrigger

Trigger actions enable triggers to perform actions:Trigger actions enable triggers to perform actions:

• EnterActions and ExitActions properties

• Actions property for event triggers

• EnterActions and ExitActions properties

• Actions property for event triggers

Defining Event Triggers

To define a event trigger:To define a event trigger:

Define a EventTrigger element Define a EventTrigger element11

Specify the event that initiates the trigger Specify the event that initiates the trigger22

Define the behavior of the trigger Define the behavior of the trigger33

<Rectangle.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" />...

<Rectangle.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" />...

Defining Property Triggers

To define a property trigger:To define a property trigger:

Define a Trigger element Define a Trigger element11

Specify the property that initiates the trigger Specify the property that initiates the trigger22

Define the behavior of the trigger Define the behavior of the trigger33

<Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Opacity" Value="0.5" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Opacity" Value="1.0" /> </Trigger> </Style.Triggers> </Style>

<Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Opacity" Value="0.5" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Opacity" Value="1.0" /> </Trigger> </Style.Triggers> </Style>

Lesson 3: Implementing Data Visualizations

• Understanding Data Visualizations

• Designing Data Visualizations

• Implementing Data Visualizations by Using WPF

Understanding Data Visualizations

Data visualizations:Data visualizations:

• Communicate information by using data clearly and effectively

• Typically render data in an interesting way and are also interactive

• Closely related to information graphics but are not the same

Designing Data Visualizations

Visualization vehicles:Visualization vehicles:

When designing data visualizations, consider:When designing data visualizations, consider:

• The data requirements for the visualization

• The elements of the data visualization that must be interactive

• The transitions that are required

Implement data visualizations by using:Implement data visualizations by using:

Implementing Data Visualizations by Using WPF

• Animations

• Controls

• Triggers

<DataTemplate DataType="{x:Type l:...}"> <!-- Animations. --> <DataTemplate.Resources> <Storyboard x:Key="..."> <DoubleAnimation ... /> </Storyboard> </DataTemplate.Resources> <!-- Controls. --> <StackPanel ...> ... </StackPanel> <!-- Triggers. --> <DataTemplate.Triggers> <DataTrigger ... /> </DataTemplate.Triggers> </DataTemplate>

<DataTemplate DataType="{x:Type l:...}"> <!-- Animations. --> <DataTemplate.Resources> <Storyboard x:Key="..."> <DoubleAnimation ... /> </Storyboard> </DataTemplate.Resources> <!-- Controls. --> <StackPanel ...> ... </StackPanel> <!-- Triggers. --> <DataTemplate.Triggers> <DataTrigger ... /> </DataTemplate.Triggers> </DataTemplate>

Lab: Creating Animations

• Exercise 1:Creating Animations Declaratively

• Exercise 2:Creating Animations Dynamically

• Exercise 3:Creating Routed Events

• Exercise 4:Raising and Handling Routed Events

Logon information

Estimated time: 90 minutes

Lab Scenario

You have been asked to update the graph control in the AdventureWorks Product Inventory application, to provide some simple animations to help give users some visual cues when they look at the data in the graph, and to enhance the visual appearance of the graph by adding an animation to the transaction history.

You have also been asked to add functionality to the Inventory tab Graph control and make it an interactive control. You must extend the control to give the user the ability to click a plot point on the graph, which will display a visual element containing detailed transaction history for a selected date.

Lab Review

Review Questions

• What is the advantage of the use of tooling such as Microsoft Expression Blend when you create animations?

• How can you locate an existing animation programmatically in your code-behind file?

• How can you programmatically reverse an animation so that it appears to play in reverse?

Module Review and Takeaways

• Review Questions

• Best Practices