Visual State Manager
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Visual State Manager

on

  • 2,226 views

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

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

Statistics

Views

Total Views
2,226
Views on SlideShare
2,226
Embed Views
0

Actions

Likes
0
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Visual State Manager Presentation Transcript

  • 1. Silverlight’s Visual State Manager Jeremy Likness Project Manager, Senior Consultant jlikness@wintellect.com Copyright © 2011consulting training design debugging wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 12. Parts and States • Parts – named sections within the control • States – change appearance based on contextconsulting training design debugging wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 18. Demo Visual State Explorerconsulting training design debugging wintellect.com
  • 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 wintellect.com
  • 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 wintellect.com
  • 21. Visual State Managerconsulting training design debugging wintellect.com
  • 22. Visual State Aggregator • Part of Jounce framework (free to rip out and steal): http://jounce.codeplex.com/ • 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 wintellect.com
  • 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 wintellect.com
  • 24. Demo MVVM with Visual Statesconsulting training design debugging wintellect.com
  • 25. Questions? Jeremy Likness Project Manager, Senior Consultant jlikness@wintellect.comconsulting training design debugging wintellect.com