Visual State Manager

Silverlight’s Visual State Manager

Jeremy Likness
Project Manager, Senior Consultant
jlikness@wintellect.com
Copyright © 2011

consulting training design debugging wintellect.com

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 Production


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 States


XAML
• Extensible Application Markup Language
• Declarative:
– Initialize objects
– Set properties of objects
• Object graph
• Behaviors
• Triggers
• Data-binding – clean separation of UI layer


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 Converter


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


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


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 value


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


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>


“Lookless” Controls

• Custom controls separate logic from visual
appearance
• Allows modifying visual appearance without
changing underlying code
• Styles
• Templates
• “Control Contract” – parts and states


Parts and States

• Parts – named sections within the control

• States – change appearance based on
context


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


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


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>


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

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>


Demo
Visual State Explorer


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)
• Customizeable


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


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


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>


Demo
MVVM with Visual States


Questions?

Jeremy Likness
Project Manager, Senior Consultant
jlikness@wintellect.com


Visual State Manager

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (14)

Similar a Visual State Manager

Similar a Visual State Manager (20)

Último

Último (20)

Visual State Manager