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 Yes
programmer
perspective)
Flash vs Silverlight
Flash Silverlight
Image support Most formats JPG and PNG
Video, audio Multiple formats, VC-1 codec,
low-level APIs 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