Create Visual States in Blend 2015

Introduction

States Group

A state group contains any visual states 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's 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 the next step, your designer window will be open, you have to perform the 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, it will ask you the name of state group, name it, for instance VisualStateGroup.
3. There will be a base, show 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 toolbar 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 it's 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 to 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 the 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, change 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 time line 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 it 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 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 dropped 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 be open in this case which is our EndState, 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 helps you to understand the concept.