This mini-tutorial will build on the work done yesterday, and will demonstrate how to return to the default visual state for a given state group.
Suppose that instead of having a red dot that indicates that there is data to update and a green dot that indicates that the data has been saved, your specification calls for a red dot to appear when data needs to be updated and to disappear when that data is saved.
The visual state of having the dot invisible is identical to the base state, but you cannot invoke the base state directly (and that is because there is one base state for all the visual state groups.
You can however, have a default state for each of your state groups, and creating this is dead simple.
First, return to Expression Blend and edit the Extended Button resource. One way to do 
this is to click on the Resources tab, then to click on the Extended Button. This will open the Button in the styles editor. Click and open the Edit Template menu and select Edit Current as shown in the (cropped) illustration.
[Click on image to see full size]
Add a new state called DefaultSavedState but do not save any values; click on the red dot to turn off recording. This Default Saved State will return your button to the base with regard to the SavedStates group of states.
The only other change you need make is to modify OKButtonClick in MainPage.xaml.cs,
void OKButtonClick( object sender, RoutedEventArgs e )
{
VisualStateManager.GoToState( OK, "DefaultSavedState", true );
}
Run the application and you’ll see that clicking Male or Female lights the red dot, and clicking the OK button makes the dot disappear.
