Silverlight tutorial: HOW TO build CommandLink Control in Silverlight with Expression Blend 3 and Behaviors

Command links have found their way around in Windows Vista and they are one of the key parts of the Windows 7 user interface as well. In this article I’ll show you how to create a command link control in Expression Blend 3 for use in your Silverlight 3 projects. New concept introduced with Blend 3 – Behaviors is being used.

Introduction

Command links have found their way around in Windows Vista and they are one of the key parts of the Windows 7 user interface as well. As such, they are also finding their way around even on the web. As a user interface element, or control for that matter, command links are used in situations where users can select a single response to a main instruction and move on to the next step in a task or process. They are simple, clean, and lightweight. They contain a main instruction, icon and optional description.

With the release of Silverlight 3 and Expression Blend 3, building rich user experiences and even new, customized, controls is a straightforward process. However, it does require some basic understanding of the fundamental ideas and concepts. In this article I’ll show you how to create a command link control in Expression Blend 3 for use in your Silverlight 3 projects.

Getting started

Once you’ve installed Expression Blend 3, start a new Silverlight 3 project. After you have created your new project, under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in a UserControl.

Our basic idea here is to build a custom control and expose a number of properties. This means that our command link control will be completely reusable within your Silverlight project and very flexible for even further customizations.

Here we go…

Generally, the first step is to select File > New > UserControl. In the Name field, type CommandLinks.xaml. Click OK. This will open new design surface where we will design our control. Our idea is to create a custom command linkcontrol, looking like this one:

We need 4 elements: we will use Border control as a container, two textboxes (for main instruction and description text) and a image control for the icon. My idea is not to go into too much detail regarding positioning of the controls…

But for your own convenience, look at the table below for typical controls and the values being set for their properties.

The next step is, obviously, to add the txtMainInstruction, txtDescription and imgIcon objects on your artboard. Select them all and right-click them. From the drop-down menu, select Group Into > Border. Name the border brdBorder. You will notice that a Grid control has been automatically added to the host Image control and TextBlock controls, since Border can host only one child element. This is a really cool feature that enables you to be a bit more productive by liberating you from the need to think about possible consequences for what would happen with different layout controls and containers.

Now, Locate the PNG or other graphic file sized to be 16 x 16 pixels. You can also use the one in the source files, of course. This is your icon for this control. You can either use some existing graphic element, or you might use Expression Design to draw it.

Anyway, if you have done everything properly, your design surface should look like this:

Expression Blend 3 and Behaviors

The next thing we have to do is to make sure that the brdBorder control changes its Border color when the user hovers the mouse cursor over it, and to reset to white when the user moves the mouse off the control. This is exactly the same behavior as seen under Windows Vista or Windows 7.

One of the greatest new things in Blend 3 is the brand-new concept of Behaviors—reusable code samples and parts of interactivity that are specifically designed to help designers and developers to achieve different levels of interactivity without really writing the code by themselves. A number of different Behaviors are shipped with Expression Blend 3, and for our purpose we will use the ChangePropertyAction Behavior.

From the Asset pane, select Behaviors and then click and drag the ChangePropertyAction to the brdBorder control. Now, select the added Behavior, and you will see its properties in the Properties pane. Set its properties like this:

This first behMouseEnter will handle the user’s mouse cursor entering the border. Now let’s add a new Behavior—just click and drag ChangePropertyAction again and set the following properties:

As you can see, this Behavior will handle the appearance when the mouse leaves the control.

Exposing properties – custom control in Silverlight 3

Our next step is to expose properties. Since we are building this as a custom user control and we want it to be reusable and have some properties exposed, we need to add some code. Go to your code-behind file (CommandLinks.xaml.cs). You can access it from the Projects pane by expanding the node next to the related XAML file.

You need to add the following lines of code under your namespace:

[codesyntax lang="csharp" lines="fancy" lines_start="1" blockstate="expanded" highlight_lines=""]

public partial class CommandLinks : UserControl
{
public CommandLinks()
{
InitializeComponent();
}

public string MainInstruction
{
get {return this.txtMainInstruction.Text;}
set { this.txtMainInstruction.Text = value; }
}

public string Description
{
get {return this.txtDescription.Text;}
set { this.txtDescription.Text = value; }
}
public ImageSource Icon
{
get { return this.imgIcon.Source; }
set { this.imgIcon.Source = value; }
}
}

[/codesyntax]

This code exposes following properties to the user: MainInstruction, Description, and Icon.

Now build the project (as a control as well): select Project > Build Project.

Now, go back to your main XAML file, the one that was first one to appear there when you started your project. From the Assets pane locate the Project, select it, and on the list locate the CommandLinks control. Select it and draw it on your artboard. Now, if you select the control you have just built and scroll down to the Miscellaneous section of the Properties pane, you will see all properties of your control exposed.

Of course, as is the case with all other, standard, controls, you can change those properties, define your own event handlers, and treat this control as any other you used to work with before. Pretty cool, isn’t it?

Now press F5 and test your project. Hover your mouse over the command link you just added. You will see that its border will change color exactly as we have defined it by using the ChangePropertyAction Behavior.

How this works?

The main idea in this tutorial was to create a flexible user control and expose a number of its properties. Of course, we could take the approach of creating the command buttons manually by drawing all the constituent elements every time we need them. Soon, however, we would see that this approach is not very good, especially in situations where you need to reuse the control and set its properties through code.

Therefore, we created a new UserControl as a part of our Silverlight project. The next step was designing our control. It is important to point out that designing of the UserControl does not differ from “regular” UI design when we are building an interface from prebuilt controls. All ideas, tooling capabilities, and philosophies stay exactly the same.

So, we added a border control as a container, two text boxes (for main instruction and description text) and an image control for the icon and set their initial properties. The important thing is that we named all those objects so we could reference them throughout the code later.

And then, the big, powerfully simple moment has happened: we decided to utilize a new concept introduced with Expression Blend 3—Behaviors. We wanted to change the border color when the user positions the mouse over the control and reset it to its original color (white) when the mouse cursor is moved off the control. We have used the ChangePropertyAction Bahavior and described both cases and required property changes depending on specific events (MouseEnter and MouseLeave). This is a very powerful concept, since it enables pretty high levels of interactivity without writing a single line of code.

Once we designed our control and utilized the behavior, we arrived at the point where we needed to expose properties that could be set and used when utilizing our control. We decided to expose three properties: MainInstruction, Description, and Icon. In the code-behind file we added several lines of code to enable this.

Our next step was to build the project and return to our main file (startup) and locate our newly created CommandLinks control. After we drew it on the artboard and selected it, we could see its properties exposed under the Miscellaneous section and set them or change them from that location.

This has enabled us to add a virtually unlimited number of CommandLinks controls from the Asset pane or library to our project without the need for creating them from scratch. Furthermore, all exposed properties are visible even in the coding environment—meaning that you can set and change exposed properties during run time via code instead of just changing them through Blend’s UI. Also, if you are using Visual Studio as your development (hopefully not for design) environment, you should be able to set this control’s properties even through Visual Studio IDE.

Be sure to take a look at the related article – basicaly a follow up to this one – TOP 10 UX recommendations for Silverlight Command Link usage

Let’s keep in touch – You should follow me on Twitter now!

22 Responses to “ Silverlight tutorial: HOW TO build CommandLink Control in Silverlight with Expression Blend 3 and Behaviors ”

1. James Wilson says:

   January 4, 2010 at 18:42

   Nice tutorial. Good job!

   Reply
   • UXPassion.com says:

     January 5, 2010 at 3:38

     Thanks so much!

     Reply

Trackbacks

1. Vibor Cipan
2. Larry King
3. Tweets that mention Silverlight tutorial: CommandLink Control with Blend 3 and Behaviors -- Topsy.com
4. Sara Silva
5. LIDNUG
6. brian_henderson
7. Dew Drop – December 31, 2009 | Alvin Ashcraft's Morning Dew
8. Silverlight News
9. Silverlight tutorial: CommandLink Control with Blend 3 and Behaviors Silverlight Web
10. ittyurl
11. Silverlight tutorial: CommandLink Control with Blend 3 and Behaviors iSilverlight
12. Silverlight tutorial: CommandLink Control with Blend 3 and Behaviors Silverlight Blog
13. Silverlight tutorial: HOW TO build CommandLink Control in Silverlight with Expression Blend 3 and Behaviors
14. Enlaces Interesantes Silverlight/WPF 03-01-2010 - Blog de Oskar Alvarez
15. MSExpression
16. Davide Zordan
17. TOP 10 UX recommendations for Silverlight Command Link usage
18. Jeff A Delezen
19. ICG-Design
20. Media Net UX Team