OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


Creating a simple Silverlight 3 Behavior

After seeing this demo: [Mini-Tutorial] Blend 3: Rich Interactivity with No Code and the cool way she was able to simply drop a "Behavior" on a button and a menu displays (and allows you to set some properties using simple drop downs no less) and then the button is now able to make another element move, I had to learn how to make behaviors.

There are examples on the web but all the ones I found were based on the Silverlight 3 preview and with the released version of Silverlight 3, there have been changes.

I decided that for my first behavior I would start with something extremely simple. I wanted to make a behavior that you could drop on one element, and when that element triggered the behavior, the text in a TextBox would change to lowercase.

This assumes you have Visual Studio installed. Also install:

Open Visual Studio and select File then New Project.

image

Select the Silverlight Application template.

image

Use the option to create a website to host the project.

image

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

image

This time create a Silverlight Class Library.

image

In the Silverlight Class Library, add a reference to the System.Windows.Interactivity.dll assembly located at:

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

Rename the Class1.cs file that is automatically created to "MakeLowercase.cs".

Replace all the code in the MakeLowercase.cs file with:

Build the project.

image

In the main Silverlight Project (not the Silverlight Class Library that you just created the behavior in), add a reference to the Silverlight Class Library that you just created the behavior in.

Build the entire Solution.

image

Right-click on MainPage.xaml and select Open in Expression Blend...

image

In Expression Blend, add a Button and a TextBox to the design surface of MainPage.xaml.

image

Click the Assets button.

image

Select the Behaviors group and you will see the MakeLowercase behavior.

Drag and drop the MakeLowercase behavior onto the Button.

image

In the Objects and Timeline window, the MakeLowercase behavior will be attached to the Button.

image

When you click on the MakeLowercase behavior in the Objects and Timeline window and look at the Properties window, you will see that the EventName in the Trigger section is set to Click. This means the behavior will fire when the Button is Clicked.

In the Common Properties section, the TargetName is set to the default value of [Parent]. This wont work because the target must be a TextBox. You can click the round "bullseye" symbol next to [Parent] to enable the Artboard element picker.

image

You can then click on the TextBox and a popup will display indicating the TextBox will be given a name. Expression Blend is smart enough to know that the code wont work unless the TextBox has a name so it does it for you.

image

In the Common Properties section, the TargetName is now set correctly.

Save the page.

image

Switch back to Visual Studio and right-click on the .html test page in the web project and select Set As Start Page. Also right-click on the web project and select Set as StartUp Project.

Hit F5 to build and run the project.

image

You can type in the TextBox

image

When you click the Button, the text will change to lowercase.

You can see the live example at this link.

You can download the source code at this link.





Comments are closed.
Showing 22 Comments
Avatar  Jayanth MP 6 years ago

Awesome Tutorial.....I am a newbie developer and scratched my head a lot at MSDN and couldn't understand behaviors in Silverlight.....your tutorial helped a lot :) :)

Avatar  Michael Washington 7 years ago

@Greg - Sorry I am no help. I have never tried that. The behavior will work, but perhaps it is a bug in Expression Blend?

Avatar  Greg 7 years ago

using Expression Blend 4, I noticed that Blend will not display/find the behavior I created in the library class (also I have built the whole project prior to entering blend).<br /><br />I can get around the issue by adding the behavior immediately after the page class in Mainpage.xaml.cs.<br /><br />Any ideas on how to get this to work from the external project library that was created?

Avatar  Danny 7 years ago

Mike,<br><br>Good stuff.<br>Can I use this behavior for mulitple buttons attached to the same richtextbox ? <br>For example - Bold , Italic and Underline buttons. I'd need to identify which button sent the message. <br>New at this stuff.<br><br>Thanks

Avatar  Arnaldo Diogo 7 years ago

Hi it is a great tutlrial thanx, can anyone help me on writing a silverlight aplication that will create an animated photo sketch ?

Avatar  Mark 8 years ago

very good article, but when I read it, I thought that one country different people see differently

Avatar  Thailand Hotels 8 years ago

I like this article. This is called a great article. I am new here. I like your site too. This is pretty awesome. i found some useful info here. anyways thanks for sharing with us. I am looking foreword your next post. Thanks. I’m just going to shear this site all my friend’s and i hope they live this site.

Avatar  Michael Washington 8 years ago

@Angelica - Yeah VB is coded differently but I do not know the proper syntax. Sorry.

Avatar  Angelica 8 years ago

What is my mistake? I get two errors. Declaration Expected(line 13) and sub Invoke cannot be declared 'Overrides' because it does not override a sub in a base class(line 19)<br><br>Imports System<br>Imports System.IO<br>Imports System.Text<br>Imports System.Windows<br>Imports System.Collections.Generic<br>Imports System.Windows.Controls<br>Imports System.Windows.Data<br>Imports System.Windows.Media<br>Imports System.Windows.Media.Animation<br><br>Imports Microsoft.Expression.Interactivity<br> <br>13. Public Class SimpleSampleAction : TargetedTriggerAction <br> <br> Protected Overrides Sub Invoke (ByVal parameter As Object )<br> MsgBox("FIRST ACTION!!!!")<br> End Sub<br><br>19. End Class

Avatar  Michael Washington 8 years ago

@Sky - Thank you for letting me know. I replaced the code sample with an image so it is now correct.

Avatar  Sky 8 years ago

Wow. I give up trying to type it in (your comment box hides both angled brackets, and escaped angled brackets...)<br><br>What I was trying to say was that TargetedTriggerAction is a generic class...and between Angled brackets one would put the Type of the intended Behavior target...in this case...TextBox.<br><br>Whew. (Aftert that experience of watching my comments get munched on twice, I somewhat feel like the postman who got his leg bitten by that greedy little mutt of a comment box..."Was just delivering the mail, ma'am!")<br><br>Night.<br><br>

Avatar  Sky 8 years ago

Ha...it took out from the comment as well...let me try that again:<br><br> // TargetedTriggerAction means that while this behavior<br> // can be attached to any element, the TARGET can only be a TextBox<br> public class MakeLowercase : TargetedTriggerAction {...}<br>

Avatar  Sky 8 years ago

Your html sample -- I think -- is missing a piece (the part (text within angled brackets) is not displaying)<br><br>Should it not read:<br><br> // TargetedTriggerAction means that while this behavior<br> // can be attached to any element, the TARGET can only be a TextBox<br> public class MakeLowercase : TargetedTriggerAction ....<br><br>

Avatar  Michael Washington 8 years ago

@malcolm - I have not used the Time Picker yet

Avatar  malcolm 8 years ago

hi Michael,<br>tx for sharing.<br><br>i want to create a time picker control in silverlight 3 without a third party dlll or nay contolr ...can you help for this...

Avatar  Shorty.Kei 8 years ago

thanks for your post. this is Great~<br><br>I wonder if I wanna do the same thing With Two TextBoxes.<br>(or One TextBox, and One PasswordBox)

Avatar  SANTHU 8 years ago

hi i am new to silverlight i been trying to find abt behaviours from lot of resources but the best tutorial i found is this <br> thanks a lot

Avatar  Randy 8 years ago

Awesome as usual Michael. Your tutorials are great!

Avatar  Rob 8 years ago

Thanks so much for the walk-through. Just for fun I went a step further and "improved" the behavior so that if you type the text "UpperCase" it changes the text to "lowercase" (not the just the casing from upper to lower). Here's the code for clarification to keep my comment from sounding like an Abbott and Costello routine! :)<br><br> Protected Overrides Sub Invoke(ByVal parameter As Object)<br><br> Target.Text = Target.Text.ToLower<br><br> If Target.Text = "uppercase" Then<br> Target.Text = "lowercase"<br> End If<br><br> Target.Background = New SolidColorBrush(Colors.Red)<br><br> End Sub

Avatar  Michael Washington 8 years ago

@Rob - Cool Thanks!

Avatar  Michael Washington 8 years ago

@Mike - Thanks for the feedback!

Avatar  Mike Greenway 8 years ago

Nice, Very Nice.<br>Thank you <br>Mike Greenway