Introduction

The buzz right now is that Silverlight 3 beta is about to be released very soon. But even while developers await its arrival, there are still a few folks out there who don’t have a clue what Silverlight’s all about. This article not only provides a quick intro to Silverlight but also shows you how to create and use a Silverlight+Blend application.

What is Silverlight?

As of today, there is an abundance of definitions for Silverlight. While some call it a cross-browser and cross-platform technology, others call it as a powerful and programmable web browser plugin. Some say it is a framework for designing and implementing rich Internet applications (RIAs). All these definitions are right, and yet Silverlight is so much more than just these.

One of the core benefits of Silverlight is that it integrates several rich features such as animation, vector graphics and so forth that are used for Web applications into a single runtime environment. It can work with XAML and Javascript. It is an excellent technology for streaming media files especially high definition video files.

What can I do with it?

You can develop rich Internet applications, using a variety of controls provided by Silverlight, you can invoke Web services, query and manipulate data and do a lot more things.

What is Blend?

Microsoft Expression Blend 2 is a design tool that allows you to create fantastic user interfaces for such Windows based applications and Web applications. You can use Expression Blend 2 with .NET Framework 3.0 as well as 3.5 applications. And when you combine such a tool with Silverlight, the result is bound to be fabulous.

Onwards then – A hands-on primer

Create a new Silverlight project by launching Visual Web Developer 2008 and selecting Silverlight application. Assume that you name it SilverlightDemo.

Figure 1: Creating the Silverlight application

When you are prompted how to host the application, choose the “Add a new ASP.NET Web project to the solution to host Silverlight” radio button.

The resulting folder structure would be as seen in Figure 2.

Figure 2: Solution Explorer showing the default files

The files, App.xaml and Page.xaml are created in addition to the files, SilverlightDemo.sln,SilverlightDemo.csproj, AppManifest.xml, and AssemblyInfo.cs.

AppManifest.xml defines the assemblies that are included in the Silverlight 2 application.

The file, App.xaml, contains the resources that are defined at the application level. The most important file to look at right now would be the Page.xaml file because this is the file that will be used to define the user interface of the application. Page.xaml is like the core of a Silverlight-Blend project/solution.

Code-behind files are also created for App.xaml.cs and Page.xaml.cs, though they are not seen in the above image.

The default code in Page.xaml is shown in Figure 3.

Figure 3: Default Page.xaml file

Let’s begin editing the Page.xaml file in order to create a user interface.

Place the cursor between the <UserControl></UserControl> tags. Open the Toolbox in the VS Web developer IDE. Drag and drop a Canvas. Then, change the coordinates of the UserControl and Canvas as shown. Unlike in ASP.NET or Windows Forms applications, the Properties window here in Silverlight applications does not allow you to configure properties. You need to edit them through XAML code.

A Canvas is a container control in Silverlight to hold other controls.

Drag and drop a TextBlock in between the Canvas. The resulting Page.xaml file would look as follows:

A TextBlock is a control to display static text, almost similar to a Label control in Windows Forms or ASP.NET.

Add another TextBlock and then edit the properties of the TextBlock controls.

The TextBlock has properties such as FontSize, FontStyle and FontWeight which can be configured through XAML code. The Canvas.Top and Canvas.Left properties allow you to place the TextBlock at desired locations on the Canvas.

A font style refers to the slant of a font. Silverlight 2 implements Italic or Normal. While WPF supports FontStyles value of Oblique, Silverlight 2 does not support it.

Add two RadioButton controls from the Toolbox, after the TextBlock controls.

Finally, add a TextBox, TextBlock and Button control and edit their properties so that the resultant Page.xaml looks like Listing 5.

The outcome in the design view would be as seen in Figure 4.

Figure 4: Design view

Save the project, build it and then close the application.

Launch Microsoft Expression Blend 2.5 and open the SilverlightDemo application. Using Blend you can customize the look and feel of the application. By default, the Design view shows the Projects window pane open on the right. In the center, you see the white art-board or the drawing area. This is where you will be drawing controls and placing items.

Figure 5: SilverlightDemo opened in Blend

Let’s just see some simple experiments on how to customize the fonts and colors.

Click on the TextBlock control and view its properties in the Blend IDE. Figure 6 shows the properties. The various brush properties can be used to change the appearance of the TextBlock.

Figure 6: Properties Window showing brushes

One of the amazing features is the gradient brush which allows you to specify color gradients for controls. For example, you can have a combination of hues for a font color.

Experiment with the various settings on the brushes for all the controls. When you roll the mouse over the button, you will see a bent cursor symbol. Dragging the button using this cursor will result in the button being skewed. You can try and achieve a user interface similar to Figure 7.

Figure 7: Output Rendered using Blend

You can test the output using the Test Solution option on the Project menu.

Summary

Thus, this article explored briefly what is Silverlight, defined Blend, and then went to demonstrate a simple application using Silverlight and Blend. Now that you have gained a foothold into this world, you can now go on to work with it extensively and create rich Web applications.

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.

---

Discussion

Subject	Author	Date
questions about silverlight	Janis Uranis	4/8/2009 5:23 AM
nice page but i have some questions: what about google, can google index silverlight appl? can silverlight run on a linux server with out .net framework? when will silverlight get 3d like wpf and flash? Reply | Permanent link
RE: questions about silverlight	Medusa M	4/23/2009 11:53 AM
Hi Janis, Thanks for your questions. Yes, you can run Silverlight-like applications on Linux, by using a software called Moonlight, which is the Linux compatible version of Silverlight. As for indexing, I m not really sure abt that capability. And 3D, well, you need to ask Microsoft abt that, not me, since they are the ones who created Silverlight. Hope that helped! Reply | Permanent link

---

Please login to rate or to leave a comment.