Tutorial Objectives:

    •        Understand the role of Silverlight
    •        Contrast the Silverlight 1.0 and 2.0 feature set
    •        Examine the Silverlight 2.0 architecture
    •        Overview key Silverlight 2.0 development tools
    •        Learn the core Silverlight assemblies and namespaces
    •        Learn the role of the Application and UserControl classes
    •        Learn the syntax of XAML
    •        Survey the Silverlight control set
    •        Understand the control programming model
    •        Learn to position controls using layout managers
    •        Establish tooltips
    •        Intercept mouse and keyboard events
    •        Implement drag-and-drop functionality
    •        Work with embedded image data and the Image control
    •        Understand the role of logical resources
    •        Render graphics using shapes and geometries
    •        Examine Silverlight video playback support
    •        Apply graphical transformations
    •        Understand Silverlight’s animation services
    •        Author animations using XAML and code


Silverlight 2.0 is a .NET web-based technology, which leverages a number of programming features first
introduced with Windows Presentation Foundation.  Using Silverlight, you are able to embed highly interactive
content within a standard web page, similar in concept to Adobe Flash.
This chapter gives an overview of Silverlight 2.0, including the overarching programming model and technologies,
as well as the core development tools. Furthermore, this chapter will introduce you to the role of XAML, the
XML based grammar which allows you to describe the UI of a Silverlight web plug in.
The information presented here will serve as a foundation for the remainder of the tutorial.

Understanding the Role of Silverlight 2.

As you very well know, Silverlight is a web-centric programming technology.  Simply put, using Silverlight, you
are able to embed highly interactive and media-rich content into your web applications.   Ironically, the best way
to understand the nature of Silverlight is to examine a desktop programming model, named WPF.

.NET 3.0 introduced the Windows Presentation Foundation (WPF) API.   WPF is a supercharged UI framework
for building desktop applications.  WPF integrates graphics, animations, a rich data binding layer, video / audio
services and print-ready document functionality into a single unified programming model.

Using WPF, you are able to build extremely rich ‘next-gen’ desktop user interfaces.  Consider the following WPF
sample program, authored using Expression Blend.  Although not viewable from the printed page, when you click
on any of the stylized buttons on the bottom of the window, a 3d-rendered motorcycle spins into view.  Also
notice the transformed text blocks and dynamic shadowing.  While such an application could be built without
WPF, doing so would require a large amount of low-level code and quite a bit of time.  

NET 3.0 also introduced the Extensible Application Markup Language (XAML), which is typically used when
creating WPF applications.  XAML is an XML-based grammar which can be used to describe a tree of .NET
objects (UI-based or otherwise).  The XAML file is typically compiled into a WPF application as a binary
resource, named ‘BAML’ (the Binary Application Markup Language).   At runtime, BAML is used to hydrate
declared objects into memory.

XAML provides a clear separation of concerns between UI and functionality.  For example, a WPF Window is
typically composed of a XAML file to describe its look and feel, in addition to a C# or VB code file to describe its
behavior (event handlers, custom methods, etc).  A Silverlight control is also composed of a XAML file and a
related C# or VB code file.  

XAML also provides a separation of concerns at the tool level.  A graphical artist can use dedicated tools (such as
Microsoft Expression Blend) to generate the XAML.  Programmers can use Visual Studio to add the coding

This allows different skill sets (artists and coders) to cooperatively build a single WPF or Silverlight application,
using appropriate tools.  You will learn more about XAML, Expression Blend and Visual Studio’s Silverlight
support over the remainder of this class.

While WPF is ultimately an API for desktop development, it also supports ‘XBAP development’.  XAML
Browser Applications (XBAP) provide a way for a browser to display the UI of a WPF application.  XBAPs are
essentially lightweight WPF application deployed from a web server, and hosted in a browser.

An XBAP leverages the .NET 3.0/3.5 runtime of the client machine. Therefore, the machine viewing the XBAP
must have the .NET 3.0/3.5 runtime libraries.  Because of this requirement, only Windows-based computers can
correctly view an XBAP.  Provided you do have a Windows-based machine, you may view an XBAP using
Microsoft IE or Firefox web browsers.

XBAPs are *not* ASP.NET applications and have no native web-awareness.  The browser is simply used as a
host for the lightweight WPF window (technically termed a ‘WPF-Page’.  The benefit however, is that XBAPs
provide a much richer UI than traditional HTML/script code.  As well, an XBAP can be programmed to invoke
remote web services to communicate with ‘home base’.

Silverlight is a web-centric programming model is based on several WPF technologies.  However, unlike WPF,
Silverlight allows you to build highly interactive web plug-ins.  You would never use Silverlight to build a
traditional desktop application.  A Silverlight plug-in is *not* a WPF XBAP.  The client machine does *not*
require a full .NET 3.0/3.5 installation.

The major goal of Silverlight is to bring the same quality of a desktop UI to the web (e.g., highly interactive,
graphically rich, etc).  Like WPF, Silverlight makes use of XAML and integrates a number of features (graphics,
animations, data binding, etc) into a unified programming model.  Consider Silverlight to be Microsoft’s answer to
Adobe Flash.

In addition to XAML, Silverlight (and WPF) also provides a good number of inherit services, including (but not
limited to) the following:
  • A number of layout managers that provide full control over placement and repositioning of content.
  • A built-in style engine, which allows you to define ‘themes’ for a Silverlight application.
  • Use of vector graphics, which allows an image to be resized to fit the size of the container, transformed,
    zoomed, etc.  
  • Integrated graphical rendering services / animation services.
  • OS and browser neutral support for audio and video media (e.g., an implementation not tied to Windows
    Media Player!).

Silverlight is not limited to Microsoft-centric OSs / browsers.  Silverlight applications can run on multiple
operating systems (currently Windows and Mac OS X and possibly other OSs in the future).  Silverlight plug-ins
can be hosted by multiple browsers (IE, Safari, Opera, and Firefox).

Regardless of the OS / browser, the machine must download and install the free Silverlight runtime plug-in.
You will come to know the nature of the Silverlight plug in later in this chapter.
For now, understand that if a end user navigates to a web site requiring this plug-in, they will be able to install the
runtime with their permission.
After this point, your Silverlight web plug-in will load into the browser.

The Silverlight web site (www.silverlight.net) provides numerous links to download:
  • The Sliverlight runtime plug-in.
  • The Silverlight SDK and Silverlight SDK documentation.
  • Silverlight project templates for Visual Studio 2008.
  • Numerous examples, white papers, tutorials, etc.
Silverlight Tutorial
Table of Contents
Copyright (c) 2008-2013.  Intertech, Inc. All Rights Reserved.  This information is to be used exclusively as an
online learning aid.  Any attempts to copy, reproduce, or use for training is strictly prohibited.
Training Resources