Silverlight 4 Course

1. Introduction to Silverlight

2. Layout

3. Input Handling

4. Applications, Resources, Deployment

5. Data Binding, View Model

6. Out of Browser, File Access, Printing

7. WCF RIA Services (4 Weeks )

Introduction to Silverlight

Agenda 

1.What is Silverlight ?2.Evolution of Silverlight3.Getting Started4.Silverlight VS WPF5.Core Controls6.Anatomy7.Demo

Silverlight 4• Cross browser plugin – IE (Active/X), FireFox

(NSAPI), Chrome, Safari (WebKit) 

• Cross platform – Windows, MAC (Intel Only) and Linux using Moonlight (Delayed)

 • .Net programming language (C#, Visual Basic, …)

and runtime

• Works with Javascript and HTML DOM• Not mutually exclusive

• Mobile platform : Windows 7 Phone, Nokia Symbian OS

• RIA : User interaction and Animation

  

History• .Net Programming for client server web.

• Javascript to provide client side interactivity.

• Crippled because of Javascript compatibility.

• Microsoft wanted better control just like Java Applets.

• So came Silverlight. Initially known as WPF/E.

• WPF History : GDI & USER, DirectX, XP’s GDI+

Silverlight Evolution

• SL 1 : Graphics, hi-def media, script, text

 • SL 2 : . Net Framework • SL 3: OOB, Data binding, Common

Controls, Deployment : LOB • SL 4 : Printing, COM Automation,

Trusted Apps, Multi touch, Webcam & Mic, Mouse right click

   

 

Getting Started• Install using Web Installer : http://www.microsoft.com/web

Installs Web Server, Frameworks and Runtimes, Database and Tools.

• Install Visual Studio 2010 Express (SL 3)• http://www.microsoft.com/express/Web

• Install Silverlight Tools (SL 4)• http://www.silverlight.net/getstarted

  

 

Silverlight VS WPF• Different implementation :  Same Basic Technology

 • Web vs Desktop

 • Subset Vs Superset of .Net Framework

• Mostly the same team works on both.

• Use #ifdef if targeting both.

• WPF features Full Hardware Acc, Drawing Types, Event tunneling.

• Silverlight Features Browser Integration, Video Brush, Deep Zoom

    

 

WPFSL

XAML

XML Application Markup Language 

o Declarative language to describe UI.o XML Rules apply. Don’t forget />o Pronounced like Zammel.o Expression Blend Tools support it.o CAMLo BAMLo Can call Javascript function for

splash screen functionality.  

XAML• Element : Corresponds to CLR object

<Button>

<Button.Content>

Cancel

<Button.Content />

<Button>

• Attribute : Corresponds to Properties, events

<Button Content=“Cancel” Click=“fn” />

• Namespaces

xmlns:x=“http:/…..”

…<Button x:Name=“mybtn” />

XAML

• Type Converter<Button Background=“Red” />

Here Red gets converted to a SolidColorBrush because of Type Converter.

• Markup extension {}<TextBlock text={Binding …. } />

Silverlight project types

• Silverlight Application : stand alone

• Silverlight Navigation : Multiple pages URI Map

• Silverlight Class Library : reuse common code

• Silverlight Business Application : RIA Services

• WCF RIA Services Class

• Unit Test Application : Added to existing SL Proj– Demo [Show in Visual Studio]

Core Controls and EventsSL Runtime, SL SDK, SL ToolKit

• Button• CheckBox• RadioButton• TextBox• Image• ComboBox• ListBox

• Clicked• Checked/Unchecked• GroupName Property• TextChanged• Stretch Property• Items Property• SelectionChanged

DEMO • Create Hello World

  Enter Name:  Hello World, John

•Create all elements, events from both XAML and CS•Hook to Javascript function. (No x:class )•Talk about X:Name X:Class•Show Document Outline / bread crumb in XAML view.•Open project in both Blend and VS.

John Greet

Anatomy• Object tag

• XAP Files in ClientBin

– Zip file

• Host project to host the html page

References

• Silverlight.net

• Channel9.msdn.com

• Silverlight cream

• Quick starts

Class Project

• Create an oval. Fill color Red.• On Mouse enter change Fill color to

Blue• On Mouse exit change color to Green• On Mouse click change color to

Purple.  

 

RedBlue

Green

Color: Radio ButtonOval or Rect

Combo BoxOval or Rect

• As Microsoft says :

– Light up the WEB

• As Obi Wan Kanobi says it :

• “Use the light, Luke”