Share via

Learning Silverlight – Part 1 – Beginner to Expert

  • Article

Introduction

Some people really believe the future is in the browser, apparently, but nobody can agree how we deliver rich media experiences. HTML coupled with AJAX has proven to be an effective way to develop a compelling experience. But many agree that there are limitations in what can be done with HTML and Javascript. That’s why developer tools such as Adobe Flash have evolved to pick up where HTML leaves off, going beyond standard controls and providing new interfaces with animation, custom shapes, video and audio. And then there are the Silverlight enthusiasts, such as myself, who believes that its enterprise features make it a compelling technology.

Silverlight’s feature set is enterprise ready. It starts with a very strong data model that lets developers easily interact with data, whether the approach uses REST-ful interfaces or SOAP. Silverlight supports sophisticated query languages such as LINQ and likely PLINQ in .NET 4.0.

The development IDE for Silverlight 2 is Visual Studio 2008.  Microsoft has the best development IDE on the market.  Whether you are programming are a C++, C or Java programmer, you can’t deny the power of Visual Studio 2008. Silverlight 2 runs on a subset of the .NET 3.5 Framework and supports multiple languages. The two flagship languages are C# and VB.NET.

I could carry on for quite a while. But I’m all about the code so let’s get started.

Step 1 – Create a new Silverlight project

Summary

I will start from the beginning, with File/New Project. Then I will select the Project Type, which will be a Silverlight Application. The project will need a name, of course.

File New Project

image

Project Type & Project Name

image

 Hosting Silverlight

If you develop in Silverlight, you will need to host your Silverlight project in a separate project, which will act as the host for users to go to download and run your Silverlight application. At the end of this step you will have 1 solution with two projects. The first project is the Silverlight application, and the second project is the hosting web site.

Hosting Project – continuation of the File New Project Silverlight Wizard

image

Renamed to ‘SilverlightHost’ (select ASP.NET Web Site)

image

Projects ready to develop with 

image

 

Step 2 – Start building out our Silverlight project

Summary

We are ready to start building the application. When the user interacts with my application he/she will be looking at MainPage.xaml, which is exactly the place I will add some XAML code.

Grids – the best way to develop an interface

We will need to start with a container for our controls (TextBoxes, Labels, etc) because we will need to position the controls on the page.

Copy this code to the clipboard

 <Grid x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">

     <Grid.RowDefinitions>

         <RowDefinition Height="40"/>

         <RowDefinition Height="220"/>

         <RowDefinition Height="40"/>

     </Grid.RowDefinitions>

     <Grid.ColumnDefinitions>

         <ColumnDefinition Width="75" />

         <ColumnDefinition Width="325"/>

     </Grid.ColumnDefinitions>

 </Grid>

 

We have two choices

We can either use Expression Blend or Visual Studio to add XAML code to our project. I will demonstrate Expression Blend a little bit later.

Expression Blend is a tool designed to help us author XAML based interfaces.

image

Choose "View Designer” above. I will paste over the existing grid with grid code above.

image

The grid code has been pasted into MainPage.xaml. Our grid has 3 rows and 2 columns. There is no content in grid –yet.

image

We can still run our project. But first let’s compile the project. This will do a few things:

  1. A dll file will get generated, that is your Silverlight project (Figure 1)
  2. This dll file will get compressed into a xap file (Figure 2)
  3. That xap file will be embedded into a web page (Figure 3)

 

Figure 1

image

Figure 2

image

 

 Figure 3 – Notice the xap file is embedded in SilverlightStep01TestPage.aspx

image

Figure 4 – Our xap file contains two files

  1. SilverlightStep01.dll
  2. AppManifest.xaml

image

 

Step 3 – Viewing our Silverlight Application

Summary

We are ready to run the application. Right click on our hosting web page (SilverlightStep01TestPage.aspx) and select View in Browser.

image

Our running Silverlight Application – pretty boring and featureless

image

VS 2010

This blog entry takes a new turn in terms of using Visual Studio 2010 as the dev tool.

*NOTE*

Unzipping the source is not enough !

  Because Silverlight applications interact with a hosting web site, you cannot simply unzip the files without first creating a web site.I recommend following the directions in this post to produce your Silverlight application. image

Source Code (for the project thus far)

image

 

Step 4 – Next Blog Post

Summary

We have completed the initial framework from which we will develop the rest of the application.

See Learning Silverlight – Part 2 – Beginner to Expert when it becomes available.

Comments

  • Anonymous
    January 16, 2014
    Has the Part 2 been completed :) i liked this article