This document discusses Silverlight's Visual State Manager. It begins with an agenda that covers topics like XAML, dependency properties, coercion, storyboards, lookless controls, parts and states, groups, transitions, and demos of the Visual State Explorer and using visual states with MVVM. It then dives into explanations of these concepts, providing examples of how to define states, transitions, and use the Visual State Manager to change control appearance based on context.
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 Production
consulting 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 States
consulting 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 layer
consulting 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 Converter
consulting 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-binding
consulting 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 value
consulting 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, Object
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 states
consulting training design debugging wintellect.com
12. Parts and States
• Parts – named sections within the control
• States – change appearance based on
context
consulting 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
– ValidationStates
consulting 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 changes
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
storyboard
consulting training design debugging wintellect.com
18. Demo
Visual State Explorer
consulting 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)
• Customizeable
consulting 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
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 trigger
consulting training design debugging wintellect.com