Learning Microsoft Silverlight 4 (Part 1)

What is Silverlight?

Microsoft Silverlight is a cross-platform cross-browser plug-in for developing rich interactive applications for the web. It offers a programming model that is familiar to the web developers. Silverlight is programmed using a text bases mark-up language format and a JavaScript running inside browser’s script engine. Silverlight applications are created using a combination of Expression Studio (Expression Design, Expression Blend, and Expression Encoder) and Visual Studio. The Silverlight architecture is based on eXtensible Application Markup Language (XAML) which is XML based that what makes Silverlight cross-platform cross-browser plug-in. XAML provides a unified way to declare graphics, media, animation, text and layout. To know more about Silverlight, please go to the official site http://www.microsoft.com/silverlight/.

Getting Started with Silverlight 4

Before we start learning Silverlight 4, we need to install Visual Studio 2010 to develop Silverlight 4. (Silverlight 4 can be developed only in Visual Studio 2010.) After installing Visual Studio 2010, we need to install the Silverlight 4 Tools for Visual Studio 2010 which can be downloaded at http://www.microsoft.com/en-us/download/details.aspx?id=18149. It contains the following elements:

• The Silverlight developer runtime: This is a special version of the Silverlight plugin that Visual Studio can attach a debugger to, to help you understand where issues come from, and to solve them.
• New Templates for Visual Studio: These are used to create new projects and new items (pages, controls, classes and so on) in your Silverlight application.
• The Software Development Kit (SDK) for Silverlight: This kit contains all the libraries you will need to create and deploy Silverlight applications, tools to create and package Silverlight application (for example, on a build server), and pointers to additional resources online such as the official Silverlight documentation.

After you have installed the Silverlight tools for Visual Studio, you are ready to create you first Silverlight application.

Creating a Silverlight Application

1. Start Visual Studio 2010.
2. Select File, New, Project.
3. In the New Project dialog box, select the Silverlight category on the left, and create a new Silverlight Application named HelloSilverlight, as shown in the figure.
4. In the next dialog box, choose whether you want to create a new Web Application Project, a new ASP.NET Website, or a new ASP.NET MVC application to host the Silverlight application.

Choosing between web application project, website or MVC application depends on what you want to achieve, personal preferences, what existing website you want to integrate your Silverlight application into, and so forth. The Silverlight application will be strictly the same, only the hosting web application will differ. The experience shows that web application projects are more flexible than ASP.NET websites, so this is what we will use. ASP.NET MVC applications are also very interesting and offer a nice alternative to ASP.NET web applications. For more information about ASP.NET, check out the website at http://www.asp.net.

Inspecting the Application

Based on the indications we gave, Visual Studio created two projects, as shown in the figure. (It is not possible to mix Silverlight application and “full .NET” applications in a single solution.

Let’s review the projects and the files.

• HelloSilverlight is the Silverlight application itself. It contains four important files:

App.xaml and App.xaml.cs contain the global application object, global event handlers, global resources, and so on. This is also the main entry point for the application.

MainPage.xaml and the attached MainPage.xaml.cs are like the name indicates the main page for the application. You can have multiple pages in the application; the main page is the one that is created when the application starts.

• HelloSilverlight.Web is the web application, running on ASP.NET. It contains the files that will be downloaded to the web browser.
• ClientBin\HelloSilverlight.xap is a zip file with all the binary files needed to run the application in the plug-in (in our case, this is just HelloSilverlight.dll), and a file named AppManifest.xaml, called the application manifest. It contains information that the plug-in needs to start the application, as well as optional indication about the possibility to run the application out of the browser, and so forth.
• HelloSilverlightTestPage.aspx and HelloSilverlightTestPage.html are two generated test pages hosting the Silverlight application. If you open either file, you will see generated HTML and JavaScript code, including the object tag within which the Silverlight plug-in will run.
• Silverlight.js is a utility file with JavaScript functions that can be interesting to use within the HTML page. For example, there is a function helping you to check which version is installed on the client PC, and to react accordingly by alerting the user.

Unpacking an XAP File

If you want to look by yourself at the content of an XAP file, follow these steps:

1. Right click the ClientBin folder in the Solution Explorer, and select Open folder in Windows Explorer from the context menu.
2. Make a copy of HelloSilverlight.xap file and rename it to HelloSilverlight.zip.
3. If the operating system supports it (for example, in Windows 7), you can open the zip file just like any other folder and see the content.
4. On operating systems that do not support this function, you can use a zip tool to unpack the XAP file.

(Note that if you want, you can recompress the XAP file with a higher level of compression and get smaller files to send to the browser. The file will be transmitted faster, but it will take longer time to unpack it to start the application.)

Using the Visual Studio Designer

Open the file MainPage.xaml. If you didn’t change the Visual Studio settings, you should now see some XAML code. XAML is an XML-based language used in Silverlight and Windows Presentation Foundation (WPF) to describe the user interface. There are other possible usages for XAML, and in fact it is really just a serialization language for .NET.

With MainPage.xaml open in the designer, you should see tabs at the bottom, as shown in Figure.

• Use the Design tab to see the scene in the designer, and use the XAML tab to see the XAML code.
• Use the grip to slide the separator up, and visualize the XAML code on top and the design surface on the bottom.

Implementing Hello Silverlight

Let’s implement a simple application with the following steps:

Set a LinearGradientBrush in the main Grid by adding the XAML code below within the Grid tag. You must copy these lines between the opening tag <Grid x:Name=”LayoutRoot”> and the closing tag </Grid>. You must also remove the Background property that was set in the Gridtag initially.Setting a LinearGradientBrush<Grid.Background>

<LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”>

<GradientStop Offset=”0” Color=”Red”/>

<GradientStop Offset=”0.5” Color=”Red”/>

<GradientStop Offset=”1” Color=”Orange”/>

</LinearGradientBrush>

</Grid.Background>

The below figure is what you will see in the design tab after adding LinearGradientBrush code.

Go to the XAML tab select the LinearGradientBrush as shown in the figure below and then press F4 to see the Properties Window for LinearGradientBrush. You can play around with the properties for LinearGradientBrush using that Properties Window.

Adding Some Text

We will now add a text block to our scene by following the steps:

1. Make sure that the Toolbox is visible in Visual Studio. It should be visible on the far left of the Visual Studio window, just below the toolbars. If you do not see the Toolbox, select View, toolbox from the menu.
2. If the Toolbox is collapsed, expand it by passing the mouse on the vertical Toolbox button.
3. From the Common Silverlight Controls section in the Toolbox, drag a TextBlock and drop it on the grid in the visual designer.
4. With the new TextBlock selected, in the property editor, click the name textBlock1 just above the Properties and Events tabs. This allows you to edit the name. For now, we don’t need a name for this text block, so you can just delete it.
5. Using the Properties editor or directly in XAML, find the Text property and set it to Hello Silverlight. Then change the following properties:

• Set the HorizontalAlignment and VerticalAlignment properties to Center.
• Set the Margin property to 0.
• Set the Width and Height properties to Auto.
• Set the FontFamily property to Verdana.
• Set the FontSize to 72 and the FontWeight to Bold.
• Finally, type White in the Foreground property.

After you complete these steps, you should see the image shown in Figure in the visual designer.

Resizing Text

1. Select the user control by clicking the outside of the gradient grid area. You will see the below icon at the bottom of the gradient grid area.
2. Re-size the user control so that you can see the whole Hello Silverlight text as shown in the figure and then save the project.

Now we have one Silverlight application and we already have some look and feel for the Silverlight application. In next section, we will learn together how to use Expression Blend to refine the application and add movement to it. As Expression Blend and Visual Studio work on the exact same files, it is important to save all the files before you move from one environment to another.

(Reference Book: Silverlight 4 Unleashed)

Advertisement