1 / 28

Silverlight 2 D e sign & animation techniques

Andy Beaulieu MCT, MCSD.NET WPF & Silverlight Insiders Microsoft MVP Client App Dev www.spritehand.com www.andybeaulieu.com. Silverlight 2 D e sign & animation techniques. Agenda. Using Expression Blend Storyboard Animations Styling Visual State Manager ImplicitStyleManager

aerona
Download Presentation

Silverlight 2 D e sign & animation techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Andy Beaulieu MCT, MCSD.NET WPF & Silverlight Insiders Microsoft MVP Client App Dev www.spritehand.com www.andybeaulieu.com Silverlight 2 Design & animation techniques

  2. Agenda • Using Expression Blend • Storyboard Animations • Styling • Visual State Manager • ImplicitStyleManager • Custom Animations • Adding Physics • Silverlight Live Streaming

  3. DEMO:using expression blend

  4. Storyboard Animations • Simplest way to animate • Good for “Static” Animations • Can animate many Properties: • Opacity • Position • Scale • Rotation • Etc…… • Very Small Footprint • XAML is small for Vector Images • Key Frame based, so minimal markup

  5. Storyboard Animations, cont’d • Use Expression Blend to Design • Encapsulate Animations in separate UserControls! • Easier Maintenance • Smaller Pieces, Better Abstraction • Package animation with artwork

  6. DEMO:STORYBOARD ANIMATIONS

  7. Styling Styles can be defined at the Container level (Grid, Canvas, etc.): … OR at the Application Level, inside app.xaml: … and are then applied to controls using the Style tag:

  8. Styling, cont’d • Control Templates • Are special Style information used to specify what elements make up a control • EX: A Button may be made up of a Border, Grid, and Rectangle

  9. Styling, cont’d • You can use Expression Blend to Create Styles + Control Template! • Right-Click Object • Select Edit Control Parts (Template) • Select Edit a Copy to break down control into pieces of existing style • Select Create Empty to “Start from Scratch” with no pre-existing Style info

  10. DEMO:STYling a button

  11. Visual State Manager (VSM) • Allows animation behavior defined at the Style level • Allows re-use of behavior across controls of the same type • Defined at various levels: • App.xaml for Application-Wide use • UserControl.Resources for Page-Level use • Control.Resources for Control-Level use

  12. Visual State Manager (VSM), cont’d • Two types of State Animation: • State Transition Animation • MouseOver, Pressed, Disabled, etc. • In-State Animation • While Mouse is Over, While Mouse is Pressed, etc. • To make an in-state animation, just set the storyboard to AutoReverse, Repeat Forever.

  13. DEMO:VISUAL STATE MANAGER

  14. Implicit Styles • Wouldn’t it be NICE if we could (for example) make all TextBlock’s look the same in one easy step? • Unfortunately, Silverlight 2 DOES NOT support Implicit Styles  (but WPF does)

  15. ImplicitStyleManager • Fix for Missing Implicit Styles in Silverlight 2 • Part of Silverlight Toolkit • http://www.codeplex.com/Silverlight • Will apply a Theme to a given container (Grid, Canvas, UserControl, etc.) and all of its Children. • Toolkit also comes with lots of sample Themes • Useful for structuring your own Themes

  16. ImplicitStyleManager • Steps to Use • Add a ResourceDictionaryxaml file to the project • Ex: \SilverlightToolkit\Source\Controls.Theming.BureauBlue\Theme.xaml • If using sample themes like above, rename the file to Microsoft.Windows.Controls.Theming.ThemeName.xaml • Set the Build Action to Resource • In the Loaded Event, set the style:using Microsoft.Windows.Controls.Theming;Uri uri = new Uri(@“DefaultNamespace;component/Microsoft.Windows.Controls.Theming.ThemeName.xaml", UriKind.Relative);ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);ImplicitStyleManager.Apply(LayoutRoot); • Be sure to replace DefaultNamespace and ThemeName • Designers can open ResourceDictionary in Blend and Edit

  17. DEMO:ImplicitstyleMANAGER

  18. Custom Animations • Good for “Dynamic Animations” • Examples: • Animation based on User Input • Game AI • Physics

  19. Custom Animations, cont’d • Use CompositionTarget.Rendering Event • Each Rendering Event is a frame of animation • Example:

  20. DEMO:CUSTOM ANIMATIONS

  21. Physics • Applies real-world feel to UI • Use to make UI feel “Natural” • Think “Minority Report” • Examples: • DeepZoom • Games

  22. Some Typical Physics Terms • Body: The object in a simulation, containing mass, intertia, etc. • Geometry: The shape of the object in the simulation, used for collision detection • Joint: An object that joins two Bodies together • Angular Spring: An object that forces a joint to a particular rotation

  23. Physics, cont’d • “Physics is Hard!!!” • Use a Physics Engine • Farseer: www.codeplex.com/farseerphysics • Even with pre-built engine, still complex: • How to correlate Silverlight XAML elements with Physics elements? • What settings for gravity, joints, springs, etc?

  24. “Physics Helper” • Makes Physics much Easier! • Use Expression Blend 2.5 to Draw out Physics Simulation • User Controls for Joint, Static Body, Simulation, etc.

  25. DEMO:PHYSICS

  26. Silverlight Live Streaming • “Free” Hosting for your SL Apps! • Also Video • 10 GB Free • Silverlight.live.com

  27. DEMO:Silverlight Streaming

  28. Andy Beaulieu MCT, MCSD.NET, Silverlight Insiders www.spritehand.com www.andybeaulieu.com SUMMARYQ & A

More Related