cowtherapy


VSM (Visual State Manager) is the latest instalment for Expression Blend and its incredibly powerful.

vsm

And there it is, the states manager. States let you set up how you want each interaction to look like. Why is this cool? Because when you change states, it doesn’t matter what state it is shifting from, it will animate accordingly.

Check out the demo here…

If you click the buttons to move the saucer from state to state. It will take 0.2 seconds to get from state to state, no matter the distance it has to travel or how much the ship needs to resize.

layout_state

This picture shows the state for when the saucer is over the front cow.

All you need to do is hit the create “state group” button in VSM. stategroup Give it a name and then create a new state. state Then select the new state, you will notice the red “State recording is on” bar shows up, change around your settings for that state (I simply moved the saucer down and make it larger) and there you have one state created. Now we have to wire it up to something. I just used simple buttons with the “click” event. Create a new button and go to your events menu. events Double click the “Click” dialogue box and it should load up Visual Studio and your code-behind file with the new event in there, something like “private void Button_Click(object sender, RoutedEventArgs e)”

Add this code:
VisualStateManager.GoToState(this, “NameOfState”, true);

Give it a test run and hopefully it should go to the new state when you click the button.

Visual State Manager can be used within button templates as well, and I find the easiest way to set this up is create a normal button, right click it, go to edit template and create empty. This will delete all the graphics out of the button but leave you with the predefined states such as mouse over and click states.

Another great feature is the ability to add a StoryBoard to your state, if you have an animation that you want to play in a certain state.SB_VSM Hitting this button will bring up the StoryBoard view for your VSM State. Animate as you would with a normal StoryBoard and it will simply play that animation when that state is active.

VSM makes it so easy to make sweet menus and things for you application and overall speed up your development 10 fold.

Hope this helped!

Alex.

Advertisements