Silverlight 4: Introduction to Behaviors

      -->              

In this article, I will introduce you to Behaviors in Silverlight. We will also create a small demo of the ‘MouseDragElementBehavior’ behavior using Expression Blend 4. So let’s get started.

We will first create a Silverlight project using ‘Microsoft Expression Blend 4.0’. Click on Start > Microsoft Expression > Microsoft Expression Blend 4 as shown below

:

Create a new project and give it a name ‘BehaviorTesting’ as shown below:

Now let’s start with changing the background color of the layout. From the Objects and TimeLine window, choose ‘LayoutRoot’

Now from the property Window, change the following properties:

1) Background color – Black.

2) Width – 600.

3) Height – 500.

Now right click ‘LayoutRoot’ from ‘Objects and Timeline’ window and click on change Layout Type to ‘Canvas’.

Now let’s do a quick overview of the out-of-box ‘Behaviors’ in Silverlight 4.0. Shown below is a list of behaviors :

1. Call Method Action.
2. Change Property Action.
3. Control Storyboard Action.
4. Data State.
5. Fluid Move.
6. Fluid Move Set Tag Behavior.
7. Go To State Action.
8. Hyperlink Action.
9. Invoke Command Action.
10. Mouse Drag Element Behavior.
11. Play Sound Action.
12. Remove Element Action.
13. Set Data Store Value Action.

These behaviors are available out-of-the-box in Silverlight 4.0. These behaviors are available within the DLL – Microsoft.Expression.Interactions.dll. Now, let’s see what is a Behavior and how effectively we can use them in our Silverlight Applications using the behaviors listed above

What is Behavior?

Behaviour is a new way of interactivity without writing code, specially written by developers and used by designers in Microsoft Expression Blend 3.0/4.0. Behaviors makes interactivity much simpler for the designers. Developers can write their own custom behaviors which can be reused on different Silverlight, MVVM applications etc.

So let’s try our ‘MouseDragElementBehavior’ by creating a simple demo. For this we need an image which we will slice into number of pieces using Microsoft Expression Designer. I am using an image of the king of the jungle, LION as shown below:

Now let’s open Microsoft Expression Designer and use a slice tool to cut down our image into number of pieces as shown below:

Step 1: Open Expression Designer from Microsoft Expression studio. Click on File > New menu and give a size to an image as shown below:

Click ‘OK’ button. Now drag and drop the image on Expression designer and adjust its height and width to the height and width of the document, which we created above.

Step 2: Now let’s use a tool ‘Slice’ from the tool box as shown below –

Now slice your image into a 50 by 50 size as shown below –

Once you slice your image into a number of pieces, select all the pieces by pressing ‘Ctrl + A’. Then go to ‘File’ menu and click on ‘Export’., which will bring up an ‘Export’ dialog box. Make sure that the image format is ‘JPEG’. The path for the images is set properly. Now click on ‘Export All’ button as shown below:

Step 3: Now let’s get back to our Silverlight project which we created above. Now draw lines which will contain our sliced images on the ‘canvas’ by specifying ‘Left’ and ‘Top’ property of the Line control as shown below

Once you are done with the above design, create one folder under Silverlight project and add all the sliced images into that folder.

Now let’s add all the images with their source (the sliced image) and the behavior ‘MouseDragElementBehavior’ dynamically on the above screen. For this, you will have to write code in the ‘Constructor’ of our code file that is ‘MainPage.xaml.cs’ file as shown below:

First of all import the following namespaces :

Declare two variables as shown below at the class level

int k = 81;

int m = 25;

Now add some code in the constructor of ‘MainPage’ class

The above code positions all the images dynamically into each square drawn on the canvas layout, as shown above. It also adds ‘MouseDragElementBehavior’ on each image so that we can set positions of our images by dragging and dropping the images at accurate places.

We have also set the z-index of each image. Now when you run the application, your application will look similar to the following:

Now you can drag and drop the images to make a real picture. Make a note that we are not writing a single line of code to drag and drop the images. Before Silverlight 3.0 or 4.0, we needed to write a couple of extra lines to achieve this goal.

Some Other Out-of-box behaviours

Now let’s see some other out-of-box behaviors. I have created a separate Silverlight project for the demonstration.

Let’s draw a rectangle (Width – 255 and Height – 180) and fill it with blue color as shown below

Now let’s create an animation. Choose a rectangle and go to properties window. From the properties window > ‘Transform’ section. Now from the ‘Projection’ group change the ‘Center Of Rotation’ as shown below

Now let’s create a ‘Storyboard’ from the ‘Objects and Timeline’ window as shown below:

Now extend the ‘Record Key frame’ till 5 seconds. By keeping rectangle selected, from the ‘Projection’ section of properties window change the ‘Y’ angle from the ‘Rotation’ section till 180 degree as shown below:

You can test your animation by playing it from objects and Timeline window as shown below:

After testing the animation, drag and drop ‘ControlStoryBoardAction’ behavior on the rectangle. This behavior can be used to Play, Pause, Resume, Stop the animations on the triggers performed against the objects.

Now your properties window will look similar to the following:

If you observe, ‘EventName’ property has a dropdown list from where we can make a choice of event which can be fired against rectangle. Now if you observe the second property ‘ControlStoryBoardOption’ property, you can choose Play, Pause, Resume, Stop etc. actions. The third property will decide which storyboard to be played against the action of a rectangle, that is ‘Storyboard’ property.

Now let’s hit ‘F5’ and test our behavior by clicking the rectangle. It should start our ‘Rect3D’ animation. Likewise there are multiple behaviors available out-of-box with Silverlight 4.0 and Expression Blend 4.0.

Conclusion

In this article, we took an overview of the different types of behaviors and how we can use them using Microsoft Expression Blend 4.0.

The entire source code of this article can be downloaded over here