Creating a simple Silverlight 3 Behavior
Jul
18
Written by:
7/18/2009 6:43 PM
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.
Select the Silverlight Application template.
Use the option to create a website to host the project.
Visual Studio will create a Solution. Right-click on the solution in the Solution Explorer and select Add then New Project...
This time create a Silverlight Class Library.
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.
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.
Right-click on MainPage.xaml and select Open in Expression Blend...
In Expression Blend, add a Button and a TextBox to the design surface of MainPage.xaml.
Click the Assets button.
Select the Behaviors group and you will see the MakeLowercase behavior.
Drag and drop the MakeLowercase behavior onto the Button.
In the Objects and Timeline window, the MakeLowercase behavior will be attached to the Button.
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.
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.
In the Common Properties section, the TargetName is now set correctly.
Save the page.
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.
You can type in the TextBox
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.
My CodeProject Blogs
22 comment(s) so far...
Re: Creating a simple Silverlight 3 Behavior
Nice, Very Nice.
Thank you
Mike Greenway
By Mike Greenway on
7/21/2009 9:28 AM
|
Re: Creating a simple Silverlight 3 Behavior
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! :)
Protected Overrides Sub Invoke(ByVal parameter As Object)
Target.Text = Target.Text.ToLower
If Target.Text = "uppercase" Then
Target.Text = "lowercase"
End If
Target.Background = New SolidColorBrush(Colors.Red)
End Sub
By Rob on
7/22/2009 5:26 PM
|
Re: Creating a simple Silverlight 3 Behavior
@Mike - Thanks for the feedback!
By Michael Washington on
7/22/2009 5:24 PM
|
Re: Creating a simple Silverlight 3 Behavior
@Rob - Cool Thanks!
By Michael Washington on
7/22/2009 5:25 PM
|
Re: Creating a simple Silverlight 3 Behavior
Awesome as usual Michael. Your tutorials are great!
By Randy on
8/19/2009 6:55 PM
|
Re: Creating a simple Silverlight 3 Behavior
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
thanks a lot
By SANTHU on
8/27/2009 10:21 PM
|
Re: Creating a simple Silverlight 3 Behavior
thanks for your post. this is Great~
I wonder if I wanna do the same thing With Two TextBoxes.
(or One TextBox, and One PasswordBox)
By Shorty.Kei on
9/21/2009 12:04 AM
|
Re: Creating a simple Silverlight 3 Behavior
hi Michael,
tx for sharing.
i want to create a time picker control in silverlight 3 without a third party dlll or nay contolr ...can you help for this...
By malcolm on
9/28/2009 6:17 AM
|
Re: Creating a simple Silverlight 3 Behavior
@malcolm - I have not used the Time Picker yet
By Michael Washington on
9/28/2009 6:23 AM
|
Re: Creating a simple Silverlight 3 Behavior
Your html sample -- I think -- is missing a piece (the part (text within angled brackets) is not displaying)
Should it not read:
// TargetedTriggerAction means that while this behavior
// can be attached to any element, the TARGET can only be a TextBox
public class MakeLowercase : TargetedTriggerAction ....
By Sky on
10/18/2009 12:00 AM
|
Re: Creating a simple Silverlight 3 Behavior
Ha...it took out from the comment as well...let me try that again:
// TargetedTriggerAction means that while this behavior
// can be attached to any element, the TARGET can only be a TextBox
public class MakeLowercase : TargetedTriggerAction {...}
By Sky on
10/18/2009 12:02 AM
|
Re: Creating a simple Silverlight 3 Behavior
Wow. I give up trying to type it in (your comment box hides both angled brackets, and escaped angled brackets...)
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.
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!")
Night.
By Sky on
10/18/2009 12:06 AM
|
Re: Creating a simple Silverlight 3 Behavior
@Sky - Thank you for letting me know. I replaced the code sample with an image so it is now correct.
By Michael Washington on
10/18/2009 5:31 AM
|
Re: Creating a simple Silverlight 3 Behavior
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)
Imports System
Imports System.IO
Imports System.Text
Imports System.Windows
Imports System.Collections.Generic
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports Microsoft.Expression.Interactivity
13. Public Class SimpleSampleAction : TargetedTriggerAction
Protected Overrides Sub Invoke (ByVal parameter As Object )
MsgBox("FIRST ACTION!!!!")
End Sub
19. End Class
By Angelica on
11/18/2009 8:18 AM
|
Re: Creating a simple Silverlight 3 Behavior
@Angelica - Yeah VB is coded differently but I do not know the proper syntax. Sorry.
By Michael Washington on
11/18/2009 8:19 AM
|
Re: Creating a simple Silverlight 3 Behavior
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.
By Thailand Hotels on
2/20/2010 11:00 AM
|
Re: Creating a simple Silverlight 3 Behavior
very good article, but when I read it, I thought that one country different people see differently
By Mark on
4/30/2010 4:53 AM
|
Re: Creating a simple Silverlight 3 Behavior
Hi it is a great tutlrial thanx, can anyone help me on writing a silverlight aplication that will create an animated photo sketch ?
By Arnaldo Diogo on
8/7/2010 6:16 PM
|
Re: Creating a simple Silverlight 3 Behavior
Mike,
Good stuff.
Can I use this behavior for mulitple buttons attached to the same richtextbox ?
For example - Bold , Italic and Underline buttons. I'd need to identify which button sent the message.
New at this stuff.
Thanks
By Danny on
12/29/2010 10:44 PM
|
Re: Creating a simple Silverlight 3 Behavior
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).
I can get around the issue by adding the behavior immediately after the page class in Mainpage.xaml.cs.
Any ideas on how to get this to work from the external project library that was created?
By Greg on
4/17/2011 7:10 AM
|
Re: Creating a simple Silverlight 3 Behavior
@Greg - Sorry I am no help. I have never tried that. The behavior will work, but perhaps it is a bug in Expression Blend?
By Michael Washington on
4/17/2011 8:07 AM
|
Re: Creating a simple Silverlight 3 Behavior
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 :) :)
By Jayanth MP on
9/2/2011 4:15 AM
|