Silverlight and the VisualStateManager

核心提示：If you’ve heard the news about Silverlight 2 Beta 2 and Expression Blend 2.5 (June 2008 preview), you will notice something else in addition to being able

If you’ve heard the news about Silverlight 2 Beta 2 and Expression Blend 2.5 (June 2008 preview), you will notice something else in addition to being able to skin your controls easier.　Remember how you may have had to create different states for your element using “MouseOver State" and then create storyboards to transition to states?　There’s now a better way.

Enter VisualStateManager.

Let’s take a look and see if we can simplify this down a bit a basic understanding.　Let’s use something that most everyone should be able to relate to with states: Button.　A button has MouseOver, MouseOut, MouseDown, etc. states that you can see.　Using VisualStateManager and the new UI ability to customize templates, we can make our lives easier.

Start in Expression Blend and drop a button on the default design surface.　I’ve created mine larger just for context, but whatever you want is fine.　You should have something like this:

Now, using the method in one of my previous posts about skinning the controls, right-click on the button and choose to edit the template.　I’d choose Edit a Copy for now to make things easier for now…keep it a document resource as well.　After you’ve done that, take a look in the upper left pallette (assuming default and you haven’t moved your palettes around…in which case you probably already know about VSM and are smarter than me anyway):