Share via

Blend 2015: Create Visual States

  • Article

 

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 lets begin .

 

Blend 2015

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

https://zainnisar237.files.wordpress.com/2015/11/16.png?w=700

 

Select Template.

Select your desired template , in this case ,perform 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.

 

https://zainnisar237.files.wordpress.com/2015/11/22.png?w=700

 

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 show 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.

 

https://zainnisar237.files.wordpress.com/2015/11/34.png?w=700

 

 

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.

 

https://zainnisar237.files.wordpress.com/2015/11/42.png?w=700

 

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 to for instance SecondButton.
  3. You can see that State recording is on.

 

https://zainnisar237.files.wordpress.com/2015/11/52.png?w=700

 

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 ,change text to Thank you.
  5. State recording is on.

 

https://zainnisar237.files.wordpress.com/2015/11/61.png?w=700

 

Adding Behavior

In the next phase you will dd 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)

 

https://zainnisar237.files.wordpress.com/2015/11/73.png?w=700

 

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.

 

https://zainnisar237.files.wordpress.com/2015/11/81.png?w=700

 

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.

 

https://zainnisar237.files.wordpress.com/2015/11/92.png?w=700

 

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.

 

https://zainnisar237.files.wordpress.com/2015/11/101.png?w=700

 

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.

 

https://zainnisar237.files.wordpress.com/2015/11/114.png?w=700

 

Final State

 

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

 

https://zainnisar237.files.wordpress.com/2015/11/122.png?w=700

 

Run your Application

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

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

https://zainnisar237.files.wordpress.com/2015/11/133.png?w=700

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

https://zainnisar237.files.wordpress.com/2015/11/141.png?w=700

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

https://zainnisar237.files.wordpress.com/2015/11/151.png?w=700