More Sliverlight

Silverlight has created an amazing buzz amongst web developers. It is truly a beautiful concept which is being transformed into reality as the product matures day by day.

Silverlight is a lightweight cross-browser, cross-platform plug-in designed to create rich internet applications which is freely available for download. It enables developers to create Rich Internet Applications (RIA) and is a competitor to other RIA platforms like Adobe Flash, Adobe Flex, Google Gears, JavaFX and so on. Till date, there have been three ‘major’ Silverlight releases by Microsoft: Silverlight 1.0,Silverlight 2.0 and Silverlight 3.0.

Silverlight 1.0 applications are a mixture of XAML (Extensible Application Markup Language), HTML, and JavaScript. When a Silverlight 1.0 application is run in the browser, it invokes the Silverlight control, which in turn loads up the XAML file.

Silverlight 2.0 is a superset of Silverlight 1.0. The major difference between the two lies in the fact that Silverlight 2.0 includes a refactored version of the .NET framework with CLR 3.0. This change brings along a flexible programming model and has been designed from ground up to support .NET languages like C# and VB.NET, which in turn lets you utilize your .NET skills. Silverlight 2 also supports Dynamic Language Runtime (DLR) for compilation and execution of dynamic languages like IronPython, Managed JScript and IronRuby. Silverlight 2 comes with a subset of the WPF programming model and includes support for user interface controls, layout, databinding, documents, media, and animation. Silverlight can also deliver high-quality video to all major browsers running on the Mac OS or Windows. Silverlight 2 is just a 4.6 MB download but the benefits are huge. The download contains a stripped down version of the .NET framework in your browser. So there is no need to install the .NET framework on client machines.

Silverlight 3 Beta Tools for Visual Studio – this will install the developer runtime of Silverlight 3 Beta, the Visual Studio project templates . Fully supported by Visual Studio and Expression Blend, highlights of new features and functionality of Silverlight 3 include: major media enhancements, out of browser support allowing Web applications to work on the desktop; significant graphics improvements including 3D graphics support, GPU acceleration and H.264 video support; and many features to improve RIA development productivity. Also, in order to fully integrate all the .NET developer tools, Visual Studio 2010 will support a fully editable and interactive designer for Silverlight. New features in Silverlight 3 include:

  • Support for Higher Quality Video & Audio
  • Empowering Richer Experiences
  • Improving Rich Internet Application Productivity
  • Advanced Accessibility Features
  • Out of Browser Capabilities

You can watch on MIX09 What's New in Microsoft Silverlight 3

Adobe Flash is a technology to add animation and interactivity to your web applications. Flash provides a truly amazing cross browser cross platform support to create RIA’s. Silverlight also provides similar features. Silverlight however extends these features by providing a first-class programming framework that incorporates .NET. That means that you can write code that will execute at client side using a .NET language.

Flash Silverlight
Timeline animation in Flash is frame based. It uses transformation matrix. Silverlight uses timeline (vector) based animation.
Flash uses a 3rd party library to store shapes Silverlight uses XAML.
Flash supports multiple video formats/codec’s,  however the output is proprietary Silverlight uses an industry standard codec
Flash content can be created by using Adobe Flash. To create Silverlight content, you can use your existing tools like Visual Studio. Another dedicated tool is Expression Blend
As a programming model, ActionScript has a huge learning curve and is not a common programming skill found in developers. Silverlight has been developed from ground-up using the languages you are already familiar with as a .NET developer. Silverlight content can be created using XAML and a .NET language. This way, you can utilize your existing skills.
Flash provides with 2D animation graphics. So does Silverlight
The cost of Media server licensing in Flash is more. The cost is much lesser than Flash
Full screen video capabilities (720p) not available Scalable full screen video available up to HD (720p)
Flash content binary in nature Silverlight content is textual in nature

We start with creating a simple silverlight project

Click the checkbox below to host this Silverlight application in a website

This is the new project IDE screenshot.

SilverlightApplication2.Web

ClientBin – Initially the folder is empty. But once you compile the application, it will contain a .xap file. A .xap file is nothing but an archive file which contains XAML, some resources and server-side code. When the application is run, the Silverlight plug-in extracts and executes the contents of this archive file.

Default.aspx – an empty .aspx page.

SilverlightApplication2TestPage.aspx – ASP.NET Test page which hosts the Silverlight content

SilverlightApplication2TestPage.html – HTML Test page which hosts the Silverlight content.

Web.config – ASP.NET 3.5 Extensions settings along with the other website configuration settings.

SilverlightApplication2

App.xaml and App.xaml.cs – The App.xaml is required to configure your Silverlight application. You can also declare resources that will be available in all pages of your application.

MainPage.xaml and MainPage.xaml.cs – Contains the UI and the C# code to run the Silverlight application.

If you open up your MyFirstSilverlightAppTestPage.aspx page, you will see syntax similar to the following:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>SilverlightApplication2</title>
    <style type="text/css">
    html, body {
	    height: 100%;
	    overflow: auto;
    }
    body {
	    padding: 0;
	    margin: 0;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div  style="height:100%;">
            <asp:Silverlight ID="Silverlight1" runat="server" 
              Source="~/ClientBin/SilverlightApplication2.xap" MinimumVersion="3.0.40307.0" 
              Width="100%" Height="100%" />
        </div>
    </form>
</body>
</html>

The <asp:Silverlight> control that lets you embed XAML content in an asp.net page. The <%@ Register Assembly="System.Web.Silverlight" ..> points to the Silverlight library containing the <asp:Silverlight> control. The <asp:Silverlight> control contains an attribute called as ‘Source’. The source points to the .xap file contained in the ClientBin folder. And the .xap contains the functionality (XAML) that we have built in the project (contains the Page and App.xaml).

When the application is run, both the projects are compiled and the Silverlight assembly is copied into the ClientBin folder. The Silverlight team has made it very easy for us and has provided the plumbing by default.

We update MainPage.xaml file by adding a simple button control and display it on the asp.net page. 

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="myButton" Content="Click Me">
        </Button>
    </Grid>
</UserControl>

The Silverlight pages are actually usercontrols. The Grid, StackPanel and Canvas are parent controls within which you host other controls. For eg: Here we have added a Button inside the Grid control. After adding the button control, build the application.

Right click SilverlightApplication2.Web, Set as startup project. Now run it. We can see the button control hosted in the ASP.NET page.

Reference Articles