electric beach

Christian Schormann

Wednesday, June 4, 2008

Visual State Manager for User Controls: A Simple Chord Finder Example

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:

ChordApp

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?

ChordAppOTree

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:

ChordAppBlend

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.

posted by cs at 01:34  

5 Comments

  1. [...] – Creating Control Skins with Visual State Manager – An Introduction (Make sure you see the video!) – Visual State Manager: Goals – Visual State Manager for User Controls: A Simple Chord Finder Example [...]

    Pingback by Visual State Manager, new feature of Expression Blend « Kok Chiann’s Blog — June 5, 2008 @ 01:18

  2. [...] 想进一步了解新的视觉状态管理器和控件模板编辑功能的话,请看一下 这里 和 这里的教程, 以及这里, 这里 和 这里的相关录像。 [...]

    Pingback by Silverlight 2 Beta2版发布了 - Joycode@Ab110.com — June 8, 2008 @ 11:57

  3. [...] Si queréis aprender más sobre esto, leed estos tutoriales aquí y aquí, y estos vídeos aquí, aquí y aqui. [...]

    Pingback by Spartan-Code» Blog Archive » Publicado Silverlight 2 Beta 2 — June 11, 2008 @ 16:49

  4. [...] Visual State Manager for User Controls: A Simple Chord Finder Example [...]

    Pingback by Pietro Brambati Blog : Silverlight 2 - risorse — July 1, 2008 @ 01:33

  5. [...] Visual State Manager for User Controls: A Simple Chord Finder Example [...]

    Pingback by Pietro Brambati Blog : Silverlight 2 – (alcune) risorse — July 3, 2008 @ 23:12

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress