Visual State Manager

The Visual State Manager allows us to define different states for our controls. Most controls in Silverlight already use this technology and we can change them editing their template. The best example is the button, the next picture shows its different VisualStateGroups and its VisualStates in Blend.

VSM its a big topic and I will get to it in better detail in another topic, but for now consider it as the way to decouple behavior and design. The creator of the control would typically define the states and its transitions in response to certain events, for example, when the mouse is over the programmer will change the state to MouseOver. The designer can use blend to change the look of each state and define transitions (animations) between them. To start with, you would typically change the defined states of some other people's controls, once you start doing your own controls you might want to expose States, to change between them in response to events, simply use the following method:

VisualStateManager.GoToState(myControl, "myNewState", true);

It's not available for WPF yet, but it will in a next update (probably in SP1).

For a complete tutorial go to http://www.nibblestutorials.net/ and look for the new Blend 2.5 tutorials or check this webpage for an example on how to change a button style for the MouseOver state.

Blogger Tags: Silverlight Tip of The Day