Visual states define how a control looks in certain situations. Try to think about the default Silverlight Button control. Whenever you hover over it, it changes color. This change is an example of state, hover state in that case. The default look of a control represents its normal state. But in most cases, your control will have more than a single state. To help you manage these states, Silverlight provides you with the VisualStateManager element. This element manages the states and the transition between them. A state doesn't have to be a change of color. It can be used to change an object size, border or even to transform it using one of the transformations we discussed earlier.

Each state is identified by its Name and GroupName properties. GroupName defines the group of which the state belongs to. A question that often rises up at this point is why do I need to group states? Can't I just create a big group of states and put them all in there? The answer is "No".

Let's think about the Button control for a second. The button has many states—clicked, hover, focused, out of focus, and so on. A button can also be in more than one state at a time. When you click a button, you also have it in focus. The only way a button can be in more than one state at a time is if these states belong to different groups. This is the only way a button can show its clicked and focused states together.

Now, moving from one state straight to another, one would look unnatural and weird. This is why we have transitions. Transitions are represented by storyboards and allow you to 'smooth' things over between the states. Above all those, we have VisualStateManager that controls the states and their transitions.

Creating states and their transitions is done in Expression Blend 4. Let's create a new Silverlight 4 project in Visual Studio 2010 and name it Chapter3-VisualState. We will use this project now to demonstrate the use of VisualStateManager. Once the project is created, right-click on MainPage.xaml and select Edit in Expression Blend....

Once in Blend, add a rectangle to the MainPage.xaml file and use some fill for its background. We will use a visual state to transition the fill. In Blend's upper-left corner, you can find the States tab. Click on it to switch to the state manager:

This is the main management area for States. Before we can create a state, we need to create a group to hold it. Click on the "add state group" button (pictured in the preceding screenshot at the bottom-right end of the image). Name the new group as MyNewStateGroup and change its Default transition time to 0.5s. Your state should look similar to the following screenshot:

You've now created your first state group. As you noticed, we have given the group a 0.5s of Default transition. That means that every state we have under this group will use this transition time when transited over.

Now let's create the individual states. We are going to have two states—Normal and LeftButton. Click on the "add state" button, located at the right end of the group name area. Name the new state as Normal. Now, click on the "add state" button again and name the new state as LeftButton. Once you create a new state, you may notice your screen has a red border around it. That means the state is recording your changes. Change the background of your rectangle to any other color. Once done, click on Base, located at the top part of the screen. You now have two states. To transition between them, we can use a behavior called GoToState. Just like before, click on the Assets button, select Behaviors, and drag the GoToState behavior to your rectangle. Leave the trigger on MouseLeftButtonDown and change the state to LeftButton. Your behavior settings area should look as follows:

Build and run your application, and you should see how the rectangle changes the states with a 0.5s transition.

Just like animations, you can use easing for a more natural transition between states. Next to Default transition settings, where you set the default transition time, you have the EasingFunction button. Click on it to choose an easing function for your transition.

Sometimes, you may need more control over your transitions and for that you can use the VisualStateManager object in your code behind. To demonstrate this object, switch back to Visual Studio 2010 and add a button to your MainPage.xaml file. Double-click on it to set its Click event hander. Add the following line of code to your Click event handler:

VisualStateManager.GoToState(this, "LeftButton", true);

By using the VisualStateManager object, we can get an object states group or go to a specific state by using the GoToState method as demonstrated previously. Run your application now, and you'll see that clicking the button also changes the state of the rectangle.

Play around with states and their transitioning. This is one of the most fun features Silverlight has to offer.