Framework for building rich, browser hosted applications that can
run on a variety of operating systems.
Works through a browser plug-in.
pages can have interactive graphics, can use vector
animations and play video and sound files.
Aims to combine the raw power and cross-platform support of
Flash with a first-class programming platform that incorporates
the fundamental concepts of .NET.
Based on a scaled-down version of the .NET’s CLR and allows
developers to write client-side code using pure C#.
Advantage of plugin model is that user needs to
install just a single component to see content created
by range of different people and companies.
Plugin installation requires a small download (approx.
4MB) and forces the user to confirm the installation.
Once installed, the browser can process any content
that uses the plugin with no further prompting.
Microsoft Windows (Minimum browser versions)
IE 6.0, FireFox 1.5
MAC (Minimum browser versions)
FireFox 2 and Safari 3
Does not currently work on LINUX. Mono Team is
creating an open source LINUX implementation of
Silverlight 1 and 2, named Moonlight, being developed
with key support from Microsoft.
Silverlight borrows WPF model for rich client-side user
Silverlight uses a subset of WPF.
UI is defined using XAML markup.
Borrows same basic controls and styling system from
Uses shapes, paths, transforms, geometries and brushes
for drawing 2D graphics – all similar to WPF.
Provides a declarative animation model based on
storyboards – similar to WPF.
Uses MediaElement class to show video or play audio
– similar to WPF.
Included 2D drawing features and media playback support.
No support for CLR and .NET languages.
Added the CLR and a subset of .NET framework classes and
a UI model based on WPF.
Same development model as Silverlight 2.0.
Adds some selected group of features and performance
Visual Studio 2008 (With SP1)
Visual Studio 2008 extensions for Silverlight 2 or 3
which include Silverlight runtime and Silverlight
SDK (SINGLE DOWNLOAD).
Visual Studio 2008
No graphical design time features.
All markup needs to be written explicitly.
Visual Studio 2010
Has the same coding support as VS 2008, but adds a visual
designer that’s influenced by Microsoft Expression Blend.
Supports drag and drop.
Microsoft Expression Blend 3.0
Provides rich support for creating Silverlight UI.
Provides gradient fill effects for certain type of user
Ordinary web site with HTML pages
Entry point to the Silverlight applicationis an
HTML page that includes a Silverlight content
ASP.NET web site
Contains 2 projects: one which contains all the
Silverlight Application files, and the other is the
ASP.NET web site that is deployed along with the
Silverlight files. The entry point for the Silverlight
application can be a .aspx or a .html file.
App.xaml and App.xaml.cs
Used for configuring a silverlight application.
Used for defining resources that will be made available to all pages
in the application.
Used for reacting to application events such as startup, shutdown
and error conditions.
Also used for specifying the startup xaml file.
Defines UI (collection of controls, images and text) for a page.
Actually a user control inherited from UserControl class.
Lists assembly dependencies.
Entry page that the user requests to start the Silverlight application.
Can also be a .aspx page.
XAP File (ZIP Archive)
Silverlight package that contains everything needed to deploy a
Silverlight application, including the application manifest, the project
assembly and any other assemblies that the application uses. This
file is copied to the ClientBin folder in case of an ASP.NET web site.
The XAP file compresses the content. The content is not
decompressed until it reaches the client. This reduces the
time required to download the application. The XAP file also
EverySilverlight project is compiled to a DLL file
named after the Silverlight application.
This project assembly is stored in the
/bin/Debug folder along with a few other
During deployment, copy the XAP file along with
the required .html or .aspx files (that includes a
Silverlight content region) to the web server.
Client requests a .html or a .aspx page.
Browser downloads and processes the page.
When it reaches the element, it loads the
Silverlight plugin and creates the Silverlight content
The plugin downloads the linked XAP file.
The AppManifest.xaml file is examined and the
appropriate Silverlight application assembly (.dll) is
The plugin then creates the App object.
The App object triggers a Startup event and the first
Silverlight page is created.
Contains additional generic collections and classes for dealing with
Contains support for LINQ.
Contains classes that support networking.
Includes classes for building Silverlight UI including classes that
support animation and data binding.
Contains classes for interacting with HTML elements.
Includes classes for XML processing.
These assemblies add new controls to the Silverlight
Creating a HelloWorld Silverlight Application.
Examining the .html / .aspx entry page.
Sizing the Silverlight content region.
A layout is used for organizing content in a set of different layout
Layout is determined by the container being used.
A Silverlight window can hold multiple containers, but only within a
single root element.
All Silverlight layout containers are panels that derive from the
abstract System.Windows.Controls.Panel class.
Layout containers can be nested.
Silverlight provides 3 Panel-derived classes that can be used to
Places elements in a horizontal or vertical stack.
Arranges elements in rows and columns according to an invisible table.
Allows elements to be positioned absolutely using fixed coordinates.
Places elements in a series of wrapped lines (left to right or top to
Aligns elements against an entire edge of a container.
Stacks its children in a single row or column.
Elements are arranged based on their order.
Default arrangement is from top to bottom
Elements can be arranged horizontally by setting the
Child elements can specify their own layout using
layout properties – HorizontalAlignment or
Different or same margins for each side of a control
can be set using Margin property of a control within
The first level container nested inside the root
Separates elements into invisible grid of rows and
Steps to create a grid:
Choose the number of rows and columns.
Assign the appropriate row and column to each
Grids are created by filling Grid.ColumnDefinitions
and Grid.RowDefinitions collections.
Attached properties like RowSpan and ColumnSpan
can be used to make an element stretch over several
Contains splitter bars – draggable dividers that
separate one section of a window from another.
Defined in System.Windows.Control assembly.
Must be placed in a grid cell.
Always resizes entire rows or columns and not single
To make it usable, set HorizontalAlignment=Stretch
and VerticalAlignment=Center (for a horizontal
splitter) and VerticalAlignment=Stretch and
HorizontalAlignment=Center (for a vertical
To actually see the splitter, set the Background
Stretches controls against one of its outside edges
Eg: toolbars at the top