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

An Introduction To Silverlight

  • 1.
    An Introduction ToSilverlight Gergely Orosz http://GregDoesIT.com @gergelyorosz
  • 2.
    In this presentationWhat SL is capable of How it is different Learning curve overview Why use SL Non-traditional way
  • 3.
    What is Silverlight?Rich Internet Application (RIA) platform Capabilities are similar to Flash Java FX Web-based subset of WPF
  • 4.
    Flash vs SilverlightFlash 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
  • 5.
    Flash vs SilverlightFlash 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
  • 6.
    Flash vs SilverlightFeatures: almost identical Development environments Streaming Mobile: ?
  • 7.
    WPF Descendant ofWindows Forms Built on .NET 3.5 XAML: descriptive markup language
  • 8.
    WPF / Silverlightfeatures Vector graphics & bitmap effects Data binding & UI update Animations Rich content: videos, images, sounds Styling, templates
  • 9.
    Silverlight: lightweight WPFCLR within Browser Limited CLR: Not all libraries Local filesystem limited Networking limited
  • 10.
    XAML Separate UIand logic XML markup, clean syntax XAML and code behind files Does not support generics
  • 11.
    XAML: a simpleexample Code
  • 12.
    UI Basics LayoutGrid, Canvas, StackPanel Controls Button, HyperLinkButton, ComboBox etc Text, images TextBlock, Image, MediaElement Brushes Solid, linear, radial, image, video User Controls
  • 13.
    UI Basics: ExampleVideoBrush Example Use MSDN/references to look up UI elements
  • 14.
    Styling and templatingDefining styles: TargetType Setters that are valid on the target Templates Customize controls Uses ControlTemplate class Easy to define in XAML
  • 15.
  • 16.
    Dependency Properties ExtendCLR properties Property changed notification Data Binding Animating Default value and ClearValue Has to inherit DependencyObject
  • 17.
    Dependency Properties: exampleRegistering, default value, Property Changed Animating Data Binding
  • 18.
    Attached Properties Globalproperty that can be set on any object element Static Dps Used by the owner, defined on the child E.g. Canvas.Left, Grid.Column
  • 19.
  • 20.
    MVVM How toeffectively build large applications in WPF Lots of UI markup, lots of data binding Variation of MVC
  • 21.
    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
  • 22.
    MVVM ViewModel ā€œModel of a Viewā€ Abstraction of the view: contains state and behaviour Data binder/converter: Model information -> View information View commands -> Model
  • 23.
  • 24.
    MVVM in SilverlightWorth using on larger projects Frameworks MEF Official Prism Non-official, but MS
  • 25.
    Summary Similar toWPF XAML Styling & templating DPs Attached properties MVVM for larger applications
  • 26.
    Effort learning SLProject structure: small UI: significant Media: moderate Data binding: moderate
  • 27.
    Effort learning SLNetwork: moderate Events: moderate Other: moderate - significant Dependency Properties, Attached Properties MVVM Navigation Framework Out of Browser applications
  • 28.
    Why It's WorthIt Things you couldn't do before! Good looking controls & pages Animation Video & vector graphics
  • 29.
    Why It's WorthIt Silverlight client for Facebook Silverlight Toolkit (with source) http://www.jumpman23mosaic.com http://silverlight.net/showcase/ http://nokola.com/ (with source)
  • 30.
    Suggested Learning CurveC# / VB experience Web http://silverlight.net/getstarted/ MSDN: Getting Started with Silverlight Books WPF
  • 31.