If you have used WPF, you will be familiar with the concept of Triggers, a mechanism that allows for properties to be changed in reaction to some activity or state. Silverlight 2 takes a different approach and uses States. In this context, the State of an element represents its look at a specified time. The 'specified time' is defined by some form of action (or, to be totally accurate, inaction). As a simple example, the mouse entering the surface area of the element is an action for which you can define a State. Inaction can be thought of as the 'Normal' State - that is, the default look of the element, not accessed in any way by the user.
The Visual State Manager (VSM) is a Class that allows you to create, edit and use States. Without doubt, the easiest way of dealing with the VSM is by using Expression Blend. It is of course possible to create everything by hand in Visual Studio. At the time of writing, when Silverlight 2 and Visual Studio 2008 are the latest RTM versions, unless you have a lot of experience with XAML, I don't recommend that approach. If you don't have Expression Blend, you can download a 30 Day trial copy from here. The rest of this article assumes that you have access to Expression Blend 2 and any version of Visual Studio 2008, including the free Express Edition.
Setting States on a Button
As this is a fairly easy way of introducing the tools and the concept the first control we will use is the button. Here are the steps:
- Run Microsoft Expression Blend 2.
- Choose the "New Project" option.
- Name the Project 'ButtonVSM'.
- Select your preferred choice of code-behind language (Visual Basic or Visual C#)
- Click on the Silverlight 2 Project icon.
- Click OK.
The next stage is to drag a button on to the Artboard.
- Click on the Button icon in the Toolbar (Second from bottom).
- Left mouse click and drag on the Artboard to create a button.
In the main Expression Blend screen you will see the Interaction pane. On the left hand side of this pane is the information on States. You might expect that if you have the button selected that its States (if there are any) would now be displayed. If you try this, you will find that this is not the case and the list of States remains bewilderingly empty. The reason is that the States are part of the Control Template, and so you need to access the button's Control Template in order to get to the States.
All you need to do is:
- Right click on the button on the Artboard.
- Select Edit Control Parts(Template).
- Select Edit a Copy.
- Accept the default Name.
- Accept the default 'Define In' location.
- Press OK.
A couple of things happen once you have pressed OK.
One of them is very obvious - the list of States for the button are now visible in the Interaction/States pane. The second one is not quite so obvious - In the Objects and Timeline pane, the UserControl tree has been replaced by the Control Template tree for this button object.
Dealing with the States first, try left clicking on each of the four Common States in turn. You will see slight changes to the background color of the button, depending on which particular State you have chosen.
As soon as you clicked on the first State, the 'State Recording in On' message appears above the Artboard. This means that you are now able to change the look of the button when it is in one or other of the States. As an experiment, we will change the size of the button when the mouse moves on to it - that is, when the MouseOver State exists.
- Select the 'MouseOver' State in the States list.
- Very Important: Select the 'grid' element in the Objects and Timeline list. By default this will often be set on 'FocusVisualElement'.
- You can check that the grid is the selected item as it will have a light yellow border around it.
- With the grid selected, go to the Properties pane in the main Blend window.
- As a double check, you will see the Name property is 'grid' and Type is 'Grid'.
- Scroll down the Properties pane until you reach 'Transform'.
- Select the ScaleTransform icon (an arrow coming out of a square).
- Change the value of X to 1.05.
- Change the value of Y to 1.05.
- Press ENTER.
In the Interaction/Objects and Timeline pane, note the appearance of some arrows in red circles. If necessary click on these arrows so that you can see the detailed list.
To preview your change, select the various States in the States list and see the appearance on the Artboard. To test your changes in action, press F5 to run the project. When you move the mouse over the button, it will increase in size by 5%. It will return to its normal size when you move the mouse off the button. You will see that the size change is immediate. There is however an easy way of turning this into a smoother transition