Silverlight : Rich UI graphics, advanced media applications
what : xaml, xap, web host, plugin
Plug in :
- xaml parser,
- PresentationEngine(Animation System, Drawing vector graphs etc)
- Subset of the .NET Framework (CLR & .Net Base class libraries)
- Media Features(download & streaming, audio/video decoders)
- Browser interaction (HTML Bridge, mouse keyboard input & events)
Steps for rendering Silverlight on a web page
Download XAP -> Launch CLR -> Extract xaml & dll -> Load .Net -> Create Silverlight
- User opens a web page with Silverlight
- The page has embedded code which refers to a XAML Application (.XAP) file
The Silverlight Plug-in is installed in the browser, and then downloads the .XAP file
Launch the embedded Common Language Runtime (CLR), the environment which executes and manages the Silverlight application
- Extract the XAML Files and Assemblies from the XAML Application (.XAP) file
- Load the .NET Assemblies
- Create instances of the Silverlight Control that includes:
- Creating a User Interface Element Tree
- Managing the Layout of the User Interface
- Drawing the User Interface
Silverlight application is hosted on a web page using an HTML Object tag. We discuss how this works in the next section “Silverlight Host”.
Silverlight Host :
MSVS & expression blend allows to create the silverlight applications. These applications essentially create a XAML application file(.XAP) file, referenced by a link in the object tag.
There are 3 ways you can host the silverlight application File in web page
1) Hosting the Silverlight in any HTML Page using tag
2) Hosting it in an ASPX page using a silverlight COntrol
3) Hosting it in an ASPX page usign a mediaPlayer control
Using Object tag…we can do as follows
Using Silverlight control which eventually gets converted to object
<asp:Silverlight ID=”Xaml1” runat=””server”” Source=”HelloWorld.xap” Minimum- Version=”4.0.50826.0” Width=”100%” Height=”100%” />
Silverlight Application File
It a single compressed zip file(.zip) that contains the xaml files, .net assemblies & other resources whose extension is changed to .XAP. When a silverlight application is built, the VS compresses all relevant files in this single file.
When a VS creates an Silverlight application, by default it adds App.xaml, App.Xaml.cs, Main.Xaml & Main.Xaml.cs. Where as App files(App_Start, App_Exit, App_Exception) are for application level properties and events. MainPage.xaml and .cs file are the files which contain the first visual of the application.
We have two folders created as Obj & Bin. both has Debug folders. Obj contain .g.cs files which are partials generated files that has InitializeComponent to load XAML etc
To deploy your Silverlight application, you upload the TestPage.html(where Object tag has reference to XAP) and HelloWorld.XAP file to a web server. The HelloWorld.XAP file has all the needed files. HelloWorld Application has the following files in the .XAP:
- any configs
- .net dlls
When the Silverlight Plug-in loads a HelloWorld.zap file in a web browser, it reads the AppManifest file first to find out the entry point. The AppManifest contains EntryPointassembly & entrypointtype can be set to guide the loading process.
The Silverlight plug-in follows the following sequence of events:
- The Xap file is extracted
- AppManifest is consulted for entrypoint dll & class
- Entrypoint dll is loaded & App entrypoint class is seeked first
- InitialiseComponent method of App(App.g.cs) is called to load all resources
- Then App_Start event sets the RootVisual to MainPage.
- Silverlight User interface is rendered based on MainPage.xaml
- Web page displays the content of MainPage.xaml
What makes MainPage.xaml rich is the vector quality of the interface markup language. Try changing the font size to 34, and notice how it scales without loss of quality. Thanks to eXtensible Application Markup Language (XAML), which we are going to discuss in the next section.
It has two parts, one Silverlight XAML ie visual & code behind ie .Net for logic.
The visual part is an advanced HTML, and the code behind file brings the robustness of .NET type safe, managed environment. These two parts make XAML simple and a powerful language.
Extensible Markup Language files (Visual Part)
- XAML is much more advanced than HTML, it lets you declare tags for objects, shapes and allows URL linking to jpg, png images and other multimedia files. While HTML parsing is done at run- time, XAML markup is compiled.The object and shapes you declare in XAML are vector images and can scale without loss of qual- ity. It also supports advanced Anti-alias features for sharp image borders and 2-D animations using story board tags. Animations in XAML are also declared-no programming is involved. XAML Markup files support:
- Vector graphics
- Tag based 2-D animations
- Allow linking images and multimedia files
- The second aspect of XAML is extensibility. XAML is based on XML, so apart from the tags available in the default xml namespace defined for objects and shapes, you can create your own namespace and use your own tags. In fact it’s the extensibility of the Silverlight XAML file which allows for defining a code behind file.
- Let’s look at the MainPage.xaml we created in HelloWorld application.
Hide Copy Code
<UserControl x:class="”HelloWorld.MainPage”" xmlns="”http://schemas.microsoft.com/winfx/2006/xaml/presentation”" xmlns:x="”http://schemas.microsoft.com/winfx/2006/xaml”" xmlns:d="”http://schemas.microsoft.com/expression/blend/2008”" xmlns:mc="”http://schemas.openxmlformats.org/markup-compatibility/2006”" mc:ignorable="”d”" d:designheight="”300”" d:designwidth="”400”">
<grid x:name="”LayoutRoot”" removed="”White”">
<textblock x:name="”TextHello”" fontsize="”34”" margin="”80”"> Hello World !</textblock>
- Note the following four elements:
- Root element UserControl
- The significance of x:Class
- Mapping (xmlns and xmlns:x) and XAML Namespace
- The Grid and TextBlock Object
Let’s talk about each of these to have a better understanding of the embedded code.
- Where Root Element is Usercontrol : we can create two types of XAML templates, one is Applicaiton & other is UserControl type. We use Applicaiton type to set Start, Exit process of Application. Where as UserControl is the visual element where we include our controls.
- x:Class is the way we bind the codebehind to xaml. It includes namespace.CodeBehindClass.
- xmlns is the default xml namespace where we have all tags or controls defined. xmlns:d is the place all language specific things exists attributes like x:Name.
- Grid & TextBlock are similar to HTML table & Label using vector graphics.
XAML .Net `Files :
MainPage.xaml.cs is the place where we can include our .net code to deal with the events of xaml.
MainPage Class = MainPage.xaml + MainPage.xaml.cs becomes,
MainPage Class = MainPage.g.cs(partial class) + MainPage.xaml.cs(CodeBehind) + HelloWorld.g.resources(BAML)
BAML : Binary application mark up language : Which is an intermediate file which becomes a part of the Resources in the Assembly. It is a binary representation of the object hierarchy and properties defined in the source XAML file.