Windows Phone From Scratch #9 – Visual State

When transitioning from one state (e.g., button up) to another (e.g., button pressed) the user expects and requires visual feedback.  Often this is provided with animation: the button appears to descend.  Creating this animation is greatly simplified by the Visual State Manager in Silverlight, and thus in Windows Phone 7. 

To see this in a simple demonstration, let’s return to the form created in the previous tutorial, Styles, and examine the OK button.  

In the heavily cropped image to the right, you can see that I’ve clicked on one of the RadioButtons and a red dot has appeared in the OK button, indicating that a value has changed and the current data is “dirty” (in need of saving).

When the user clicks the OK button, the red dot will turn green, indicating that the data has been saved.  (The initial state is for the dot to be invisible).

Extending the Button

Open the project from the previous tutorial in Expression Blend.  Begin by right clicking on the OK button and selecting Edit Template –> Edit A Copy.  Save the copy under the name ExtendedOK and save it to the application (rather than to the page) for maximum reuse. 

Click on the States window and you’ll see that there are two State groups: Common States and FocusStates.  The button must be in exactly one state for each state group.  Thus, a button may have the Focus and be Pressed, but it may not be both Pressed and Disabled. 

Let’s add a new state group: SavedStates, and within that group create two states: Dirty and Clean.  We’ll want the button to go to the dirty state when any data has been updated through the form and not yet saved, and to the clean state when changed data has been successfully saved.

Create the circle (one easy way is to double click the ellipse, then shrink the circle to 10 by 10 and place it inside the grid that houses the button (margins of right and bottom = 16, right and bottom aligned.)

Click on the Base state and set the opacity to zero.

Click on the Dirty state (and note that you are now recording) and open the timeline. At 1/2 second, set the opacity to 100% and set the color to red (#FFFF0000).

Next click on the clean state and again at 1/2 second set the opacity to 100% and set the color to Green (#FF0000FF). 

Stop recording state and let’s teach the button how to transition to Dirty or Clean. 

Coding the State Transition

Save all the files and open the project in Visual Studio.  Our job now is to manage the conditions that cause a visual state transition on the button.  We’ll have it move to the dirty state when either of the RadioButtons are clicked (in a full application we’d do this when any two-way bound data is changed).

Add event handlers for the two RadioButtons:

Male.Click += RadioButtonClick;
Female.Click += RadioButtonClick;

and in the shared event handler, use the Static GoToState method of the Visual State Manager to go to the Dirty state on the OK button.

void RadioButtonClick( object sender, RoutedEventArgs e )
{
   VisualStateManager.GoToState( OK, "Dirty", true );
}

Finally, add an event handler for the OK button that will set the visual state to clean,

void OKButtonClick( object sender, RoutedEventArgs e )
{
   VisualStateManager.GoToState( OK, "Clean", true );
}

(don’t forget to wire up the event handler to the click even of the OK button).

Run this and you’ll find that clicking on the Male or Female RadioButton causes the red dot to appear, and clicking the OK button causes that dot to turn green.

There is of course a good deal more to the Visual State Manager and the many ways in which it can be used, but this is a good starting point for further exploration.

I’ll return to the Visual State Manager in upcoming tutorials.