Dissecting Silverlight Control/XAP package and How to create a barebone silverlight application – Silverlight wins hands down over ADOBE AIR/Flash in some areas

When you use visual studio to create a silverlight application, you will notice that it creates the application xaml, page xaml and their corresponding code behinds. When you build the application, xap package will be created inside ‘ClientBin” folder along with a test page.

I will show you how to create a silverlight xap package without visual studio with a very simple control to help you understand how silverlight control essentially works. In my previous post I mentioned how a browser based on http response loads Silverlight Plug-in(NPCTRL.DLL) with MIME type=”application/x-silverlight-2″ specified in object tag.

Let’s first look at Silverlight Application Project which gets created by default using Silverlight Application project template in visual studio. It creates the following files in a silverlight application project

-Properties
—AppManifest.xml
—AssemblyInfo.cs
-App.xaml
—App.xaml.cs
-Page.xaml
—Page.xaml.cs

AppManifest.xml contains the XAML object elements Deployment and Depolyment Parts which is used to build application package’s manifest file. When AppManifest xaml file is generated for XAP package, it also includes the followings

<            EntryPointAssembly=”MySilverlightControl”
EntryPointType=”MySilverlightControl”
RuntimeVersion=”2.0.31005″>
<AssemblyPart x:Name=”XName” Source=”MySilverlightControl.dll” />

EntryPointAssembly/Type and the Assembly Part are mandatory in a Silverlight Application because that’s how coreservices determines the entry point in an assembly.

App.xaml.cs implements the followings

public partial class App : Application

{

public App()
{
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;
this.UnhandledException += this.Application_UnhandledException;

InitializeComponent();
}

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Page();
}

private void Application_Exit(object sender, EventArgs e)
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs         private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)

Application class is essentially adding the event listener to AGCORE.DLL through Managed Runtime and sets the root as Page object in a visual tree. Below is the implementation of InitializeComponent

public void InitializeComponent()
{
    if (!this._contentLoaded)
    {
        this._contentLoaded = true;
        Application.LoadComponent(this, new Uri("/MyControl;component/App.xaml", UriKind.Relative));
    }
}

InitializeComponent implementation will fool you into believing that you will need xaml file. But you don’t even need to call InitializeComponent unless of course you are using designer generated code, behind the scene designed generates the source code for xaml file

So far, we have seen that silverlight project has an App class which derives from System.Windows.Application and apart from setting the event listeners for error handling and etc, it just sets the visual root to a Page object which is nothing but System.Windows.Control.UserControl deriving from System.Windows.Controls.Control ..and Control in turn from UIElement.

When you build the project, it will create a xap pacakge which is nothing but just a ZIP file. XAP package includes assemblies and the application manifest XAML file and that’s what get hosted in a web page

Let’s put these pieces together

1. We need a web server which can support MIME Type=application/x-silverlight-2 to serve silverlight content

2. web page hosts silverlight control by including a XAP package in object tag

3. XAP package is a zip archive format which includes application manifest(xaml file) and a managed assembly

4. managed assembly should have System.Windows.Application object

5. Application object needs a visual root tree which could be any control/UIElement

6. and of course managed assembly will need silverlight runtime

Steps to create a barebone Silverlight Control with no visual studio or xaml

1. Open your notepad and type the followings to create your barebone silverlight control deriving from System.Windows.Application and save it as MySilverlightControl.cs

public class MySilverlightControl : System.Windows.Application
{

//constructor
public MySilverlightControl()
{

//create a textblock control and assign a width,height with text =”hello silverlight”
System.Windows.Controls.TextBlock txtBlock = new System.Windows.Controls.TextBlock();
txtBlock.Text = “Hello Silverlight”;
txtBlock.Width = 800;
txtBlock.Height = 600;

//make sure it is centered
txtBlock.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
txtBlock.VerticalAlignment = System.Windows.VerticalAlignment.Center;

//margin (left,top,..)
txtBlock.Margin = new System.Windows.Thickness(400, 300, 0, 0);
txtBlock.FontSize = 24;
//set the application visual root to txtblock control
this.RootVisual = txtBlock;
}
}

2. Launch command prompt to compile this file to create a MySilverlightControl.dll

C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\csc /target:library MySilverlightControl.csc.exe /reference:”C:\Program Files\Microsoft Silverlight\2.0.40115.0\System.Windows.dll”

3. Type the followings in a notepad to create application manifest xaml file

<Deployment xmlns=”http://schemas.microsoft.com/client/2007/deployment”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
EntryPointAssembly=”MySilverlightControl”
EntryPointType=”MySilverlightControl”
RuntimeVersion=”2.0.31005″>
<Deployment.Parts>
<AssemblyPart x:Name=”XName” Source=”MySilverlightControl.dll” />
</Deployment.Parts>
</Deployment>

Rememeber these attributes are mandatory in a silverlight application assembly but not in a class library. I have copied Runtime Version from http://msdn.microsoft.com/en-us/library/cc265156(VS.95).aspx

The above URL describes the MIME type and their corresponding silverlight runtime version. EntryPointAssembly and the other attributes are self explanatory and that’s what will be used by coreservices.

4. Zip those 2 files AppManifest.xaml and MySilverlightControl.dll with .xap extension

5. Create the following html file and copy it under the same folder as .xap file

<html>
<head>
<title>Barebones – Silverlight Control Testing</title>
</head>
<body>
<div id=”silverlightControlHost”>
<object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”100%” height=”100%”>
<param name=”source” value=”MySilverlightControl.xap”/>
</object>
</div>
</body>
</html>

Below is the snapshot

This is it and your silverlight control is ready to be hosted.

Obviously, you don’t need to manually create it, but this is an attempt to explain how silverlight works and what are the components involved in a silverlight control. You can dynamically generate a code or even use Reflection.Emit to generate MSIL and above all host your content on any webserver with mime type=”application/x-silverlight-2″ for silverlight 2 runtime.

This makes Silverlight very powerful and at the same time very simple to implement and silverlight coreclr has great debugging tool in WinDbg/CoreCLR!SOS.

Kudos to Microsoft Silverlight team.

silverlight is very appealing when it comes to out of browser experience and the development platform. Of course there are some limitations in silverlight app because it runs in security sandbox model so that means no access to filesystem but the development platform along with deployment makes a great case for consideration if you are thinking about using Adobe Flash/AIR

Twitter This

Username: Password: