Introduction to Microsoft Silverlight

Contents of this article:

• Contents
• Overview
• What is Silverlight
• Definition
• Platform Support
• Rich Interactive Application
• RIA Stats
• Why Silverlight
• Silverlight vs. Flash
• Silverlight vs. WPF
• Rich vs. Reach
• Showcase
• Deep Zoom
• Deep Inside
• Silverlight and XAML
• Deployment Process
• Silverlight Architecture
• Silverlight 5
• Tooling
• Microsoft Visual Studio 2010
• Microsoft Expression Studio 4
• What's Next
• Demo
• Summary

Overview

In this article we'll have a brief introduction to Microsoft Silverlight, see how it fits with other technologies today, and watch it in action. Get ready!

What is Silverlight

Definition

Silverlight is a Microsoft technology aimed to help developers create rich interactive Web applications with the best user interface features and functionalities. It's available as a plugin for almost all famous browsers available today, and it's used to deliver the next generation media and Web applications.



Figure 1 - Silverlight Logo

When we say rich applications we don't mean those with amazing interfaces and lots of graphics. Indeed, we mean by "rich" those have lots of functionalities not available for standard Web applications. Common examples of rich applications are online document editors and image processors; both are very interactive and offer lots of functionalities that are usually not available for standard Web applications. And that actually what Silverlight is devoted for, its main goal is to allow for developing rich interactive applications for the Web.
Platform Support

Unlike many other Microsoft technologies, Silverlight applications can run everywhere. It's said to be cross-platform, cross-browser, and cross-device. It can run on Windows, Linux, and even Mac, it can run on Internet Explorer, Mozilla Firefox, Google Chrome, and many others, and it also can run on PCs, mobile devices, and handhelds. Really it can run everywhere without any code changes!

One more interesting thing is that Silverlight Web applications can be hosted on any server. You can host your Silverlight application on a Windows, Linux, or Mac server without any additional code changes or configuration.
Rich Interactive Applications

We have been talking about rich interactive applications for a while; now let's see what a rich interactive application really means.

A Rich Interactive/Internet Application (RIA) is a Web application that's very interactive with the user and has lots of functionalities. It's very similar to desktop applications comparing interactivity and features; however, it's a Web application that runs on the browser not the desktop. So we can say that RIA applications have the best functionalities and user interface features of desktop applications and Web applications.

Figure 2 - RIA

Today, there're lots of technologies available for creating RIA applications. The most famous platforms are Adobe Flash, Microsoft Silverlight, and Sun Java. Worth mentioning that every platform of the above mentioned (that includes Silverlight of course) is available through a plugin for the browser, and therefore its runtime must be installed on user's machine in order to be able to run the application.
RIA Stats

Now someone asks: Who wins the race? What's the best RIA platform that one can spend his time and effort to learn?

First of all, let's have a look at the following diagrams that represent penetration rates of Adobe Flash, Microsoft Silverlight, and Sun Java. The first diagram we have comes from http://riastats.com and it shows that Adobe Flash is installed on almost 96% of internet-connected machines. Microsoft Silverlight comes in the second place with about 74% of total internet-connected machines. And Sun Java comes third with about 73% of internet-connected machines.



Figure 3 - RIA Stats

StatOWL shows a bit different data with more details:



Figure 4 - Stats from StatOWL

Looking at the above diagrams we can see that Microsoft Silverlight did a great job in a very short time (first release was on 2007.) However, we can't depend much on this data since, as you know, Microsoft Silverlight is installed automatically on Windows machines via Windows Update.

Now, let's have a look at Microsoft Silverlight features and see what makes it the best RIA platform yet.

Why Silverlight

Other than being delivered by Microsoft, some features of Silverlight are:

• It's FREE.
• It runs on all popular browsers, platforms, and devices.
• It can be run in browser and as a desktop application.
• Easy to create excellent UIs that looks "WOW".
• Enables business application development.
• Supports 2D/3D animations/graphics.
• Natively supports CLR and .NET Framework.
• Can be automated using JavaScript.
• Supports a variety of media (audio/video) formats with streaming capabilities.
• Supports a variety of rich controls including the DataGrid.
• Supports a variety of enterprise technologies including WCF.

In addition, Silverlight is considered to be the main development framework for Windows Phone.


Figure 5 - Windows Phone

Silverlight vs. Flash

Silverlight and Flash are very similar, so which is better, Silverlight or Flash? Since I'm a Microsoft developer and since you are reading now in a .NET blog, and although I haven't ever developed for Flash, I can say that Silverlight is the best RIA platform ever!!! However, we need to be more serious.

InfoWorld did a review and compared between Silverlight and Flash, and the results were so great, Silverlight passed Flash and scored 8.3 points, while Flash got 7.8 points only.



Figure 6 - Silverlight vs. Flash, InfoWorld

Silverlight vs. WPF

Windows Presentation Foundation (WPF) is a graphical subsystem utilizing DirectX for rendering UI in Windows-based application, developed by Microsoft and introduced as part of Microsoft .NET Framework 3.0 and Windows Vista. WPF is considered to be the replacement for WinForms (that considered now Feature-Complete,) while WinForms relies on the older GDI subsystem, WPF relies on DirectX.

On the other hand, Silverlight is actually a subset of WPF, and formerly Silverlight was codenamed WPF/E (WPF/Everywhere) because it's considered to be the cross-platform version of WPF. And while WPF focuses on desktop development, Silverlight focuses on Web development.



Figure 7 - Silverlight vs. WPF

Rich vs. Reach

The following diagram compares some of the available Web development technologies in terms of richness (i.e. UI functionalities) and reach (platform and browser support.)



Figure 8 - Rich vs. Reach

From the above diagram we can see that WPF has the best UI features today. However, it's devoted primarily for desktop development, and it can run only on Windows platforms.

On the other hand, ASP.NET can run everywhere, but unfortunately it doesn't support the UI functionalities required for today's Web.

And finally, Silverlight has the best of UI functionalities, and it also supports a wide range of platforms and browsers (its platform/browser support is expanded each release.)
Showcase

To get a solid understanding of what Silverlight can do, check out some of the Silverlight applications from around the world:

• Deep Earth (http://deepearth.codeplex.com)
  A project utilized Bing Maps allows you to check maps and get directions.
• Hard Rock Memorabilia (http://memorabilia.hardrock.com/)
  For the Hard Rock.
• Sobees (http://sobees.com/web)
  A Web-based social-media client.
• Bing Maps Streetside (http://www.bing.com/maps/explore/)
  Check maps, get directions, and walk through the streets through this app.
• PhotoSynth (http://photosynth.net)
  Capture places, share them with your friends, and publish them.
• PivotViewer (http://www.silverlight.net/learn/pivotviewer/)
  View massive amounts of data on the Web and visualize them.
• Fantasia (http://nokola.com/fantasia/)
  A Web-based image processor.
• Nibbles Tutorials (http://www.nibblestutorials.net)
  Silverlight tutorial Website.
• SilverlightShow (http://www.silverlightshow.net/Books.aspx)
  Check out this nice collection of books for Silverlight, WPF, XAML, and Windows Phone.
• Shidonni (http://www.shidonni.com)
  Games for your kids.
• Justin Angel (http://justinangel.net)
  Justin Angel's Silverlight blog.

And one of the most impressive applications is SilveOs (http://silveos.com/);  a mini-operating system for the Web.

And thousands of Silverlight applications are available here too: http://www.silverlight.net/showcase.

Deep Zoom

And another great feature of Silverlight is the DeepZoom technology that was introduced by Microsoft as part of Silverlight. DeepZoom allows you to view very large high resolution images. It reduces the time of initial load by downloading only the region being viewed at the resolution it's displayed at. Subsequent regions are downloaded as the user pans to (or zooms into) them.



Figure 9 - Deep Zoom, Microsoft Silverlight

Deep Inside

Silverlight and XAML

Like WPF, user interface in Silverlight is declared in a specific language called Extensible Markup Language (or XAML, pronounced 'Zammel'.) XAML is an XML-based language created by Microsoft which is used to initialize structured values and objects. XAML elements are mapped directly to CLR objects (e.g. a <Button> element maps to a Button object.)



Figure 10 - XAML Logo

Former ASP.NET developers are somewhat familiar with the nature of XAML. You have a WYSIWYG XAML designer that you use to design the interface of your application. The code for this interface is available through a code-behind file, where you can write in your preferred .NET language.

The concept of two files for the same page (e.g. a XAML file for the interface and a CS file for the C# code) separates two main roles in application development, design and development. The designer can work in the XAML file, and the developer can work in the code file, and both files are linked together. This also leads to a loosely-coupled design that separates user interface code from the business logic.

Figure 11 - Designer vs. Developer

Deployment Process

What steps you would follow to deploy your Silverlight application to your users? That's what this section is devoted for.

When you build your Silverlight application, the XAML markup, as well as the code and all other resources, is compiled into .NET assemblies which are then compressed using ZIP and stored in a XAP (.xap) file.



Figure 12 - XAP Files

The XAP file can then be hosted in a Web server and referenced by Web pages declaring the Silverlight plugin object. And when the user navigates to the page, the XAP file is downloaded to his PC and executed on the Web page by the Silverlight runtime.



Figure 13 - Silverlight Application Deployment Process

So all you need is just to develop your application, get the XAP file, insert the plugin into a Web page, and then publish the page and the XAP file to the Web.

Silverlight Architecture

The following illustration shows the essential architecture and components of Microsoft Silverlight. It shows how the presentation (interface) core components fit together with other .NET and Silverlight components, and what services does the provider offer.



Figure 14 - Silverlight Architecture

Silverlight 5

The current stable version of Silverlight is Silverlight 4. Back to PDC 2010 the 5th version of Silverlight was introduced, it's still in Beta but it's supposed to be released soon.



Figure 15 - Silverlight 5 Logo

Here's a brief overview of the forthcoming Silverlight 5 features:

• Media:
  
  
  • Hardware Video Decode
  • Better Power Management
  • Remote Control Support
    
   
• Text and Printing:
  
  
  • Better Text Rendering
  • Full OpenType Support
    
   
• Graphics:
  
  
  • GPU Accelerated Graphics
  • 3D Graphics Support
    
   
• XAML:
  
  
  • XAML Debugging
   
• Application Development:
  
  
  • Windows Azure Support
  • P/Invoke
    
   
• Testing and Performance:
  
  
  • Automated UI Testing
  • Faster Startup
  • o Hardware Acceleration
  • 64-bit Support

More about Silverlight 5 can be found here: http://www.microsoft.com/silverlight/future.

Tooling

The most common tools for Silverlight are Microsoft Visual Studio 2010 and Microsoft Expression Studio 4.

Microsoft Visual Studio 2010

Best for developers, good for designers. Check it out here: http://www.microsoft.com/visualstudio/en-us.



Figure 16 - Microsoft Visual Studio 2010

Microsoft Expression Studio 4

Consists of a 5 tools:

• Microsoft Expression Blend
  Visual user interface builder for Silverlight and WPF.
   
• Microsoft Expression Web
  WYSIWYG website designer and editor.
   
• Microsoft Expression Design
  Raster and vector graphics editor.
   
• Microsoft Expression Media
  Digital asset and media manager.
   
• Microsoft Expression Encoder
  Profession media (video/audio) encoder

Figure 17 - Microsoft Expression Studio 4

What's Next

To start with Silverlight, you have to install the following components:

• Silverlight SDK (core components only):
  http://bit.ly/silverlight-4-sdk
• Silverlight 4 Tools for VS 2010 (core components + additional tools for VS2010):
  http://bit.ly/silverlight-4-tools
• Silverlight 4 Toolkit (additional components):
  http://silverlight.codeplex.com

Demo

In the following example, we'll create the Hello World application in Silverlight. Follow those steps:

First, ensure that Silverlight SDK is installed on your PC, and launch Visual Studio 2010 and select New Project.



Figure 18 - Creating a New Silverlight Application

From the New Project dialog, select your desired language from the left and select Silverlight as project type. From the middle pane, select Silverlight Application to start.

Now another dialog appears asks you to specify whether to create another Web application to host the Silverlight application or not. As you know, Silverlight applications run inside a plugin defined in a Web page, and that dialog asks if to create a new Web Application project for you to host the Silverlight application or to create just a simple HTML page to host it. Leave the dialog with no changes and ensure that you have selected Silverlight 4 from the Silverlight Version combo box and click OK to proceed.



Figure 19 - New Silverlight Application Settings

Now let's have a look at what Visual Studio has created for us. Looking at the Solution Explorer we can see that Visual Studio has created two projects, one is the Silverlight project, and the other is a Web project that's going to host this Silverlight application.




Figure 20 - Silverlight Project in Solution Explorer

Looking at the Web project we can see that VS has included two test pages in that project, the first is an ASPX page and the second is a simple HTML page, both define the Silverlight plugin and both are ready to show you your Silverlight application when you browse to them. The difference is that ASPX pages can define ASP.NET elements and code, while the simple static HTML cannot.

Back to the Silverlight application, we can see that it define 4 files:

1. App.xaml:
   
   Define application-wide interface elements.
    
2. App.xaml.cs (C# code file, linked to App.xaml):
   
   Define the startup logic and any other application-wide code.
    
3. MainPage.xaml:
   
   The main application page; contains the interface elements.
    
4. MainPage.xaml.cs (C# code file, linked to MainPage.cs):
   
   The business logic and code for the main application page.

Then we have two pages, the first is App.xaml that defines the application-wide elements and code (inside App.xaml.cs,) and the second is MainPage.xaml that defines the main page of your application where you can define your interface elements and code them (inside MainPage.xaml.cs.)

Now let's design our interface. Go to MainPage.xaml and inside the <Grid> element define a Button (you can also drag the button from the Toolbox to the designer to define it):

<Button Width="100" Height="25" Content="Say Hello" Click="Button_Click" />



Figure 21 - Button in the Page

From the previous line of code we can see that we have defined a Button control using a <Button> element, and we have also set the control's characteristics and properties using the element attributes. And to have our button respond to user clicks, we have wired up the Click event into the function Button_Click() that we're going to define it in the code file.

Now go to MainPage.xaml.cs and define the Click event handler for the button:

private void Button_Click(object sender, RoutedEventArgs e)

{

    MessageBox.Show("Hello, World!");

}

Figure 22 - The Code-Behind File

Now run the application and try it.



Figure 23 - Running Silverlight Application

Before we leave this section, let's have a look over the plugin required for Silverlight. Go to and of the test pages on the Web project and step down until you reach the <object> element that defines the plugin. Simply, the Silverlight application requires only the following HTML code to define its plugin:

<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication1.xap"/>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

As you see, we have references the XAP file in the page by using the source parameter. When you build your application in Visual Studio, it will create a new folder besides the test page called ClientBin and put the XAP file inside it so you can reference it in the page.

Clear, aih?

Summary

• Silverlight is a cross-platform application framework for writing and running rich Internet applications (RIA.)
• Its runtime is available as a cross-browser, cross-platform, and cross-device plug-in.
• It's the main development framework for Windows Phone.
• It's a subset of WPF so it depends on XAML for UI design.
• You define the interface using XAML, and write the code using your preferred .NET language.
• The XAML markup, as well as the code, is compiled into .NET assemblies and compressed into a XAP file.
• The XAP file is then referenced by a prepared Web page and then downloaded to client's PC when he navigates to the page.
• Version 4 is the current stable version of Silverlight.
• Silverlight 5 is currently in beta and it will be released soon.
• You use Visual Studio 2010 and Microsoft Expression Studio for developing and designing your Silverlight application.
• Microsoft Expression Studio is preferred for you if you are a designer.