Investigation of VSM (Visual State Manager)

Hi all,

Recently at work I have been spending a lot of time investigating Visual State Manager (VSM). VSM is so powerful in what it can allow you to do and if you know how to use it, you can create a lot of cool WPF effects like those fancy animations in controls and stuff.

So what is VSM?

Simply put, its a state manager, and it has the ability to keep track of the object component state. Think of it as a state machine and your control has all these defined states like MouseOver or IsPressed etc.

VSM main core areas are:
Encapsulation of control state information into a visual representation
The concept of transactions or as I like to call them similar to State Machine methodology a transitions. In these transitions, you can define them in a predefined way, or the change from one state to another state.

Further it allows a control template designer to define the parts and the states of a control. Microsoft Blend for example in the XAML it writes makes significant use of the VSM of each control.

So I got all these states. How are these things organized?

Well each of the controls states are organized into mutually exclusive state groups. For example a button has the state groups of CommonStates and FocusStates.

In CommonStates, the button uses the states of Normal, MouseOver, Pressed and Disabled.
In FocusStates the button can either be Focused or Unfocused.

For further reference material about the state groups, look into the MSDN documentation as they provide really good definition of this.

VSM originally came from Silverlight and has now been heavily brought into WPF 4. The concept of defining the states transition behavior is what is new in WPF 4.

Going forward, it seems that if you want to design a control for both Silverlight, Windows Phone and WPF, one should really take a closer look at learning about the Visual State Manager.

In my next post, I will provide an example of how to do this (tried with Blogger but it tried to convert my XAML to HTML 5)

All the Best,


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s