VisualStateManager object is a link between business logic of a control element and its external representation. To connect VisualStateManager to a template of a control element it is necessary to define an attached property of VisualStateGroups. Within this property it is necessary to describe all states and transitions, and change the display of a control element appearance depending on a state. It is necessary to do it within business logic of a control element to change these states actually. Usage of GoToState method helps to do it. The name of the state is passed as parameters of this method. The state is set as a usual text line. It is possible to define a unique set of states for each control. Also, this method contains the third parameter "useTransitions"  which indicates whether it is necessary to use "Transitions" going to this state.

Figure 1: VisualStateManager's parts

So, as a result of GoToState method call, a necessary template is applied in a template of a control element. Good news is that calls of GoToState method have already been built in standard control element (such as Button, ListBox, ListBoxItem, etc.). It means that it is possible to use advantages of VisualStateManager for existing standard controls right now.

To add VisualStateManager object to a template of a control element it is necessary to use attached property VisualStateGroups. In this case it is possible to set some groups to visualize states and define sets of states for each group. Each visual state contains Storybaord which allows us to set animation jumping to the given state. If there is no need in animation during such jumps, then objects with animation based on fixed TimeLine should be used. So, a control element template structure could be presented as the following.

Figure 2: Structure of template at use VisualStateManager