Behaviors in Silverlight 3.0 Beta

 

Hi All,

While working with Silverlight 3.0 beta, I have learnt the cool feature which we were coding manually in our early days. But now in Silverlight 3.0 beta, without writing code you can apply some cool behaviors which are shown in MIX.

OR

If you want to build your own behaviors, you can even do the same.

Behaviors are used for designing better interactivity with UX using Microsoft Expression Blend 3.0.

So, I just tried some of them and for that I have downloaded few behaviors from the following URLs-

1) http://gallery.expression.microsoft.com/en-us/SampleSLBehaviors

2) http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack

I tried the behaviors from the first link. Unfortunately I was unable to try out behaviors from the Second link. It might be my mistake.

After downloading the compressed file from the first URL, you can now start applying these behaviors as described below-

1) Let’s create a sample Silverlight 3.0 application by the name “SL3Behaviors” using Microsoft Expression Blend 3.0 and add an existing project “SLPreviewBehaviorsLibrary” which you have just downloaded from the first URL in to our solution as shown below-

2) Once you are finished with step-1, compile your project and add a reference of “SLPreviewBehaviorsLibrary” to the Silverlight application.

3) As well as add an assembly reference named “Microsoft.Expression.Interactivity.dll” from the “Assembly folder” which is there in the downloaded file location.

4) Now, let’s draw a 3- Rectangles on MainPage.xaml design surface as shown below-

5) Once you are done with the above design, let’s apply behaviors for all the above rectangles. For this follow the below steps-

6) Choose the Asset Library and make a choice of Behaviors from the Asset Library section as shown below-

7) You will see couple of behaviors as shown in above figure. All these behaviors are available to you because of the library reference “SLPreviewBehaviorsLibrary” which we have added in our above steps.

8) Now, let’s Drag & Drop a “DragBehavior” on the first Rectangle in our “Objects and Timeline” window as shown below-

9) Repeat the above step for all the other rectangles and Hit “F5”. Now Drag & Drop the Rectangles on the Screen as per your preference. WOW!! So, Easy!!!

10) So, if you are finished with the above demo, let’s try out some other cool behaviors which are available out-of-box from the Library “SLPreviewBehaviorsLibrary”.

11) Now let’s go back to our design view of MainPage.xaml file and click Asset library. Again to back to Behaviors tab and add “FullScreenAction” behavior on first rectangle.

12) This behavior gives you a capability of making your screen as Full Screen. But with that it even gives a capability of on which Event you want to make full screen. In out example we will do full screen when we click LeftMouseButton on our first Rectangle.

13) To do this, make a choice of “FullScreenAction” behavior from Objects and Timeline window and then go to Properties window. Then under Triggers section, make a choice of “LeftMouseButtonDown” event as shown below-

14) Once you are done, let’s Hit “F5” and test the application. When you click Left Mouse Button, you will get Full Screen!! Awesome!!

15) Now let’s try the next behavior. That is “ShowMessageBoxAction”. Drag and drop this behavior from Asset library on our second rectangle.

16) After dropping it on our second rectangle, go to property window and write a customized message as per your requirement as shown below-

17) Then change the trigger from “Loaded” to “MouseLeftBottonDown”.

18) Now Hit “F5” and test the application by clicking left mouse. You will see a Message Box!! Great!!

19) Let’s try out next behavior. That is “HyperlinkAction”.

20) Drag and drop “HyperlinkAction” behavior from Asset library on our third rectangle and go to properties window.

21) From the Trigger section, Change the Event name to “MouseLeftButtonUp” and from Hyperlink Properties section, change URL to http://www.bing.com.

22) Once you are done, Hit “F5” and test your application. When you click third rectangle and when the mouse left button is up, you will see that you are getting redirected to the specified URL!! Nice!!

23) Let try out next behavior. That is “PlayStoryBoardAction”. For this you must have a story board in your Silverlight page. So, what are we waiting for!! Let’s create a small story board which will flip the second and third rectangle by 360 degree.

24) To do this, follow below steps-

25) Create a story board by the name “FlipRectangle” and let’s make the duration 4 Seconds.

26) Then change second rectangle’s “ X coordinate” “Projection” which is there under “Transform” section in the properties window to 360 degree and third rectangle’s “ Y coordinate” “Projection” to 360 degree.

27) Now you are done with the story board, drag and drop the “PlayStoryBoardAction” on first rectangle and go back to properties window.

28) From the properties section, make a choice of event name “MouseEnter” from Trigger section and enter a story board name which we have just created “FlipRectangle” in to StoryBoardName property box from “PlayStoryBoard”.

29) Hit “F5” and test the application. When you move your mouse over first rectangle, you will see the nice animation got started!! Fantastic!!

30) That’s it!! Now you can try out some other Behaviors which you have downloaded or you can create your own as well.

You can try this application below-

So, Enjoy!!