Create Visual States In Blend 2015

States Group

A state group contains any visual state that are part of the same logical category, and that cannot be displayed at the same time. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.

Steps to Create Visual States in Blend 2015

We will create a  simple example of visual states in Blend 2015, so let us begin .

Blend 2015

Activate your Microsoft Blend for Visual Studio 2015 and create a new project there.

Select Template

Select your desired template, in this case perform the following actions.

1. Select Universal as shown in circle.
2. Select Blank App as shown in circle.
3. Name your solution, for instance Visual_States.

Designer Window

In next step , your designer window will be open , you have to perform following actions in the window.

1. Select States, shown in circle.
2. Click  add new state, a plus sign shown in red circle. When you click, it will ask you the name of state group, name it, for instance VisualStateGroup
3. There will be a base shown by arrow.

Add state in State Group

Now after you create a state group you have to add some states in that particular group, so here you go.

1. After creating a state group and naming it VisualStateGroup, now click the plus sign as shown by arrow in order to add a new state and name it, for instance, StartState.
2. Drag and drop the button from the tool bar shown by arrow to your designer window.
3. Change content of button to Start Button, from properties window shown by arrow.
4. You can see that state recording is on as shown by red circle on screen.

Second State in State Group

Once you add a first state by following the guidelines mentioned above now its time to add a second state in the same state group. Steps are simple and easy all you have to do is,

1. Click the plus sign, shown in circle in front of VisualStateGroup to add another state, name it MiddleState.
2. Drag button from your tool bar and drop to your designer window, change its content. For instance, SecondButton.
3. You can see that State recording is on.

Adding New State

You can add as many states as you can, but here I am adding last and final state. Steps of adding a state into state group is same but again here you go.

1. Select the plus sign shown in red circle.
2. Name your state, for instance, EndState.
3. Drag the button and drop on designer window, change content to EndButton.
4. Drag the TextBlock and drop on your designer window; hange text to Thank you.
5. State recording is on.

Adding Behavior

In the next phase you will add behavior in your state group, follow the below mentioned guidelines.

1. Select Assets , shown in red circle. Behaviors will open .
2. Select Behaviors and select go to state action.
3. Drag go to state action and drop it to objects and timeline window.

(Hint, image will help you out)

Event Trigger Behavior

Once you drag and drop the go to state action, you can see that there is Event Trigger Behavior, right above it. Select and change its event name to Loaded.

Go to State Action

Now again select your Go to State Action  and change the name of state in NameState shown by arrow. You can select any state you create in your state group, for instance, now I will select StartState.

Selecting Another State

Now after completing the above task it will lead you to our StartState, it will show you the button we drag and dropped, Start Button and also ask you about the state you want to go when you press that button. Shown by arrow the StateName is there, select your desired state, for instance, MiddleState…so when you press the Start Button, it will lead you to MiddleState now.

Transition

When you are done, you can see on your screen that our MiddleState is open, showing us that button we drag and drop and changed its content to SecondButton. Now again select the state you wish to process from current state by simply selecting the StateName, for instance, EndState.

Final State

Our final state, last state where we complete this transition will open in this case which is our EndState. By simply following the above step we will select this time our FirstState, so when you press EndButton it will lead you to FirstState.

Run your Application

Now run your application and if everything is ok, it will give you the following results.

• FirstState (By pressing the button it will lead you to MiddleState).
  
  
• MiddleState(By pressing the button it will lead you to EndState).
  
  
  
  
• EndState (By pressing the button it will lead you to FirstState).
  
  

Overview

Hopefully this simple example will give an idea about how to create state group and add various states in that state group and select various transitions among the states in state group.