Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  Visual Studio 2008  »  How To Use The Visual State Manager(VSM) In Silverlight 2  »  Setting States on Other Elements
How To Use The Visual State Manager(VSM) In Silverlight 2
by Ged Mead | Published  06/26/2009 | Visual Studio 2008 | Rating:
Ged Mead

Ged Mead (XTab) is a Microsoft Visual Basic MVP who has been working on computer software and design for more than 25 years. His journey has taken him through many different facets of IT. These include training as a Systems Analyst, working in a mainframe software development environment, creating financial management systems and a short time spent on military laptop systems in the days when it took two strong men to carry a 'mobile' system.

Based in an idyllic lochside location in the West of Scotland, he is currently involved in an ever-widening range of VB.NET, WPF and Silverlight development projects. Now working in a consultancy environment, his passion however still remains helping students and professional developers to take advantage of the ever increasing range of sophisticated tools available to them.

Ged is a regular contributor to forums on vbCity and authors articles for DevCity. He is a moderator on VBCity and the MSDN Tech Forums and spends a lot of time answering technical questions there and in several other VB forum sites. Senior Editor for DevCity.NET, vbCity Developer Community Leader and Admin, and DevCity.NET Newsletter Editor. He has written and continues to tutor a number of free online courses for VB.NET developers.


View all articles by Ged Mead...
Setting States on Other Elements

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.

How would you rate the quality of this article?
1 2 3 4 5
Poor Excellent
Tell us why you rated this way (optional):

Article Rating
The average rating is: No-one else has rated this article yet.

Article rating:3.03370786516851 out of 5
 89 people have rated this page
Article Score19244
Sponsored Links