Silverlight 101 – Lesson 1 | Page 1 Lesson 1 - Overview to Silverlight and XAML Upon completion of this lesson, you will be able to: Understand what Silverlight is and why it exists Describe the technology underpinnings that make Silverlight possible Understand the versions currently available and what functionality exists in each of the versions Identify basic Extensible Application Markup Language (XAML) constructs Setup a Silverlight development environment What is Silverlight? Silverlight is characterized in the following way: Purpose - Silverlight applications allow developers to create a rich interactive application (RIA) through graphics, media and a rich programming model (Think: Adobe’s Flash player) Silverlight Plug-In - Web site visitors are prompted to download and install the Silverlight plug- in. This plug-in is available for the most popular web browser software and host operating systems. The plug-in is small (less than 2 megabytes in Silverlight 1.0) and once installed and configured allows web pages to instantiate the Silverlight control host. Silverlight Control Host - The control host is instantiated in a web page via JavaScript and its purpose is to expose the Silverlight object model to application code. There are two helper files that enable this instantiation process: Silverlight.js (supplied by Microsoft is per their license agreement cannot be modified) and a second JavaScript file typically named “CreateSilverlight.js” (supplied as an example implementation of how to call the method responsible for the instantiation of the Silverlight control on the web page. The method is named Silverlight.createObjectEx() and is described in detail later in this lesson.) Note: while referred to as CreateSilverlight.js, when creating a Silverlight project in Visual Studio 2008 with the Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 installed, a file called TestPage.html.js is created that serves the exact same purpose – to host the call to createObject() or createObjectEx(). Silverlight Object Model – Similar to the .NET Framework Class Library, this set of classes are available to your application and provide the core instructions that application developers will use to draw and adorn shapes, render media, enable animation, provide programmatic functionality and network access and more. Silverlight 1.0 features an object model for writing unmanaged code. In Silverlight 1.1, an object model for writing managed code is available. We’ll discuss the differences in Lesson 6. Silverlight Application – Applications are created using a combination of XAML, dynamic code (such as JavaScript) and in Silverlight 1.1, .NET static languages such as Visual Basic and C#.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Silverlight 101 – Lesson 1 | Page 1
Lesson 1 - Overview to Silverlight and XAML
Upon completion of this lesson, you will be able to:
Understand what Silverlight is and why it exists
Describe the technology underpinnings that make Silverlight possible
Understand the versions currently available and what functionality exists in each of the versions
Identify basic Extensible Application Markup Language (XAML) constructs
Setup a Silverlight development environment
What is Silverlight? Silverlight is characterized in the following way:
Purpose - Silverlight applications allow developers to create a rich interactive application (RIA)
through graphics, media and a rich programming model (Think: Adobe’s Flash player)
Silverlight Plug-In - Web site visitors are prompted to download and install the Silverlight plug-
in. This plug-in is available for the most popular web browser software and host operating
systems. The plug-in is small (less than 2 megabytes in Silverlight 1.0) and once installed and
configured allows web pages to instantiate the Silverlight control host.
Silverlight Control Host - The control host is instantiated in a web page via JavaScript and its
purpose is to expose the Silverlight object model to application code. There are two helper files
that enable this instantiation process: Silverlight.js (supplied by Microsoft is per their license
agreement cannot be modified) and a second JavaScript file typically named
“CreateSilverlight.js” (supplied as an example implementation of how to call the method
responsible for the instantiation of the Silverlight control on the web page. The method is
named Silverlight.createObjectEx() and is described in detail later in this lesson.) Note: while
referred to as CreateSilverlight.js, when creating a Silverlight project in Visual Studio 2008 with
the Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 installed, a file called
TestPage.html.js is created that serves the exact same purpose – to host the call to
createObject() or createObjectEx().
Silverlight Object Model – Similar to the .NET Framework Class Library, this set of classes are
available to your application and provide the core instructions that application developers will
use to draw and adorn shapes, render media, enable animation, provide programmatic
functionality and network access and more. Silverlight 1.0 features an object model for writing
unmanaged code. In Silverlight 1.1, an object model for writing managed code is available.
We’ll discuss the differences in Lesson 6.
Silverlight Application – Applications are created using a combination of XAML, dynamic code
(such as JavaScript) and in Silverlight 1.1, .NET static languages such as Visual Basic and C#.
Silverlight 101 – Lesson 1 | Page 2
XAML – Pronounced “zamel”, this term is an acronym for Extensible Application Markup
Language. It is an XML-style syntax that allows developers to define the user interface elements
and behavior of those elements. Some Silverlight elements can contain other Silverlight
elements, creating a control tree, or rather an object hierarchy which impacts the order in which
the elements are interpreted and rendered for display.
Canvas – The Canvas is an element used for the purpose of positioning other graphical
elements. Canvases can contain other canvases. The root object (or rather the top-most node
in the tree structure) must be a Canvas.
Graphical Elements –The following graphical elements can be created in a Silverlight
Some games that resemble Flash-based games in scale and scope have emerged as an example
of what is possible in this space. Some have created their own game loops and collision
detection algorithms in lieu of any supplied directly in the Silverlight plug-in. However, it would
seem that due to its stronger animation tools, Flash is still the better technology choice for this
type of application.
Silverlight’s Technology Adoption Hurdles The following challenges currently exist for Silverlight’s adoption in the marketplace:
Adobe and Apple’s have created a loyal following of creative individuals who can at times be
antagonistic towards Microsoft. Microsoft is targeting this niche with its Expression toolset,
particularly Blend, which will be the primary tool used to create Silverlight assets
Developers who lack creative skills may hurt rather than help perceptions of what is possible
with this new technology
Lack of tool support (Both Visual Studio 2008 Beta 2 and Blend 2.0 Beta can create Silverlight
applications, but better tool support and integration is currently in heavy development)
Lack of a baseline set of controls (i.e., no textbox, no buttons, no drop down lists, etc.)
Currently, all of these must be custom built (although these controls will probably be ready for
the next community preview release. I’m not aware of an estimated date when these will be
available.)
The richer feature set that allows you to create meaningful applications is currently in Alpha
Very small installed user base of the Silverlight plug-in
Is this a good time to invest in Silverlight? In financial terms, Silverlight would be considered a “speculative buy”. While there are plenty of people
both inside and outside of Microsoft that are promoting it as the “next big thing”, as noted above there
are some serious hurdles to overcome. In all honesty, it will be several years before this technology is
viable for anything more than a proof of concept. However, Microsoft is pursuing the development and
promotion of Silverlight in a way that I’ve not seen before, so depending on their sustained level of
aggression that may shorten the adoption cycle somewhat. If Microsoft were to include the Silverlight
plug-in in Windows Update, they could achieve near ubiquity in terms of market penetration in a matter
of days. No plan to do this has been announced.
What are the key differences between Silverlight 1.0 and 1.1? The following key features differentiate Silverlight 1.0 RC and Silverlight 1.1 September Technology
Preview.
Silverlight 101 – Lesson 1 | Page 5
Managed code support – In Silverlight 1.0, you must use JavaScript to handle events and
interact with the Silverlight object model. In Silverlight 1.1, you can use managed .NET
languages like C# and Visual Basic.
Dynamic languages support (JavaScript, Python, Ruby) – In Silverlight 1.0, JavaScript was the
only dynamic (think: non-compiled / interpreted) programming language you could use to
handle events and interact with the Silverlight object model. In Silverlight 1.1, you can use
dynamic languages like Python and Ruby.
Rich UI control model based on WPF – In Silverlight 1.0, you would have to use graphic
primitives and JavaScript to create baseline controls. While not yet available as of this writing,
Silverlight 1.1 will eventually include the following:
Button
TextBox
Scrollbar
Slider
ListBox
CheckBox
RadioButton
ComboBox
The Silverlight 1.1 Alpha Refresh SDK (September 2007) contains source code examples for a
Button, Scrollbar, Slider and ListBox. (See the folder called “SilverlightControlsStarterKit” which
contains a Visual Studio 2008 solution file with the source code to be used as a basis for creating
your own controls). It’s unknown if these are the basis for the actual controls, or just examples.
Besides the Canvas, additional layout controls will include:
Grid
StackPanel
ViewBox
Additionally, Silverlight 1.1 alpha includes the ability to create UserControls. Several third party
companies and individuals have already started in earnest creating custom controls.
Improved networking stack with support for REST, RSS, JASON, POX – Allows Silverlight to
communicate with server-side web services. For more details about what each of the acronyms
above mean, see callout “Terminology”)
Enhanced, 2-way HTML/AJAX Bridge – No elaboration is available at this time.
Comprehensive and consistent base class library – Provides a scaled-down yet full featured
version of the .NET Base Class Library. Types, Collections, etc.
Support for LINQ (LINQ to Objects, LINQ to XML) – LINQ is a unified data language to express
data manipulation intent. Specific implementations of LINQ parse the query language into
instruction sets specific to the type of data that is being handled. As a staple of .NET 3.5 and
Visual Studio 2008, the an implementation of LINQ that can be used inside of a Silverlight
Silverlight 101 – Lesson 1 | Page 6
application allows a more unified approach to handling collections of data (lists, etc.) as well as
XML.
XAML Structure At this point we’ll move away from an overview of Silverlight in general and begin to speak in concrete
terms about XAML, the Silverlight Plug-In and the anatomy of a Silverlight application. As I mentioned in
the preface I’m assuming that you are already a seasoned developer and therefore I will move quickly
into the technical details.
Watch: SL101_01_02 – XAML Overview.wmv
The Extensible Application Markup Language, or XAML as it is known, uses a declarative XML-style
syntax to express user interface design and behavior with the intent to keep presentation separate from
application logic. XAML is generic, and while it has been made famous by the Windows Presentation
Framework and now Silverlight it can be used in the context of other forthcoming technologies.
While XAML is a relatively new syntax, its borrows enough from XML that you should be able to
understand the basic structure of the syntax, even if you don’t completely understand how each
individual XAML element contributes to the entire application.
The following example creates a very simple Silverlight application. While you can probably guess much
of what is going on here without my explanation, I want to use this as a tangible example of several
XAML conventions:
Terminology
REST - Representational State Transfer – An “architectural style” that allows navigation of
Important: The SDK uses the convention CreateSilverlight.js, however when working with the Silverlight Tools Alpha in Visual Studio 2008 Beta, the file will be called TestPage.html.js. Their function is identical, and I would assume that as development firms up these names will become consistent across all environments.
Important: There are “breaking changes” in Silverlight 1.1 Alpha Refresh (i.e., changes to Silverlight 1.1 Alpha Refresh that will break older code examples found strewn around the internet, and even in Microsoft’s own documentation). Therefore, if you’ve used a previous version of the SDK you will have to fix several small issues in your code. For a list of breaking changes, see the document “Changes from May 2007 Alpha.docx” after unzipping the Silverlight 1.1 Alpha Refresh SDK.
createObject() and createObjectEx() Parameters, Properties and Events
The following tables detail the parameters, properties and events that can be set for the createObject()
and createObjectEx() methods.
Parameter Name Description
source Name of XAML file to load … when used programmatically, can be used to load
XAML in different forms, such as when embedded within the HTML, or when
delivered by a web service call, etc.
parentElement A reference to the HTML element (usually a DIV tag) that will host the Silverlight
control
id Identifier of the Silverlight control to provide programmatic access from both
managed and unmanaged code
properties Contains a listing of name / value pairs … see table 2 for a list of properties that
can be modified
events Contains a listing of name / value pairs that represent the event name and the
name of the JavaScript function that will handle that event … see table 3 for a
list of events that can be handled
initParams Contains a listing of name / value pairs that can be used as user defined
initialization value … think “command line parameters”
context If you have multiple Silverlight controls loaded into a single web page the
context will define which control’s onLoad event handler function
Silverlight 101 – Lesson 1 | Page 14
Property Name Description
Width Width of the Silverlight host control … can be a percentage … can clip the width
of the root Canvas
Height Height of the Silverlight host control … can be a percentage … can clip the
height of the root Canvas
Background Background color
isWindowless When set to true, allows the canvas to be transparent. (To achieve this effect,
must set the background property to “Transparent” or “#000000”)
frameRate Display frames per second (fps) … important when working with animation.
When set higher, makes motion smoother, but at the risk of system
performance. Max is 64 fps.
inplaceInstallPrompt False sends user to http://www.microsoft.com/silverlight to learn more about
installation and the EULA. True embeds a different graphic on the page that
essentially says that by clicking on the graphic to install Silverlight the user
In most examples you will see that the XAML content will be contained in its own file with a .xaml
extension. Alternatively however, you can include XAML within the context of the body tags of your
HTML. The only additional change required is in the Silverlight.createObject() method where you’ll need
to set the source to the id of the script tag that contains the XAML. See screenshots below.
See the project folder Lesson01_XAML for the complete implementation of the following example.
Important: When using the inline XAML technique, there is a known work around for FireFox. By default, Visual Studio 2008 puts the following line into TestPage.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> However, this causes a known FireFox bug to occur which will not display your Silverlight application. You can remove this line, or if setting the doc-type is important to you, there are several more creative workarounds available. Perform a search for “firefox inline xaml” for more details.
Silverlight 101 – Lesson 1 | Page 18
In this screenshot, you can see that the TestPage.html hosts the XAML within a script tag inside the body
of the page. The most important part of this snippet of XAML is the ID property of the script tag which is
set to “inlineXAML”. This will correspond to the source parameter of the createObject() method call in
the following screenshot.
Silverlight 101 – Lesson 1 | Page 19
Our Development Methodology in this Textbook While it is entirely possible to build Silverlight applications using any web development tool – including
Notepad – we’ll only be using Visual Studio 2008 (Beta 2 at the time of this writing) to develop Silverlight
applications. For instructions on setting up your development environment, please see the Lab “Setting
Up a Sliverlight Development Environment” in this lesson.
Additionally, while Silverlight 1.0 has been officially released, many of the interesting programmatic
functionality will appear in Silverlight 1.1. Therefore, this textbook is targeting Silverlight 1.1. There are
two caveats in this regard:
Silverlight 1.1 is in “Alpha” and is currently undergoing heavy development. Therefore, the
version of the software you are using and this document may become out of sync causing
examples to no longer work correctly. Please check back on LearnVisualStudio.NET for updates
to this document.
This textbook requires the installation of software that is currently in beta. After the official
release of Visual Studio 2008 the free “Beta” will no longer exist. Therefore, you will need to
acquire a license to use Visual Studio 2008 (as well as other tools we might use, such as Blend)
to continue learning from this resource. If the Visual Web Developer 2008 Express Edition
allows for creation of Silverlight applications (via an add-in of some sort) then I will use that to
appeal to the greatest audience size.
Silverlight 101 – Lesson 1 | Page 20
Installing the Development Tools
Since Silverlight 1.1 is in Alpha at the time of this writing, obtaining and installing the correct version of
the software you need poses a challenge, albeit minor. The key is finding all the installs for the Refresh
version of the 1.1 Alpha, which occurred in September 2007.
Install the tools from the following locations in the following order:
1. Microsoft Silverlight 1.1 Alpha Refresh for Windows
For step-by-step instructions, see “Lab1: Setting up a Silverlight Development Environment”.
Note: I use Alcohol 120% for opening an ISO file and installing it directly onto a desktop machine’s OS. Otherwise, when installing within a Virtual Machine, both VMWare and VirtualPC can both treat an .iso as a virtualized DVD drive.
There are other optional tools that you might find helpful as I’ll refer to these throughout the textbook