1. Module 13 Animations in WPF

2. Module Overview Using Animations Using Triggers Implementing Data Visualizations

3. Lesson 1: Using Animations Understanding Animations Defining Animations Controlling Animations

4. Understanding Animations 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: ColorAnimation DoubleAnimation Point Animation Custom ColorAnimation DoubleAnimation Point Animation Custom

5. Defining Animations You add animation elements to a Storyboard element to define animations <DoubleAnimation From="30" To="200" Duration="00:00:3" Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2" /> <DoubleAnimation From="30" To="200" Duration="00:00:3" Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2" />

6. 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

7. Lesson 2: Using Triggers Understanding Triggers Defining Event Triggers Defining Property Triggers

8. Understanding Triggers A trigger sets properties or starts actions: Triggered by property value changes or events Trigger types: EventTrigger PropertyTrigger EventTrigger PropertyTrigger MultiTrigger DataTrigger and MultiDataTrigger 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

9. Defining Event Triggers To define a event trigger: Define a EventTrigger element 1 1 Specify the event that initiates the trigger 2 2 Define the behavior of the trigger 3 3 <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" />... <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" />...

10. Defining Property Triggers To define a property trigger: Define a Trigger element 1 1 Specify the property that initiates the trigger 2 2 Define the behavior of the trigger 3 3

11. Lesson 3: Implementing Data Visualizations Understanding Data Visualizations Designing Data Visualizations Implementing Data Visualizations by Using WPF

12. Understanding 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

13. Designing Data Visualizations Visualization vehicles: Tables Charts Graphs Rollovers Tooltips Mind maps Heat maps 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

14. Implement data visualizations by using: Implementing Data Visualizations by Using WPF Animations Controls Triggers......

15. 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

16. 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.

17. 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?

18. Module Review and Takeaways Review Questions Best Practices