Upload
iedotnetug
View
1.148
Download
3
Embed Size (px)
DESCRIPTION
Slides from the first Silverlight 4 class taught by the Inland Empire .NET User's Group
Citation preview
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”