Visual State Manager


Published on

Learn everything you need to know about Silverlight's Visual State Manager.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Visual State Manager

  1. 1. Silverlight’s Visual State Manager Jeremy Likness Project Manager, Senior Consultant Copyright © 2011consulting training design debugging
  2. 2. what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Productionconsulting training design debugging
  3. 3. Agenda • XAML • Dependency Properties • Coercion • Storyboards • “Lookless” Controls • Parts and States • Groups • States • Transitions • Demo: Visual State Explorer • Visual State Manager • Visual State Aggregator • Demo: MVVM with Visual Statesconsulting training design debugging
  4. 4. XAML • Extensible Application Markup Language • Declarative: – Initialize objects – Set properties of objects • Object graph • Behaviors • Triggers • Data-binding – clean separation of UI layerconsulting training design debugging
  5. 5. XAML Rectangle Type is Initialized <Rectangle Name="rectangle1" Width="100" Complex Dependency Property Value Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> </Rectangle> Type Converterconsulting training design debugging
  6. 6. Dependency Properties • Actual value based on multiple inputs • Callback functionality • Required for animation • Backed by CLR properties • CLR wrapper (get/set) • Styles • Data-bindingconsulting training design debugging
  7. 7. Dependency Properties public static readonly DependencyProperty IsSpinningProperty = Backing Store DependencyProperty.Register( "IsSpinning", typeof(Boolean), typeof(SilverlightExampleClass), null); CLR Property Façade public bool IsSpinning { get { return (bool)GetValue(IsSpinningProperty); } set { SetValue(IsSpinningProperty, value); } }consulting training design debugging
  8. 8. Coercion • How do we compute the value of a dependency property? • Value Precedence… 1. Active animations (storyboard not stopped) 2. Local value (SetValue) 3. Template (ControlTemplate, DataTemplate) 4. Style 5. Default valueconsulting training design debugging
  9. 9. Storyboards • Coerce property values • May transition over time • Can be cyclical • “Ending” not the same as “Stopping” • Key-frame vs. From/To/By • Color, Double, Point, Objectconsulting training design debugging
  10. 10. Storyboards <StackPanel x:Name="LayoutRoot" Background="White"> Range <StackPanel.Resources> <Storyboard x:Name="myStoryboard"> <DoubleAnimation From="30" To="200" Duration="00:00:3" Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> Target <DoubleAnimation.EasingFunction> <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2" /> </DoubleAnimation.EasingFunction> Easing </DoubleAnimation> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="200" Height="30" /> </StackPanel>consulting training design debugging
  11. 11. “Lookless” Controls • Custom controls separate logic from visual appearance • Allows modifying visual appearance without changing underlying code • Styles • Templates • “Control Contract” – parts and statesconsulting training design debugging
  12. 12. Parts and States • Parts – named sections within the control • States – change appearance based on contextconsulting training design debugging
  13. 13. Groups • Set of mutually exclusive states for a control • Orthogonal • Controls may have multiple states, but only one state per group • Example: CheckBox – CommonStates (Normal, MouseOver, Pressed, etc.) – CheckStates (Checked, Unchecked, InDeterminate) – FocusStates – ValidationStatesconsulting training design debugging
  14. 14. States • Appearance of control in a particular state • “Base” state means “no state” • Typically you will add a default state and set the control to that state, i.e. “Normal” • States are created by a storyboard • The storyboard plays and may have animation but is not stopped until the state within that group changesconsulting training design debugging
  15. 15. States <ControlTemplate TargetType="Button"> <Grid > Root Visual <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> Group <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> Default State <Storyboard> <ColorAnimation Storyboard.TargetName="ButtonBrush“ Storyboard.TargetProperty="Color" To="Red" /> </Storyboard> </VisualState> Storyboard & Animation </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.Background> <SolidColorBrush x:Name="ButtonBrush" Color="Green"/> </Grid.Background> </Grid> </ControlTemplate>consulting training design debugging
  16. 16. Transitions • Control transition between one state to another • Generated duration will automatically transition between old storyboard and new storyboard • Control isn’t in the “new” state until the transition completes • New storyboard gives more control (this is stopped once the transition completes) • Stop old storyboard > start transition storyboard > stop transition storyboard > start new storyboardconsulting training design debugging
  17. 17. Transitions Uses State Storyboard <VisualStateGroup.Transitions> <VisualTransition To="GreenState" GeneratedDuration="0:0:1“/> <VisualTransition From="GreenState" To="ShowState"> <Storyboard Duration="0:0:1"> <DoubleAnimation Uses Transition Storybard Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.R otationY)" From="-80" To="-0"/> <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTra nsform.X)" From="-205" To="0"/> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions>consulting training design debugging
  18. 18. Demo Visual State Explorerconsulting training design debugging
  19. 19. Visual State Manager • Manages all logic and transitions • GetVisualStateGroups – iterate all groups in the control – Iterate states and transitions within the group – CurrentState, CurrentStateChanging, CurrentStateChang ed – Use state/transition to grab storyboard • GoToState – transition control to the target state (swallows errors with missing state) • Customizeableconsulting training design debugging
  20. 20. Visual State Manager foreach(VisualStateGroup group in VisualStateManager.GetVisualStateGroups(LayoutRoot)) { if (!group.Name.Equals("RectangleStates")) continue; group.CurrentStateChanging += GroupCurrentStateChanging; group.CurrentStateChanged += GroupCurrentStateChanged; foreach(VisualState state in group.States) { var state1 = state; if (state.Storyboard != null) { state.Storyboard.Completed += (o, args) => _messages.Add( string.Format("Storyboard for state {0} completed.", state1.Name)); } } }consulting training design debugging
  21. 21. Visual State Managerconsulting training design debugging
  22. 22. Visual State Aggregator • Part of Jounce framework (free to rip out and steal): • Allows for coordination of visual states 100% from the UI (clean separation) • Create an “event” visual states participate in (define what state to transition to when the event is raised) • Raise an “event” with a triggerconsulting training design debugging
  23. 23. Visual State Aggregator <UserControl> <Grid x:Name="LayoutRoot"> <i:Interaction.Behaviors> <vsm:VisualStateSubscriptionBehavior EventName="ActivatePanelB" StateName="Background" UseTransitions="True"/> <vsm:VisualStateSubscriptionBehavior EventName="DeactivatePanelB" StateName="Foreground" UseTransitions="True"/> </i:Interaction.Behaviors> </Grid> </UserControl> <Grid> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonUp"> <vsm:VisualStateTrigger EventName="ActivatePanelB"/> </i:EventTrigger> </i:Interaction.Triggers> </Grid>consulting training design debugging
  24. 24. Demo MVVM with Visual Statesconsulting training design debugging
  25. 25. Questions? Jeremy Likness Project Manager, Senior Consultant jlikness@wintellect.comconsulting training design debugging