Tim Van Wassenhove

A while ago i presented the ControlStateMachine and in Silverlight this concept is implemented as the Visual State Manager.

In my sokoban implementation i have a cellview which exists out of 6 canvasses but only two of them (one for the cell type and one for the piece type) are visible at any given point in time. I have implemented this with 6 properties CanvasXVisible (with X being Player, Box, Wall, Goal, Floor and Cell) in my ViewModel but a State Machine / Manager may help clarify how the visibility of the canvasses are related. Here are the 2 visual state groups and their states that i would need for the CellView:

As you can see there is quite a lof of XAML involved to make the correct canvas visible:

 <storyboard>
  <objectAnimationUsingKeyFrames BeginTime="00:00:00"  Duration="00:00:00.0010000"
   Storyboard.TargetName="Space"  Storyboard.TargetProperty="(UIElement.Visibility)">
    <discreteObjectKeyFrame KeyTime="00:00:00">
     <discreteObjectKeyFrame.Value>
      <visibility>Visible</visibility>
     </discreteObjectKeyFrame.Value>
    </discreteObjectKeyFrame>
   </objectAnimationUsingKeyFrames>
  </storyboard>
</visualState>

For a simple modification to the Visibility property this seems like overkill but in many situations you will want to change more than this one property.

With the aid of the behaviors that come with Blend i can quickly add a couple of radio buttons, toss in some gotostate actions and end up with an interactive application:

 <i:Interaction.Triggers>
  <i:EventTrigger EventName="Checked">
   <ic:GoToStateAction StateName="Wall1"/>
  </i:EventTrigger>
 </i:Interaction.Triggers>
</radioButton>

Feel free to try it yourself by changing the radio buttons: