Unleashing Visual States in Expression Blend for VS 2013 (WPF, WP, WinStore)

Article
1/17/2024

Expression Blend is really awesome tool for creating Visual States. You can create interactivity in your application by defining a different visual appearance for each visual state that your UserControl control, Window control, Page control, or control template can be in, and then adding behaviors or code to switch between those states based on user interaction. You can modify the transition between two state combinations, even creating animations that will run when a state is first entered.

There are few terms that need to be understood before we go through the tutorial for Visual States in Expression Blend.

State Groups:

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

States:

Each of the State Groups contains number of states we call Visual States. Each of the state defines a new layout. One can change between different states dynamically using a behavior of a function/method.

Transition between States:

You can extend the amount of time that it takes to transition between states when a state change occurs. You can set the transition duration for an entire state group, or for the transitions that occur between specific combinations of states.

In State Animation:

You can add animation to a state that will play after the control transitions to that state.

Note:

We may use GoToState behavior for moving from one Visual State to the other. GoToState is available under "Assets" tab , under behaviors

Lets Practice it

In this tutorial lets start with a scenario that we have are writing a game for any of the platform from Windows Phone , Store or WPF. We have different states in game.

For example lets consider those states to be three,

Playing State
Paused State
Game Over State

We would try making these 3 of the states and would implement each of the state of the game as a Visual State under same page and we would use behavior for navigation form one state to other.

lets get started,

Create New Project:

Open Up Expression Blend for Visual Studio and create a new project for WPF.

Start Up with State Group:

You would be now on the Main Windows Page, Here you would notice that there are on the left top. There would be a tab named "States". Just Click that.

http://4.bp.blogspot.com/-lc9B5YM5t0k/VHzUEXUXZRI/AAAAAAAAFPY/S6x1J4ycnFA/s1600/VS1.PNG

This would be the tab you would see, As you see here that the states tab would be having "Base" only in starting. By the button above I would create group states and would name them "Game States". As I have done this I would see a GameStates StateGroup. In this group I may create as many Visual Stats I want. Lets create some.

Lets Create some Visual States Now:

Now I would click on the add button but now on the GameStates drop down. As we have three states for our game ,

GamePlaying
GamePaused
GameOver

I would create three visual states and would name them accordingly.

http://2.bp.blogspot.com/-P-2Z2vxveXM/VHzUIFRYylI/AAAAAAAAFQU/DofmpdzVUVY/s1600/vs.PNG

When you would click on any of the visual state, recording for that state would be ON.

Time to Record the Visual States

Now lets start recording each of the state. By clicking on each of the state you would be able to introduce some UI Elements in that state. The UI Elements are available across page but in a Visual State only those UI Elements would be visible the one you introduce in that very Visual State. Visual States really make the task easy, else creating, else putting controls and then setting Visibility of each of the control at different times could have been hectic.

For GamePlaying state , I would just introduce two button UI Elements and a TextBlock for displaying the text.

http://3.bp.blogspot.com/-jwf9hpnfgOM/VHzUD0j9z5I/AAAAAAAAFPA/y9PlwAaeCZ4/s1600/Game%2BPlaying.PNG

Now for recording next Visual State I would click on GamePaused state. On that state I would introduce a TextBlock that display that game has been paused. I would also introduce a Button UIElement to go back to the Playing state.

http://3.bp.blogspot.com/-ro5_Quh0W1M/VHzUGBRR-NI/AAAAAAAAFPs/vGdL4EV7VfM/s1600/gamepaused.PNG

For The last state Game over, I would make it similar to the Paused State for keeping it simple

http://3.bp.blogspot.com/-_F_tFvrajnM/VHzUHLRw_zI/AAAAAAAAFQM/357JPoDbMjQ/s1600/gotoactionproperties.PNG

So as we are done with our states , here is one really important thing to notice,

In the Objects and Timeline you would notice that all UI Element / Controls are there but in the visual state only those are visible that you have introduced to that state.

*
*

To stop recording and to go to the default state click on "Base" under states tab.

*
*

Navigating Between States:

Now as we have created Visual States we just need to learn how we can navigate from one visual state to the other. For this purpose, we would take help from behaviors.

GoToState is a behavior we would use to move from one state to the other, lets try it.

Under the Assets tab, you would find a behavior tab. Under Behavior Tab you wold see a behavior i.e. GoToState .

To use that you just need to drag that and drop it on a button or any of the UI Element. It might be a canvas , grid , button or any of the available UI Element. You can drag the behavior to the Designer view as well as if you seek difficulty in doing that, you might use Objects and Timeline to drop the behavior.

http://3.bp.blogspot.com/-qUNZBMzHdQc/VHzUHbsbBWI/AAAAAAAAFQE/90TTlmq3VTs/s1600/gotoactionstate.PNG

In the image about you see that under behavior you can see "GoToState" Action behavior.

http://3.bp.blogspot.com/-_F_tFvrajnM/VHzUHLRw_zI/AAAAAAAAFQM/357JPoDbMjQ/s1600/gotoactionproperties.PNG

I just dragged that behavior and dropped that on my button. Now I may see the properties of that action. I can set a EventName that might be a Click event , Loaded , Mouse even or any of the event available. After that I have to select the name of State.

As I don't have a default state , so for that I have used GoToState behavior and dropped that on Grid and use Loaded Event so that when application is Loaded , GameOver state appears.

*
*

Time to Put in Some Transitions:

We may add transition between Visual States, You can give the time span in my case it is 0.3 Sec. You may also apply Easing Functions (Bounce , Circle , Cube etc)

http://2.bp.blogspot.com/-aPd6J1eKUzk/VHzUF9HHUOI/AAAAAAAAFPk/-swdYtltzuE/s1600/easingfunction%2Band%2Btransitions%2Bbetweenstates.PNG

When you set a default transition, it applies to the complete StateGroup and applies to all visual states under that.

You may also apply transitions to individual states as well.

*
*

Lets Run the App

After applying all the procedure described above, lets run the application and lets see how it looks like.

Conclusion

Visual States are really cool and can be really use able while writing applications and games. Do try this tutorial and write some amazing applications. Do comment under if you have any question.

http://4.bp.blogspot.com/-sFX5-tQiz74/VHzUHt4i4mI/AAAAAAAAFQA/DrP3G0R10vg/s1600/play1.PNG

http://1.bp.blogspot.com/-x7baZhA0TWs/VHzUH90Yc3I/AAAAAAAAFQI/8Zaa_MFoZPA/s1600/play2.PNG

Share via