Using a combination of Silverlight and Blend, you can design and develop rich user interfaces for Web applications.

Introduction

Silverlight 2.0 provides an extensive set of controls that you can use to design your rich Internet applications.

Microsoft's Expression Blend 2 is a new design tool for use with WPF and Silverlight applications. Blend, as it is popularly called, supports both Silverlight 1.0 and 2.0 applications.

Using a combination of Silverlight and Blend, you can design and develop rich user interfaces for Web applications.

The following step-by-step procedure explains how to create a button, set its background, foreground, and then transform it.

Prerequisites

It is assumed that you have installed Silverlight 2 and Expression Blend 2 (along with SP1) on your machine before you begin with the steps below. 

To begin with, launch Visual Web Developer 2008 and create a new project.

Select Visual C# as the language and Silverlight Application as the project template. Name the project as Button. Figure 1 shows how to do this.

Figure 1: New Project dialog box

This will create the solution and you will see a number of files including Page.xaml, which is your main application file.

The default XAML code in Page.xaml will be as follows:

Listing 1: Page.xaml

Place the cursor between the <Grid></Grid> tags and then open the Toolbox using the View menu.

From the Toolbox, drag and drop the Button control into the XAML code (between the <Grid></Grid> tags).

This will result in Page.xaml having the following code:

Listing 2: Page.xaml after adding Button

However, the button will not be rendered on the screen, that is, it will not be visible yet, because the properties haven’t been set.

Let us now edit this button using Expression Blend.

Launch Microsoft Expression Blend and open the Silverlight application project in it.

To view the properties of the button, you will need to display the Properties window. You can do this by clicking on Window menu to display its options as shown in Figure 2.

Figure 2: Selecting the Properties option on the Windows menu

There are many properties of the Button control that can be configured. As seen in Figure 3, you will expand the Brushes properties so that you can change the color settings for the button.

Figure 3: The Brushes properties

You can experiment with different color gradients and styles for the background, foreground and border color of the button using the respective brushes. Figure 4 demonstrates how these can be configured.

Figure 4: Setting the various brush values

Once the colors have been set, you scroll down to the Transform property and set the values as shown in Figure 5. This option lets you transform a control, and apply operations such as a scale or a skew on it. 

Figure 5: Setting the Transform values

Thus, you have created a button with a color gradient and a transform. You are now ready to build and test the solution with Internet Explorer. Building a project/solution in Expression Blend 2 is similar to how you do it in Visual Studio applications except that here you use one of the Project menu options instead of Build. Testing is even easier, you just click Test Solution option on the Project menu or press the F5 key.

As you would know by now, one of the basic controls provided by Silverlight is the CheckBox control. Let us see how to design the look of the CheckBox in Blend and add event handler code for it using Blend and Silverlight.

Launch Expression Blend and create a Silverlight 2 application in it. Let us assume the application is named CheckDemo.Edit the default Page.xaml such that the default Grid is replaced with Canvas.

Drag and drop two CheckBox controls in the artboard area. Arrange them one below the other. Specify their content as Music and Reading respectively. Name the two controls as chkHobbies1 and chkHobbies2 respectively. Create a TextBlock named txtblkMessage below the two checkboxes.

Open the Properties window for the first CheckBox and edit its brushes as shown.

Figure 6: Setting the CheckBox properties

Similarly, edit the properties of the second CheckBox and choose the same brush colors as the first one.

Next, click on the lightning symbol on the Properties window.

Figure 7: Opening the Events window

The Events window for the CheckBox in Blend IDE will be displayed. A list of events that are available for CheckBox will be displayed. Double click on Checked to generate a empty default event handler for the first CheckBox. If you have Visual Studio 2008 Standard or Professional edition, then the event handler method will open in that IDE.

If, however, you have Express edition installed, the event handler method will be copied to the Clipboard and you have to manually copy it to Page.xaml.cs in VS IDE.

The empty event handler method will look as shown below:

Using the above steps, generate empty event handler methods for Checked event of the second CheckBox and UnChecked events of both the checkboxes.

Add a Button control below the CheckBoxes and generate a Click event for it. Also add a TextBlock control (but no event for it). Open VS IDE and edit the Page.xaml.cs so that it looks as follows:

Listing 3: Page.xaml.cs

When you build and execute the application, you will see that the TextBlock appropriately reflects the choices made in the CheckBox controls.

Conclusion

In this article, you learnt how to work with a few basic controls using Blend and Silverlight.

About Medusa M

Medusa loves experimenting with technology trends, especially that of Microsoft. This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.