MSDN Events
Autumn, 2008
Silverlight 2.0 Beta 2
A developer overview

What Will We cover?
• Where did Silverlight come from and what can it really do
• What is XAML and how does it aid in UI authoring
• What controls ship with Silverlight and how can they be
styled and data-bound
• What functionality is available in the Silverlight Base
Class Library

Helpful Tools/Downloads
• Visual Studio 2008
• Silverlight 2 Beta 2 Runtime
• Microsoft Silverlight Tools for Beta 2 for VS2008
• Other useful stuff
– Silverlight Beta 2 SDK (installed with tools install)
– Expression Studio 2
– Deep Zoom Composer
– Silverlight 2 Controls Source Code + Unit Tests

Agenda
• Introduction to Silverlight
• XAML
• Controls
• Base Class Library

Silverlight
• Formerly known as \"WPF/E\"
• Microsoft's platform for rich, highly interactive Web
experiences and RIAs
– Cross-platform (browsers and OSes)
• Windows, Mac OS, Linux (\"Moonlight\")
• Internet Explorer, Firefox, Safari, and more
– XAML-based rendering (subset of WPF XAML)
• Implemented as browser plug-in
– Quick, easy install experience

Versions
• Silverlight 1.0
– Shipped September 2007
– XAML rendering and JavaScript API
• Silverlight 2
– Beta 2 currently available
– XAML, .NET Framework, managed code, dynamic languages
(e.g., IronRuby)
– Ships in 2008

Silverlight Architecture

The Silverlight 2 CLR (\"CoreCLR\")
• Refactored version of full-size CLR
– Same core type system, JIT compiler, etc.
– COM interop, remoting, binary serialization, server GC, and
other features removed
– CAS replaced with transparency model
– Multiple CLR instances per process supported
– Most globalization support pushed down to OS
– Dynamic Language Runtime (DLR) added
• Small footprint (< 2MB), cross-platform

Core Base Class Library
System.Windows
System.Windows.Controls
System.Windows.Input
System.Windows.Interop
System System.Windows.Media
System.Collections System.Windows.Shapes
System.Collections.Generic System.Windows.Threading
System.Diagnostics
System.Globalization
System.IO
System.IO.-
IsolatedStorage
System.Ref lection
System.Windows.Browser
System.Security
System.Security.Cryptography
System.Text
System.Threading
System.Linq
System.Linq.Expressions
System.Runtime.CompilerServices
System.Security.Cryptography
System
System.Collections.Generic
System.ComponentModel System.Xml
System.Diagnostics System.XmlSchema
System.Text.RegularExpressions System.Xml.Serialization

Silverlight 2 Project Structure
Web project
generated by Visual XAP file containing
Studio for testing and application assembly,
debugging library assemblies, and
resources
HTML test page
Main project
XAML file containing
global (application)
resources and event
handlers
XAML file containing
\"page\" seen by user

Instantiating the Silverlight Control
OBJECT tag
Control DOM ID
<object id=\"SilverlightControl\"
data=\"data:application/x-silverlight\" MIME type
type=\"application/x-silverlight-2-b2\"
Control version
width=\"100%\" height=\"100%\">
<param name=\"source\" Width and height
value=\"ClientBin/SilverLife.xap\" />
</object> XAP file containing
application assembly,
resources, etc.
Application package

XAML
<Canvas Width=\"300\" Height=\"300\"
xmlns=\"http://schemas.microsoft.com/client/2007\"
xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">
<Ellipse Canvas.Left=\"20\" Canvas.Top=\"20\"
Height=\"200\" Width=\"200\"
Stroke=\"Black\" StrokeThickness=\"10\" Fill=\"Yellow\" />
<Ellipse Canvas.Left=\"80\" Canvas.Top=\"80\"
Height=\"35\" Width=\"25\" Stroke=\"Black\" Fill=\"Black\" />
<Ellipse Canvas.Left=\"140\" Canvas.Top=\"80\"
Height=\"35\" Width=\"25\" Stroke=\"Black\" Fill=\"Black\" />
<Path Data=\"M 70, 150 A 60, 60 0 0 0 170, 150\"
Stroke=\"Black\" StrokeThickness=\"15\"
StrokeStartLineCap=\"Round\" StrokeEndLineCap=\"Round\" />
</Canvas>

Events
• XAML objects fire events
– Canvases and UI objects fire Loaded events and mouse events
(e.g., MouseLeftButtonDown)
– Root canvas also fires keyboard events
– Other objects fire object-specific events
• Handlers can be registered declaratively or
programmatically
• Mouse events \"bubble up\" through XAML object
hierarchy

Hello Silverlight

What Did We Just Do?
• Created a basic Silverlight application
• Added some “Hello World” XAML

Layout
• Layout is driven by Panel objects
– Every page has a root Grid object
– Page can contain additional Grids or Canvases
• Panels are a containers for other UI elements
– Grids, StackPanel, Canvas are types of panels
• All units measured in logical pixels

Shapes
• Silverlight supports six shapes
Rectangle Ellipse Polygon
Line PolyLine Path

MediaElement
• Audio/video playback in a box
– Progressive downloads and streaming
• Robust API provides basis for rich UIs
– Play, Pause, Stop, and other methods
– Position, Volume, and other properties
– DownloadProgressChanged and other events
• WMV1/2/3/A/VC1, WMA, and MP3

Transforms
TranslateTransform RotateTransform
SkewTransform ScaleTransform

Animation
• Animations are created by varying properties of XAML
objects over time
– From/To animations vary properties linearly
– Key-frame animations use discrete steps
• Animation objects define animations
– DoubleAnimation[UsingKeyFrames]
– ColorAnimation[UsingKeyFrames]
– PointAnimation[UsingKeyFrames]
• StoryBoard objects hold animation objects

Blend Smiley Face

What Did We Just Do?
• Created a smiley face object using Expression Blend
• Applied an animation to the smiley face object
• Added some event handling to the smiley face using
Visual Studio

Controls
• More than 20 built-in controls
– Canvas, StackPanel, Grid, and GridSplitter
– Button, CheckBox, HyperlinkButton, RepeatButton, RadioButton,
and ToggleButton
– TextBox, ListBox, and DataGrid
– TabControl, Slider, and MultiScaleImage
– Border, Calendar, DatePicker, and more!
• Support styles, templates, and data binding

Control Hierarchy
FrameworkElement
Control
ContentControl Calendar RangeBase
ButtonBase DataGrid Slider
Button DatePicker Scrollbar
HyperlinkButton GridSplitter ItemsControl
RepeatButton TextBox ListBox
ToggleButton TabControl
CheckBox
RadioButton
ScrollViewer

Control Hierarchy, Cont.
FrameworkElement
Panel Border
Canvas Image
InkPresenter MediaElement
Grid MultiScaleImage
StackPanel TextBlock

Control Templates
• Redefine a control’s entire visual tree
– Perform extreme customization without changing basic behavior
of control
– Exposed through control's Template property (inherited from
Control base class)
• Use {TemplateBinding} to flow property values from
control to template
• Use ContentPresenter and ItemsPresenter to flow
content and items to template

Styles
• Styles provide level of indirection between visual
properties and their values
– Define style as XAML resource
– Apply style using {StaticResource} markup extension
• Can be scoped globally or locally
• Combine styles and templates to “stylize” controls with
custom visual trees

Data Binding
• Permits properties of one object to be bound to
properties of another
– Target property must be DependencyProperty
– Source property can be any type of property
– Source can be a collection if target supports binding to
collections
• {Binding} markup extension provides declarative support
for data binding

Styled Data-bound ListBox

What Did We Just Do?
• Added a ListBox control to our XAML
• Applied a DataTemplate to the ListBox
• Data-bound our new ListBox control to a generic list of
user objects
• Applied 2 different styles to our data-bound ListBox

DOM Integration
• System.Windows.Browser namespace contains classes
for accessing browser DOM
• HtmlPage, HtmlWindow, and others
• Managed -> unmanaged
• Access DOM from managed code
• Call JavaScript functions from managed code
• Unmanaged -> managed
• Call managed code from JavaScript
• Process DOM events with managed code

File I/O
• General-purpose file I/O not permitted
• OpenFileDialog can be used to open files
– User interaction constitutes permission needed to safely open
files
– No SaveFileDialog yet
• Isolated storage can be used to persist data locally
subject to quotas
– Quote is initially set to 1MB per domain but can be increased

Networking
• Silverlight 2 has rich networking support
– SOAP/XML Web services via WCF proxies
– HTTP services (POX, REST, RSS, ATOM) via HttpWebRequest
and WebClient classes
– Socket support, asset downloads over HTTP, syndication
classes, and more
• Cross-domain access supported using Flash-compatible
or Silverlight XML policy files

Cross-Domain Network Calls
• Allowed if target domain has XML policy file in place
permitting calls from other domains
– Crossdomain.xml – Requires domain=\"*\" allowing calls from any
domain
– Clientaccesspolicy.xml – Can restrict access to certain domains
only
• Policy file must be located at domain root

HttpWebRequest
• Delegate-based HTTP networking API
– Supports asynchronous operation only
• Provides control over wire format
– GET/POST/PUT/DELETE (REST)
– Customization of HTTP headers
• Completion methods called on background threads

WebClient
• Event-based HTTP networking API
– Commonly used to download assets
• DownloadStringAsync - String
• OpenReadAsync – Stream (binary)
– Can also be used to perform uploads
• Fires progress and completion events and supports
cancellation of pending requests
– Event handlers execute on UI thread

Consuming RSS Data

What Did We Just Do?
• Added a DataGrid control to our XAML
• Opened and parsed a local XML file
• Downloaded and parsed an RSS feed
• Data-bound our parsed data to the added DataGrid
control

Session Summary
• Microsoft Silverlight is a cross-browser, cross-platform,
and cross-device plug-in for delivering the next
generation of media experiences and rich interactive
applications for the Web
• By using Expression Studio and Visual Studio, designers
and developers can collaborate more effectively using
the skills they have today to light up the Web of
tomorrow

For More Information
• Visit MSDN at http://msdn.microsoft.com
• Visit the URLs below for additional information
– http://silverlight.net/default.aspx
– http://www.microsoft.com/silverlight
– http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx

Microsoft Press Publications
For the latest titles, visit
www.microsoft.com/learning/books/devtools

Non-Microsoft Publications
These books can be found and purchased at
all major book stores and online retailers

Training Resources
For training information and availability
www.microsoft.com/learning

RAMP-UP
Are you ready to take your career as a developer to the next level?
Looking for a learning experience that is designed for you?
Join MSDN Ramp Up and Summit Your Career!
MSDN Ramp Up is your online source that provides free training and technical resources to help take your
development skills to the next level.
• Step-by-Step training plans to build your development skills.
• Premium technical content created by expert developers for developers.
• Access to valuable online e-learning, e-references, and virtual labs.
• 50% discount on select certification exams and 30% discount on Microsoft Press training kits.
Join Ramp Up for free today!
Go to: http://msdn.microsoft.com/rampup