Page 1 of 1

Silverlight - Using the Visual State Manager and Behaviors

#1 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 12 September 2010 - 07:31 AM

In this tutorial, I am going to use the Visual State Manager to do animations. I will be using Blend 4 to do this tutorial. Blend will make this much easier to do rather than writing the XAML by hand.

The Visual State Manager allows you to create "states" of objects and then move to those states. Moving to those states can be done through code(just one line of code), or by using behaviors.

NOTE: The VisualStateManager was added in Silverlight 2. However, it wasn't included in WPF until .Net 4. To use the VisualStateManager in WPF in .Net 3.5 SP1, you will need to download the WPF Toolkit from CodePlex.

So first, we will create a new project in Blend. We will just create a Silverlight 4 application without the website. We will name the project VisualStateExample.

Attached Image

We will now draw a Rectangle on our page, and give it a Fill of Blue.

Attached Image
Attached Image
Attached Image

Next, we are going to go to the States tab.

Attached Image

This is where we will create all of our states.

So first, we need to create a State Group. Click the Add State Group button, name it MyStateGroup, then give it a default transition time of 0.4s.

Attached Image
Attached Image

Now that we have our State Group, we need to create our individual states. Let's say that we want the rectangle to change colors when the mouse hovers over it. When the mouse moves away, we want it to change back to it's original color. Also, let's change the color when the left mouse button is held down on the rectangle(Mouse Down), then change back when the left mouse button is released(Mouse Up).

So let's create our first state. Our first state will be our current, default state. Click the Add State button, then name it MouseOutState.

Attached Image
Attached Image

If you notice, now there is a red rectangle around the designer. This means that you are currently in recording mode for the state. ANY changes that are made in the designer will be recorded for that state. Clicking on the Base state will stop recording.

Since this is our default state, we don't need to record anything.

Now, create another state named MouseOverState. While still in recording mode, select the Rectangle from the Objects and Timeline tab, and change it's Fill color to Orange. Click on the Base state to stop recording.

Attached Image
Attached Image
Attached Image

Now, create another state named MouseDownState. While still in recording mode, change it's Fill color to Green.

Attached Image
Attached Image

Now, we need to create our last state. Create a new state and name it MouseUpState. While still in recording mode, change the Fill color to the Orange from the MouseOverState.

We should now have 4 states. Now we need to go to these states with the mouse events. There are a couple of ways of doing this, but I will use behaviors to do it.

There are a number of behaviors in Blend, and we are going to use the GoToStateAction behavior.

Go to the Assets tab, then click on behaviors, then click on the GoToStateAction.

Attached Image

Now drag that action onto the Rectange in the designer. You will now see that the GoToStateAction has been added to the Rectangle in the Objects and Timeline tab.

Attached Image

With the GoToStateAction selected, go to the Properties tab, set the EventName to MouseEnter, and set StateName to MouseOverState.

Attached Image

Do these steps to create a GoToStateAction for the other three states that we have. When you have completed, you will have four actions for the Rectangle.

Attached Image

You have now finished the animations. Run the application using F5, and move the mouse over the rectangle. Perform the other mouse actions to see the other animations.

This is just another way the Expression Blend makes animations so easy. I have created animations without writing one line of code. To me, that's pretty amazing and can make application development much quicker and have less bugs.

Is This A Good Question/Topic? 0
  • +

Replies To: Silverlight - Using the Visual State Manager and Behaviors

#2 Guest_kalaivani sekar*


Reputation:

Posted 17 September 2010 - 03:40 AM

sir,
your post was useful for me.but i really wanted to proceed more with these projects.how can i contact you?how can you help me in doing the project?
Was This Post Helpful? 0

#3 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10817
  • View blog
  • Posts: 40,320
  • Joined: 27-December 08

Posted 17 September 2010 - 04:27 AM

You are welcome to open a thread in the appropriate forum regarding your issues, and our members will be happy to help. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1