An Introduction To Silverlight

Gergely Orosz

http://GregDoesIT.com

@gergelyorosz

In this presentation

What SL is capable of

How it is different

Learning curve overview

Why use SL

Non-traditional way

What is Silverlight?

Rich Internet Application (RIA) platform

Capabilities are similar to Flash Java FX

Web-based subset of WPF

Flash vs Silverlight

Flash Silverlight

Animation model Frame-based Time-based

Language ActionScript CLR-compilant (VB.NET, C#)

Platform All major Limited Linux (Moonlight)

Multithreading No (from programmer perspective)

Yes

Flash vs Silverlight

Flash Silverlight

Image support Most formats JPG and PNG

Video, audio Multiple formats, low-level APIs

VC-1 codec, WMW, WM, no low-level APIs

Streaming More cost-effective

Other More mature Deep Zoom

Flash vs Silverlight

Features: almost identical

Development environments

Streaming

Mobile: ?

WPF

Descendant of Windows Forms

Built on .NET 3.5

XAML: descriptive markup language

WPF / Silverlight features

Vector graphics & bitmap effects

Data binding & UI update

Animations

Rich content: videos, images, sounds

Styling, templates

Silverlight: lightweight WPF

CLR within Browser

Limited CLR: Not all libraries Local filesystem limited Networking limited

XAML

Separate UI and logic

XML markup, clean syntax

XAML and code behind files

Does not support generics

XAML: a simple example

Code

UI Basics

Layout Grid, Canvas, StackPanel

Controls Button, HyperLinkButton, ComboBox etc

Text, images TextBlock, Image, MediaElement

Brushes Solid, linear, radial, image, video

User Controls

UI Basics: Example

VideoBrush Example

Use MSDN/references to look up UI elements

Styling and templating

Defining styles: TargetType Setters that are valid on the target

Templates Customize controls Uses ControlTemplate class

Easy to define in XAML

Styling and templating: example

Code

Dependency Properties

Extend CLR properties Property changed notification Data Binding Animating Default value and ClearValue

Has to inherit DependencyObject

Dependency Properties: example

Registering, default value, Property Changed

Animating

Data Binding

Attached Properties

Global property that can be set on any object element

Static Dps

Used by the owner, defined on the child

E.g. Canvas.Left, Grid.Column

Attached properties: example

Code

MVVM

How to effectively build large applications in WPF

Lots of UI markup, lots of data binding

Variation of MVC

MVVM

Model BL, UI independent

View Visual elements + input processing

Data binding View and model can be bound directly Usually direct binding is not possible

MVVM

ViewModel “Model of a View” Abstraction of the view: contains state and

behaviour Data binder/converter:

Model information → View information View commands → Model

MVVM: Example

MVVM in Silverlight

Worth using on larger projects Frameworks

MEF Official

Prism Non-official, but MS

Summary

Similar to WPF XAML Styling & templating DPs Attached properties MVVM for larger applications

Effort learning SL

Project structure: small

UI: significant

Media: moderate

Data binding: moderate

Effort learning SL

Network: moderate

Events: moderate

Other: moderate - significant Dependency Properties, Attached Properties MVVM Navigation Framework Out of Browser applications

Why It's Worth It

Things you couldn't do before!

Good looking controls & pages

Animation

Video & vector graphics

Why It's Worth It

Silverlight client for Facebook

Silverlight Toolkit (with source)

http://www.jumpman23mosaic.com http://silverlight.net/showcase/ http://nokola.com/ (with source)

Suggested Learning Curve

C# / VB experience

Web http://silverlight.net/getstarted/ MSDN: Getting Started with Silverlight

Books

WPF

Thank You