As you have seen, some elements - such as buttons - will offer you a preset list of States as soon as you begin to edit the ControlTemplate. But if you create your own user control and want to have state changes affect the visuals, then you have to do a little more work yourself.
For our example, we will use a Rectangle element. Start a new Silverlight2 Application project in Expression Blend and drag a Rectangle on to the Artboard. Right-click on the Rectangle. You may expect to see the 'Edit ControlTemplate' menu choices you had for the button, but of course a Rectangle is a simple shape element and not a control, so you don't have this option.
However, this isn't a problem and the approach we take is slightly different. First, go to the States list in the Interaction pane. Select the 'Add state group' icon - see the screenshot:
By default a new state group will be created and named 'VisualStateGroup'.
Overwrite this name with a more meaningful one, such as 'MouseStates'.
Click on the 'Add state' icon next to the 'MouseStates' group:
Overwrite the default name of 'VisualState' with the word 'Normal'. Add a second State and name this one 'MouseEnters'*. You will see that State recording has been turned on, so change the look of the Rectangle in some way while it is in the MouseEnters State. For my example, I have simply changed its color. You can of course make other changes, such as size, rotation and so on, if you want to.
*Note: If you are curious why I don't use the more natural 'MouseEnter', the reason is that it would cause a naming collision when you start to work on the code.
Next, click on the Add Transition icon next to the MouseEnters State. Select the '*->MouseEnters' option. Change the Transition duration to 0.2s.
Press F5 to run the project. Move the mouse over the Rectangle once the browser fires up and loads the Silverlight application.
If you tried this, you may think something has gone wrong, because you don't get the color change you created in the States list. The key difference between what we are doing here and the earlier button example is that you have to wire up the States in code yourself. I encouraged you to try running it now and see it fail so that you will remember what you have to do when you try creating these kind of States yourself later.
The steps and the code are very straightforward. Check that the MouseEnters state is selected in the States list. Then, in the Properties pane, click on the Events button.
A list of Events for the Rectangle will appear. Find the MouseEnters event and enter a name for the event handler you are about to create in code. I have used 'BRMouseEnter'. Press ENTER and Visual Studio will fire up (or will be brought to the front if it is already running).
Visual Studio will display the code-behind file for the project. Not only that, it will have created the skeleton of the event handler for you. The format of the code that needs to go into the event handler is:
VisualStateManager.GoToState(Control Name, Name you assigned to the State, Use Transitions - True or False)
So in our example this will be:
VisualStateManager.GoToState(Me, "MouseEnters", True)
Run the project from Visual Studio and this time when you move the mouse over the Rectangle, the color will change.
You will see that when you move the mouse off the Rectangle it doesn't automatically return to the default color - something you may have come to expect if you have used Triggers in WPF.
From what we have covered so far, you will understand that all you need do is to add another State to the list, add any Transitions you want (if any)and this time create an event handler for the MouseLeave event. You use the same code syntax for this event in the code-behind and when you run the project you will get the changes you require as the mouse moves on and off the Rectangle.
You can use this approach for any element that doesn't automatically offer you a pre-built set of States - the Image being an element you may often want to change when the user interacts with it, for example.
Visual State Manager is an easy tool to use once you understand the basics. If you have had problems with it in the past, I hope this article gives you enough step by step detail to help you use it fully in your Silverlight 2 projects.