Here an admittedly slightly contrived example for the use of visual state manager in a user control. Imagine a little web app to show Guitar chords:

When you enter a chord symbol in the chord box at the bottom, the corresponding finger settings are displayed on the fret board above.

How does it work?

For every fret and every string, there is one ellipse. The picture at the left shows the finger positions for the first fret. The whole fingerboard layout was done in Blend with a few layout managers in a couple of minutes.

By default, all the little circles where hidden (visibility property in the property inspector set to “collapsed”).

Next step, I added a state group called Chords and a few states to the StateExplorer:

I kept it really simple and just created one state each for a few of the most basic chords, C, D, G, and so on. Then I just selected one of the states and made the right little finger mark circles visible for the right fret. The screen shot above shows the artboard while editing the state for a D major chord.

Finally, all I needed was a simple event handler to change the state of the control when the text in the entry box is changed:

void ChordEntry_TextChanged(object sender,
                                             TextChangedEventArgs e)
{
     VisualStateManager.GoToState(this, ChordEntry.Text, true);
}

And that is all that is to it.

If you enter a chord symbol that exists in the box, visual state manager will happily jump to the right visual state and show the chord that matches the symbol. If you type something that does not have a corresponding state (for example Asus4), visual state manager simply does nothing.

A real world chord finder would of course be driven from a data base of chord fingerings – that why the example is a bit contrived. But it does show that visual states can be used for all kind of fun things, and make it dead easy to play with stateful user controls, with minimal code.

Try it here. The only chords I did are C, G, D, am and dm, by the way. Input is case sensitive.