Wahlin on .NET

Using the Visual State Manager in Silverlight Templates

Expression Blend 2 lets you add different effects to your Silverlight apps and enhance users' experience -- and with less code than you might think. All you need is Visual State Manager.

• By Dan Wahlin
• 01/08/2009

Figure 1 shows an example of a standard Silverlight 2 Button control with a custom template applied. The template applied to the Button uses a Border control and ContentPresenter to change the overall look and feel. Listing 1 shows the XAML code for the template.

Although the template applies the desired rounded-corners effect to the Button, there's no user interaction included -- making for a poor end user experience. If users click the button, they won't see any visual indication that they've done so, which may lead them to click it multiple times just to make sure it worked.

To remedy this problem, you can write custom code for the Button and handle mouse, focus and click events. But there's an easier way that involves much less code, especially if you have access to Expression Blend 2 SP1.

Silverlight 2 provides a Visual State Manager (or VSM) that manages different states as users interact with controls. For example, you might want to change the background of the Button as the user mouses over it to make it look slightly bigger or smaller when a user clicks it. All of this can be done using the Visual State Manager either in code or in Blend 2. This column will walk through using Blend 2 and show how custom templates and VSM states can be created visually.

The easiest way to get started creating styles and templates is to open Expression Blend 2 SP1 and add a Button control onto the design surface. Next, right-click the Button control and select Edit Control Parts (Template) --> Edit a Copy. You'll be prompted with the Create Style Resource dialog, as shown in Figure 2.

Enter a name for the style (the style's key), select where the style will be stored and select what control the style targets from the drop-down list. Once the style resource is created, you'll see all of the parts that make up the Button control in the Objects and Timeline window (Figure 3).

To create a flat, rounded button (as shown earlier in Figure 1), delete the Background (and all associated child parts), as well as the DisabledVisualElement and FocusVisualElement parts. These parts are only being deleted so that we can work with a simple control template similar to the XAML code shown earlier. You can always customize the existing parts to your satisfaction as opposed to deleting them.

Once you've deleted the parts, drag a Border control from the Asset Library and add it as a child of the Grid in the Objects and Timeline window. Drag the contentPresenter onto the Border control so that it becomes a child, as shown in Figure 4.

Select the contentPresenter in the Objects and Timeline window and switch to the Properties window located in the upper-right corner of the Blend 2 interface. You should see all of the properties available for the contentPresenter. Change the HorizontalAlignment property to Center and the VerticalAlignment property to Center. Next, highlight the Border control and perform the following steps:

1. Change the Background color to light gray in the Properties window.
2. Change the BorderBrush property to black.
3. Change the BorderThickness property to 1.
4. Change the CornerRadius property to a value of 10.

Your Button control template should look similar to Figure 5 at this point.

Save your work and press F5 to test out the control template. Although the Button control is now rounded, you'll notice right away that it provides no state management. When you interact with the Button control, nothing happens.

To add some interaction capabilities or "states," locate the States window in Blend 2. You'll see several different control states defined as shown in Figure 6. These states were defined in the original Button control template and copied to the current style you're working on. At this point they don't do anything because you deleted all of the parts they interacted with.

Click the MouseOver state to select it. Highlight the Border control in the Objects and Timeline window and change the Background property to light blue in the Properties window. Highlight the Pressed state and change the Border's Background to light red. Scroll down in the Properties window and locate the Transform section. Click on the Scale tab (mouse over each tab to see what it represents) and change the X value to 0.9 and the Y value to 0.9.

Press F5 to run the application again and you'll see that you can now interact with the Button (see Figure 7). Although this isn't the nicest interaction you've probably seen, it does demonstrate the power and simplicity of the Visual State Manager.

By changing the different Button control states visually, Blend 2 automatically creates the appropriate XAML used by the Visual State Manager to change the Button's state based on end user actions. The complete style including the code for the VisualStateManager element is shown in Listing 2. Notice that the MouseOver and Pressed states have Storyboard and animation elements defined.

Although the example shown here isn't flashy and has been over-simplified, it should give you a feel for what can be done with control templates and the Visual State Manager. By using the VSM, you can add many different effects into your Silverlight 2 applications.