5. Silverlight Overview
• Enable richer interactive web experiences
• Vector Graphics, Media, Animation
• Integrate cleanly within existing sites
• XML markup with AJAX JavaScript
• Easily incorporated within HTML pages
• Cross Browser and Cross Platform
• Enabled via small, one-time, 1.1Mb download
• IE, FireFox, Safari support on Windows and
Macintosh systems (both Intel and PPC)
6. A few core Silverlight scenarios
• Media
• Interactive Content Experiences
• Rich Internet Applications
7. Media Support
Built-in Audio and Video Codec Support
• MP3 and WMA Audio
• WMV video
Supports downloading media via standard HTTP requests
(works with any web server)
Supports 720 HD video, full screen projection, and best
compression in industry
8. Interactive Content Experiences
• Powerful vector graphics engine
• Device independent resolution scaling
• Flexible animation system
• Enable declarative animation of any element
• Declarative markup approach enables great tool integration and
designer/dev workflow
• Easy AJAX scripting with JavaScript
9. Rich Internet Applications
• Future: not all features enabled in 1.1 Silverlight Alpha
• Rich control encapsulation model
• Databinding
• Layout managers
• Built-in common controls
11. Silverlight 1.0 and 1.1
Browser
Host
Deploy
•Friction-Free
Installer
•Auto-Updater
•Application
Services
Presentation
Core
UI Core
Vector Text
Animation
Images
Inputs
Keyboard Mouse Input
Media
VC-1 WMA MP3
DRM
Media
Controls
Layout Editing
.NET for Silverlight
XAML
Data
Media
WPF
Extensible Controls
DLR
Ruby Python
BCL
Generics Collections
Networking
REST
RSS
SOAP
POX
JSON
V1.0 V1.1
•MS Ajax
Library
•DOM
Integration
•Friction-Free
Installer
•Auto-Updater
12. .NET for Silverlight & Desktop
.NET for Silverlight is a factored subset of the full .NET
• Desktop ~ 50 MB (Windows Only)
• Silverlight + .NET Alpha ~4MB (Cross platform)
• Additional pieces of .NET available in a pay for play model
Same core development framework
• The shared technologies and APIs are the same
• The tools are the same
Highly compatible
• Minimal changes needed to move from Silverlight to Desktop
• However, not binary compatible by default
13. The Sandbox
All apps run in Sandbox
• Conceptually similar to the HTML DOM sandbox
Apps run just like HTML pages – just click a URL
• No elevation prompts
• No way to get out of the sandbox
Includes some additional functionality
• Safe isolated storage
• Client based file upload controls
• Cross-domain support in-work
Presentation Title | PP | DD Month YYYY Microsoft Confidential
15. How does Silverlight Work?
• Silverlight is a browser control within IE and plug-in within
FireFox/Safari
• Silverlight content can be hosted into any container element
within an HTML document
• HTML can be overlaid on top of Silverlight content, enabling
easy page blending
• Silverlight can be programmed using regular browser JavaScript
• HTML and XAML DOM elements can be manipulated in the same block
of code
16. Silverlight Load Script
<script type="text/javascript" src="js/aghost.js"></script>
<div id="wpfeControl1Host" >
<script type="text/javascript">
new agHost("wpfeControl1Host", // hostElementID
"wpfeControl1", // ID of the WPF/E control
"400", // Width
"400", // Height
"#00000000", // Background color
null, // SourceElement
"helloworld.xaml", // Source file
"true", // IsWindowless
"30", // MaxFrameRate
null // OnError handler
);
</script>
</div>
17. What does Silverlight Point to?
• Silverlight load script today points to a .XAML text file to load the
XAML content
• Future option will allow multiple XAML files, images, and media
assets to be packaged into a .zip file to optimize download
18. XAML (rhymes with Camel)
• XAML = eXtensible Application Markup Language
• Flexible XML document schema
• Examples: WPF, Silverlight, Workflow Foundation
• Enables rich tooling support
• While still preserving good readability and hand-coding within text editors
20. Drawing with XAML
• You can create rich graphics using XAML
• Device independent vector graphics
• Scale from low to extremely high DPI devices
• XAML is made up of Tags
• Represent a single item or container of the design
• E.g. Rectangle, Ellipse, Canvas, Storyboard, etc.
• Not all Tags are design elements – some can also define behavior (e.g.
animations) and in the future will define customization (e.g. style and data-
binding)
21. Drawing with XAML (2)
• Basic Vocabulary of Silverlight XAML Elements
• Canvas
• Brushes
• Basic shapes
• Rectange, Ellipse, Line, Polygon, etc.
• TextBlock
• Image
22. Canvas
• Is a Drawing Surface
• Children have relative positions:
<Canvas Width="250" Height="200">
<Rectangle Canvas.Top="25" Canvas.Left="25"
Width="200" Height="150" Fill=“Yellow" />
</Canvas>
The Canvas
The Rectangle
23. Canvas (2)
• Currently the parent of the every Silverlight XAML document:
• Note xmlns= usage on root element to indicate document
schema
<Canvas xmlns="..."
xmlns:x="...">
<Rectangle Width="200" Height="150" Fill="Black" />
<Ellipse Width="200" Height="150" Stroke="Orange" />
</Canvas>
26. Brushes
• Determines how objects are painted
• For painting objects (e.g. Fill)
• For painting of lines (e.g. Stroke)
• Brush options include:
• Solid color brushes
• Gradient brushes
• Image brushes
27. Brushes (2)
• <SolidColorBrush />
• Support creation by name
• 141 named colors supported (e.g. Blue, Red, Green)
• Supports #FFFFFF or #FFFFFFFF syntax as well
<Rectangle Width="200" Height="150" >
<Rectangle.Fill>
<SolidColorBrush Color="Black" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="200" Height="150" Fill="Black" />
<Rectangle Width="200" Height="150" Fill="#FFFFFF" />
28. Brushes (3)
• <LinearGradientBrush />
• Start and Stop are to set angle as numbers
• Gradient Stops are the different color points
<Rectangle Width="200" Height="150">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
29. Brushes (4)
• <RadialGradientBrush />
• Gradient Stops are same syntax as Linear Gradient
<Rectangle Width="200" Height="150" >
<Rectangle.Fill>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Black"
Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
30. Brushes (5)
• <ImageBrush />
• Gradient Stops are same syntax as Linear Gradient
<Ellipse Width="200" Height="75" >
<Ellipse.Fill>
<ImageBrush
ImageSource="http://.../XBox360Logo.jpg" />
</Ellipse.Fill>
</Ellipse>
31. Using Text
• <TextBlock />
<TextBlock>Hello</TextBlock> Hello
<TextBlock FontSize="18">Hello</TextBlock> Hello
<TextBlock
FontFamily="Courier New">Hello</TextBlock> Hello
<TextBlock TextWrapping="Wrap" Width="100">
Hello there, how are you?
</TextBlock>
Hello there,
how are you?
<TextBlock>
Hello there,<LineBreak/>how are you?
</TextBlock>
Hello there,
how are you?
32. Using Images
• <Image />
• Like ImageBrush
• But can only place a rectangular image
<Image Width="200" Source="http://.../XBox360Logo.jpg" />
33. Transformations
• Used to make changes to an object
<Rectangle Width="200" Height="100" Fill=“Red">
<Rectangle.RenderTransform>
<RotateTransform CenterX="25" CenterY="100" Angle="45" />
</Rectangle.RenderTransform>
</Rectangle>
37. Integrating Media
• <MediaElement />
• Used to show media (music or video)
• Control Video with Code
• No Built-in Controls – You build the UI in XAML
<Canvas xmlns="..."
xmlns:x="...">
<MediaElement Source="xbox.wmv" />
</Canvas>
38. Naming Objects in XAML
• XAML objects can be named by adding a x:Name attribute to
the element:
• They can then be referenced by other XAML elements
elsewhere in the file
• Can then be programmed against via code
<Canvas>
<Ellipse x:Name="theCircle" Width="100"
Height="100" Fill="Yellow" />
</Canvas>
39. Access Silverlight via JavaScript
• Use browser’s document.getElementById() to access the
Silverlight control on a page:
• Can also use ASP.NET AJAX $get() function:
var control = document.getElementById("WpfeControl1");
var control = $get("WpfeControl1");
40. Find XAML object via script
• findName(name) method on Silverlight control
var wpfeControl = document.getElementById("WpfeControl1");
var theCircle = wpfeControl.findName("theCircle");
if (theCircle != null)
theCircle.opacity = .5;
<Canvas xmlns="..."
xmlns:x="...">
<Ellipse x:Name="theCircle" Width="100"
Height="100" Fill="Yellow" />
</Canvas>
45. Triggers
• <EventTrigger />
Used to specify what starts an Animation
Properties are used to tie it to other Animation
o RoutedEvent
The event that starts the triggers
o Actions
A optional list of Storyboards to fire
46. Storyboards
• <Storyboard />
Contains one or more Animations
Properties are used to share with all Animations
o TargetName and TargetProperty
o From, By and To
o Duration
o AutoReverse
o RepeatBehavior
50. Animating with Keyframes
Keyframe Animations
• DoubleAnimationUsingKeyFrames
• ColorAnimationUsingKeyFrames
• PointAnimationUsingKeyFrames
Allows you to create an Animation using:
• KeyFrame objects that specify values at specific times
• Each KeyFrame contains KeyTimes and Values
54. • Integrated Design and Development with Silverlight
• Declarative Programming (XAML)
• Bringing Designers Into the Application
Development Process
• Tools for Designers: Microsoft Expression
• Tools for Developers: Visual Studio
55. 58
Designer
Emotional Connection
Look, behavior, data visualization,
usability, brand impact
Developer
Functional Capabilities
Deployment, function, data connection
and integrity, IT process, security
C++
C#
VB.NET
Paper
JPG / TIFF
MOV / WMV
PSD
PPT
XAML
57. Roadmap
• Expression Studio
• Expression Blend 2
Preview
MIX 07 Summer 07 Beyond…
• Silverlight 1.0 Beta
• Silverlight 1.1 Alpha
• Silverlight Tools Preview
for Visual Studio ‘Orcas’
• Expression Media
Encoder
• Silverlight 1.0
• Expression Studio
2
• Silverlight 1.1
• SilverLight for mobile
• Silverlight Tools for
Visual Studio ‘Orcas’
58. Summary
• Silverlight is cross-browser cross-platform internet plug-in
• Media
• Rich 2D graphics
• Animation, transformation and text
• Scenarios
• Media
• Interactive content
• Rich Internet Applications
• Programming model
• XAML (Camel)
• Javascript
• Tools – Visual Studio and Expression
59. Where To Learn More
• Silverlight Dev Center on MSDN
• Great SDK documentation and Quickstart samples
• http://msdn.microsoft.com/silverlight
• http://www.silverlight.net
• http://www.microsoft.com/silverlight
• Good blogs to watch:
• http://blogs.msdn.com/mharsh/
• http://blogs.msdn.com/jstegman/
• http://blogs.msdn.com/markjo ;-)
Cross-browser and cross-platform implementation of .NET
Delivers stunning graphics, data composition
Easy install (under 20 seconds) for the end-user
Deeply integrated tools and des/dev workflow
Allows you to use any language
Standard MSI Package
Reduces clicks, trusted experience
Web page calls script to detect
If SL installed, play content
If SL not installed, present user with notification via overlay or alternate experience
2 clicks total on Windows XP
3 clicks total on Windows Vista (User Account Protection)
Automatic refresh of webpage after install
DRM – Digi Rights Mgmt
DLR – Dynamic Lang runtime
BCL – Basic class library