Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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