Upload
jeremy-likness
View
1.633
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Learn everything you need to know about Silverlight's Visual State Manager.
Citation preview
wintellect.comconsulting training design debugging
Silverlight’s Visual State Manager
Jeremy LiknessProject Manager, Senior [email protected] 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 [email protected]