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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie Visual State Manager

Ähnlich wie Visual State Manager (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Visual State Manager