Creating Behavior in Silverlight


Behaviors allow designers to take advantage of new levels of interactivity decoratively, without writing code. A behavior is something you attach to an element, modifying the way in which the element should present itself, or how the element should respond to user interactions.

There are many great behaviors available in Expression Blend inside Assets > Behavior section, we can just drag and drop any behavior on to appropriate item and set some relevant properties, that’s it our behavior works fine.

In this article i am going to demonstrate how to create a simple behavior, for demonstration purpose i am going to create a messagebox behavior.

Step 1:

Let us start with a simple Silverlight application. Fire up Visual Studio 2010, and click File->New to select a Silverlight 4.0 application, name it accordingly, and click OK.

Fire Up VisualStudio

Step 2:

Visual Studio will create a Solution. Right-click on the solution in the Solution Explorer and select Add then New Project…

Add New Project file in the Solution

Step 3:

This time create a Silverlight Class Library, and name it accordingly and rename the Class1.cs to PopupBegaviour.

Silverlight Class Library

Step 4:

Now we need to add a reference called System.Windows.Interactivity.dll In the Silverlight Class Library , this assembly located at:

C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight\System.Windows.Interactivity.dll

Right click on references a popup opens and in that find for System.Windows.Interactivity and press OK.

Add Reference

Select Inerativity Dll

Step 5:

Add a Namespace inside the PopupBegaviour class

using System;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;

namespace PopupBehavior
{
public class PopupBegaviour
{

}
}

Now Inherit the OpenWindow from TargetedTriggerAction<DependencyObject>,

TargetedTriggerAction<DependencyObject> means that while this behavior can be attached to any element, the Target can only
be a Dependency.

and now create a method to invoke the popup.

protected override void Invoke(object o)
{
MessageBox.Show(message);
}

Instead of having the message box’s contents be set only via code, we’d like to make it a Dependency Property so that anybody who uses this Action can easily set the text displayed via Expression Blend’s Properties Inspector. The code for doing that, is pretty straightforward.

public string message
{
get{return (string)GetValue(MessageProperty);}
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(“Message”,typeof(string),typeof(OpenWindow), new PropertyMetadata(null));

What we are going to do is put both of these chunks of code together into our action. Below you will find the full code for our ShowMessageBox Action with the additions you need to make beyond the code that is already there more clearly visible:

using System;
using System.Windows.Interactivity;

namespace OpenWindow
{
public class OpenWindow : TargetedTriggerAction<DependencyObject>
{

public string message
{
get{return (string)GetValue(MessageProperty);}
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(“Message”,typeof(string),typeof(OpenWindow), new PropertyMetadata(null));

protected override void Invoke(object o)
{

MessageBox.Show(message);
}
}
}

Step 6:

Now build the solution, and go to the Silverlight solution right click on References and add references that is crated after our Build, here it is OpenWindow.dll

add this reference.

Add reference for OpenWindow

Step 7:

Open  the Mainpage.xaml in Blend by right clicking on page you will see “Open in Expression Blend” select this option.

Open in Expression Blend

Step 8:

Now add a button control and select assets panel > go to Behaviors section, ours behavior will be there

Asstes panel to choose Behavior

now Drag and Drop on to the Button which is on art board,

Drag Behavior

now in side the property panel we can see the properties of our newly created behavior.

Properties Window for Behavior

That’s it now save and run our application and click on Button you will see a popup after that.

Popup

Advertisements

5 thoughts on “Creating Behavior in Silverlight

  1. First of all I salute you for your presentation. Really it is great one. One can run the program without help of others.
    Thanks.

    Wish u to be happy & healthy life. please keep writing.

  2. I’m developing a site site and I was thinking of changing the template.Yours looks pretty decent! You could visit my web site and tell me your viewpoint!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s