Creating Command Link Controls in Silverlight with Expression Blend 3 and Behaviors

Author: Vibor Cipan, CEO and UX consultant, FatDUX Zagreb
Web Site: http://blogs.msdn.com/xweb/

Expression Newsletter, subscribe now to get yours.

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.

You can download the sample ListView control created in this article from the Expression Gallery at:
http://gallery.expression.microsoft.com/en-us/SkinningWPFList

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. Take a look at the sample control I’ve provided and refer to that sample as needed as you follow along.

Getting Started

The first thing you will need is Expression Blend 3. You can get the free trial from the Expression product site.

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; after all, you can find the source files at the download location so you can examine the architecture there.

But for your own convenience, ook 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:

Let’s Meet the 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

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:

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; }
        }
    }

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.

How and When to Use Command Links as a UI Element

Developing and even visually designing a control is one task; using it properly, in the right context with the right scenarios, is where UX and usability comes into place. At first sight you might consider command links as a distant relatives of radio buttons. After all, they are used in pretty much the same manner: to chose only one option from the several ones that are available—meaning that they always appear in sets, never isolated. As I said in the introduction to this tutorial, they appear lightweight, clean, without heavy borders, resembling the hyperlinks (therefore the name).

The other part of the name, “command,” makes a lot of sense because, by clicking the command link, users are either committing the command and closing the window or proceeding to the next page (if used within the wizards, as was the case when I was explaining the wizards pattern).

So, here are several of the most important guidelines regarding usage of the command links:

1. Command links should be used only in cases when they are presenting mutually exclusive options. Simply stated, users can select one and only one available option.
2. When a user clicks a command link, it will execute the command and close the window (or dialog), or it will proceed to the next step if used within wizards. This implies that they cannot be used within property windows or within tabs, since they are closing the window after the user clicks them. Of course this holds true for desktop applications. In web space and when designing RIA Silverlight applications,you should use them in the same manner: you can use them either in pop-ups or modal dialogs, or as a part of wizard and navigate to the next page.
3. If you are using command links within wizards, they should be used for gathering users’ choices and selections, not processing them and committing them right away. There are at least two good reasons for this. First, when users see command links, they will intuitively connect them with regular hyperlinks seen on the web and make an assumption that they are connected with flow and navigation. Second, sometimes users will want to return to their previous step and select a different option; you must enable them to do so.
4. Never use less than two, and try to keep the number of command links on same window or page to no more than five or so. Seriously: never use a single command link. The fact is that, though they look lightweight in their appearance, command links do take up some serious screen space; therefore, if you need six or more options, consider using radio buttons.
5. If you have really short explanations or commands, consider using regular command buttons.
6. Description is optional. Provide it when it makes sense to the users, but don’t put too much text. Users should be able to see and make decisions fast. Also, if the main instruction is self-explanatory, you don’t need to use descriptions. Remember: they are optional.
7. On dialog boxes, when gathering information from users and when clicking on a command link will execute a command and close the dialog, provide clear and explicit Cancel or Close buttons (depending on the context). That way the user will be able to cancel the operation fast and will not need to read through command links.
8. If, after a user clicks a command link, the action is not carried out right away, display a busy cursor. If that lasts for longer than five seconds, consider showing a progress bar.
9. The icon is not optional: all command links must have an icon. The arrow icon is the default; use it in all cases except the following:
1. There is a need for immediate elevation (user account control dialog will appear...). In this case you should use a shield icon.
2. Adding a custom icon will help better communicate and visually identify the specific option. The arrow icon is 16 by 16 pixels, but you can use larger icons –32 by 32 pixels is standard. If you need to position a shield on top of an existing icon, then always go for 32 by 32 or, if space allows, consider using 48- by 48-pixel large icons.
10. Command link labels should be clear, concise and understandable. If the option they are presenting is complex, you can use descriptions—but, again, keep in mind that they are optional and should not be overused.