Tutorial ( WP7 ) : ViewStateManger / States / Behaviours in a Windows Phone 7

Alright guys i am back with a new concept in Windows Phone 7 ( WP7 ) which is ViewStateManager. It is a really important concept for understanding visual states associated with them. If you want to create different states for your custom control then we would have to use Visual State Manager.

If you have the solution from my previous post then you can continue with it or you can download the solution here.

We will a few custom states and also learn about behaviours in this post.

  •  Now open CompanyLocations.xaml in expression blend. Drag four TextBlock controls onto the design surface, two for the headers and two for the details and then lay them out similar to the following snapshot.
Location Details

Location Details

  • Lets add a little more fun to this. Add two more textblock rotated at 90 degree and move the location details of the screen and also increase the font size of the headings as in the image below.
Text Rotation

Text Rotation

  • Now let’s go to the top left of expression blend where we have states and lets create new state group. Click on the Add State Group button and name the state group as LocationStates. Now add two new states namely CorporateState and SatalliteState. Now your state group should look something loke the screenshot below:

  • Now select CorporateState to start recording for that state which you can verify by seeing the red dot at the top right of the design surface. Now this will record any changes to the state as compared to the base state. Layout the CorporateState as shown in the image below:

 

CorporateState

CorporateState

  •  Layout for the SatelliteState is shown below:
SatelliteState

SatelliteState

  • Now lets switch back to the initial state and that any changes we make will affect all the states.
  • Now lets include behavior to bind these states to action. So now in your assets window search for GoToStateAction and drag and drop it to both the CorporateOffice and SatelliteOffice text.
GoToStateAction

GoToStateAction

  •  Now change the name to the GoToStateAction to the appropriate statename.