visual state manager

wintellect.comconsulting training design debugging

Silverlight’s Visual State Manager

Jeremy LiknessProject Manager, Senior Consultantjlikness@wintellect.com Copyright © 2011

wintellect.comconsulting training design debugging

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.

Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning

Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences

Design• User Experience Design• Visual & Content Design• Video & Animation Production

what we do

who we are

how we do it

consulting training debuggingdesign

wintellect.comconsulting training design debugging

• 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 States

Agenda

wintellect.comconsulting training design debugging

• Extensible Application Markup Language• Declarative:

– Initialize objects– Set properties of objects

• Object graph• Behaviors• Triggers• Data-binding – clean separation of UI layer

XAML

wintellect.comconsulting training design debugging

XAML

<Rectangle Name="rectangle1" Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill></Rectangle>

Rectangle Type is Initialized

Complex Dependency Property Value

Type Converter

wintellect.comconsulting training design debugging

• Actual value based on multiple inputs• Callback functionality• Required for animation• Backed by CLR properties• CLR wrapper (get/set)• Styles• Data-binding

Dependency Properties

wintellect.comconsulting training design debugging

Dependency Properties

public static readonly DependencyProperty IsSpinningProperty =

DependencyProperty.Register( "IsSpinning", typeof(Boolean), typeof(SilverlightExampleClass), null);

public bool IsSpinning{ get { return (bool)GetValue(IsSpinningProperty); } set { SetValue(IsSpinningProperty, value); }}

Backing Store

CLR Property Façade

wintellect.comconsulting training design debugging

1. Active animations (storyboard not stopped)2. Local value (SetValue)3. Template (ControlTemplate, DataTemplate)4. Style5. Default value

Coercion

• How do we compute the value of a dependency property?

• Value Precedence…

wintellect.comconsulting training design debugging

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, Object

wintellect.comconsulting training design debugging

Storyboards

<StackPanel x:Name="LayoutRoot" Background="White"> <StackPanel.Resources> <Storyboard x:Name="myStoryboard"> <DoubleAnimation From="30" To="200" Duration="00:00:3" Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> <DoubleAnimation.EasingFunction> <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="200" Height="30" /></StackPanel>

Range

Target

Easing

wintellect.comconsulting training design debugging

“Lookless” Controls

• Custom controls separate logic from visual appearance

• Allows modifying visual appearance without changing underlying code

• Styles• Templates• “Control Contract” – parts and states

wintellect.comconsulting training design debugging

Parts and States

• Parts – named sections within the control

• States – change appearance based on context

wintellect.comconsulting training design debugging

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– ValidationStates

wintellect.comconsulting training design debugging

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 changes

wintellect.comconsulting training design debugging

States

<ControlTemplate TargetType="Button"> <Grid > <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /><VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="ButtonBrush“ Storyboard.TargetProperty="Color" To="Red" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.Background> <SolidColorBrush x:Name="ButtonBrush" Color="Green"/> </Grid.Background> </Grid></ControlTemplate>

Root Visual

Group

Default State

Storyboard & Animation

wintellect.comconsulting training design debugging

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 storyboard

wintellect.comconsulting training design debugging

Transitions

<VisualStateGroup.Transitions> <VisualTransition To="GreenState" GeneratedDuration="0:0:1“/> <VisualTransition From="GreenState" To="ShowState"> <Storyboard Duration="0:0:1"> <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" From="-80" To="-0"/> <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="-205" To="0"/> </Storyboard> </VisualTransition></VisualStateGroup.Transitions>

Uses State Storyboard

Uses Transition Storybard

wintellect.comconsulting training design debugging

DemoVisual State Explorer

wintellect.comconsulting training design debugging

Visual State Manager

• Manages all logic and transitions• GetVisualStateGroups – iterate all groups in

the control– Iterate states and transitions within the group– CurrentState, CurrentStateChanging,

CurrentStateChanged– Use state/transition to grab storyboard

• GoToState – transition control to the target state (swallows errors with missing state)

• Customizeable

wintellect.comconsulting training design debugging

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)); } }}

wintellect.comconsulting training design debugging

Visual State Manager

wintellect.comconsulting training design debugging

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 trigger

wintellect.comconsulting training design debugging

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>

wintellect.comconsulting training design debugging

DemoMVVM with Visual States

wintellect.com

Questions?

consulting training design debugging

Jeremy LiknessProject Manager, Senior Consultantjlikness@wintellect.com