Unleashing Visual States in Expression Blend For VS 2013 (WPF, WP, Windows Store )

Expression Blend is a 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, Windows control, Page control, or control template can be in and then add behaviors or code to switch among 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 a 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's group.

States

Each of the State Groups contains a number of states we call Visual States. Each of the states define a new layout. One can change among various 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 among 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 the "Assets" tab , under behaviors.

Let's Practice it

In this tutorial let's start with the scenerio of writing a game for all of the platforms, including Windows Phone, Windows Store and WPF. We have various states in the game.

For example let's consider those states to be the following three:

Playing State
Paused State
Game Over State

We will try to make these 3 states and implement each of the states of the game as a Visual State under the same page and we will use the behavior for navigating from one state to another.

Let's get started.

Create a New Project

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

Start Up with State Group:

You will now be on the Main Windows Page. Here you will notice that on the top-left there will be a tab named "States". Just click that.

base

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

Let's Create some Visual States Now

Now I will click on the add button but now on the GameStates drop down. Since we have the following three states for our game:

GamePlaying
GamePaused
GameOver

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

game playing

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

Time to Record the Visual States

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

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

fire

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

resume

For the last state Game over, I will make it similar to the Paused State to keep it simple.

play again

So since 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 Elements / Controls are there but in the visual state only those that are visible that you have introduced to that state.

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

Navigating Between States

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

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

Under the Assets tab, you would find a behavior tab. Under the Behavior Tab you will see a behavior, GoToState.

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

go to state action

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

game over

I just dragged that behavior and dropped that onto 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 events available. After that I need to select the name of a State.

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

Now to Put in Some Transitions

We may add transitions between Visual States. You can provide the time span, in my case it is 0.3 Seconds. You may also apply Easing Functions (Bounce, Circle, Cube and so on).

default transition

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.

Let's Run the App

After applying all the procedures described above, let's run the application and let's see how it looks.

Conclusion

Visual States are really cool and can be really usefull when writing applications and games. Do try this tutorial and write some amazing applications. Do comment if you have a question.

game paused

Useful links:

Defining Visual States

Adding Animations to Visual States