SilverlightDevIntro

Microsoft Silverlight
Pratik Aggarwal
Sept 2015

Agenda
• Overview
1.0 and 1.1 releases
• Scenarios
• How to build sites that use Silverlight
XAML
Graphics, Brushes, Text, Media, Transforms
JavaScript Programmability
Animation
• Tools
Designer and Developer

Building Applications With .NET
web deskt
op
media &
RIA
web deskt
op

Microsoft Silverlight
is a
cross-browser,
cross-platform
plug-in
for delivering
the next generation of
media experiences
&
rich interactive applications (RIAs)
for the Web

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)

A few core Silverlight scenarios
• Media
• Interactive Content Experiences
• Rich Internet Applications

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

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

Rich Internet Applications
• Future: not all features enabled in 1.1 Silverlight Alpha
• Rich control encapsulation model
• Databinding
• Layout managers
• Built-in common controls

Silverlight Consumer Installation Experience

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

.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

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

How to build sites that use Silverlight

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

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>

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

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

XAML Sample
• For example:
<Canvas xmlns="..."
xmlns:x="...">
<Rectangle Width="200" Height="150" Fill="Black" />
<Ellipse Width="200" Height="150" Stroke="Orange" />
</Canvas>

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)

Drawing with XAML (2)
• Basic Vocabulary of Silverlight XAML Elements
• Canvas
• Brushes
• Basic shapes
• Rectange, Ellipse, Line, Polygon, etc.
• TextBlock
• Image

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

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="...">
<Ellipse Width="200" Height="150" Stroke="Orange" />
</Canvas>

Canvas (3)
• Position relative to first Canvas parent:
<Canvas Background="Light Gray">
<Rectangle Canvas.Top="25" Canvas.Left="25"
Width="200" Height="150" Fill="Black" />
<Canvas Canvas.Top=“50" Canvas.Left="50"
Width="150" Height="100"
Background="Red">
<Ellipse Canvas.Top="25"
Canvas.Left="25"
Width="150"
Height="75"
Fill=“White" />
</Canvas>
</Canvas>

Shapes
• <Rectangle />
• <Ellipse />
• <Line />
• <Polygon />
• <PolyLine />
• <Path />

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

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="#FFFFFF" />

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>

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>

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>

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?

Using Images
• <Image />
• Like ImageBrush
• But can only place a rectangular image
<Image Width="200" Source="http://.../XBox360Logo.jpg" />

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>

Transformations (2)
• Power in Transforming Groups of Objects
<Canvas>
<Canvas.RenderTransform>
<RotateTransform Angle="-45" CenterX="50" CenterY="50"/>
</Canvas.RenderTransform>
<Ellipse Width="100" Height="100" Fill="Yellow" />
<Ellipse Canvas.Top="25" Canvas.Left="25"
<Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" />
</Canvas>

Transformations (3)
• Transform Types
• <RotateTransform />
• Rotation
• <ScaleTransform />
• Resizes/Stretch
• <SkewTransform />
• Skews
• <TranslateTransform />
• Moves
• <MatrixTransform />
• Scale, Skew and Translate
Combined

Transformations (4)
• <TransformGroup />
• Allows Grouping of Multiple Transforms
<Canvas>
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransform Angle="-45" CenterX="50" CenterY="50"/>
<ScaleTransform ScaleX="1.5" ScaleY="2" />
</TransformGroup>
</Canvas.RenderTransform>
<Ellipse Width="100" Height="100" Fill="Yellow" />
</Canvas>

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>

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>

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");

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="...">
</Canvas>

Silverlight Events
• Standard Events
• Loaded
• MouseMove
• MouseEnter
• MouseLeave
• MouseLeftButtonDown
• MouseLeftButtonUp
• Use .NET / ASP.NET AJAX event pattern:
function onMouseEnter(sender, eventargs) {
sender.Fill = “Red”;
}
• KeyUp
• KeyDown
• GotFocus
• LostFocus

Silverlight Event Example
<Canvas xmlns="..."
xmlns:x="...">
<Ellipse MouseEnter="javascript:onMouseEnter"
MouseLeave="javascript:onMouseLeave"
Height="100" Width="100" Fill="Teal" />
<Ellipse Canvas.Left="120“
MouseEnter="javascript:onMouseEnter"
MouseLeave="javascript:onMouseLeave"
Height="100" Width="100" Fill="Teal" />
</Canvas>
function onMouseEnter(sender) {
sender.Fill = “Coral”;
}
function onMouseLeave(sender) {
sender.Fill = “Teal”;
}

Animating with XAML
• Silverlight provides a rich animation system
Animations can be defined in XAML
Animations can be triggered via Code

Animating XAML Example
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="theCircle"
Storyboard.TargetProperty="Width"
From="200" To="1" Duration="0:0:2"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>

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

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

Animation Types
• DoubleAnimation
• Animate numeric properties
<DoubleAnimation
Storyboard.TargetProperty="Width"
From="200" To="1" Duration="0:0:2"
AutoReverse="True"/>

Animation Types (2)
• ColorAnimation
• Animation colors
...
<ColorAnimation
Storyboard.TargetName="circleBrush"
Storyboard.TargetProperty="Color"
From="Black" To="LightGray" Duration="0:0:2"
AutoRepeat="True" />
...
<Ellipse x:Name="theCircle" Width="100" Height="100">
<Ellipse.Fill>
<SolidColorBrush x:Name="circleBrush"
Color="Yellow" />
</Ellipse.Fill>
</Ellipse>

AnimationTypes (3)
• PointAnimation
• Animates Dual-Value Numbers (e.g. 100,100)
...
<PointAnimation
Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="StartPoint"
From="0,0" To="1,1" Duration="0:0:2"
AutoReverse="True" />
...
<LinearGradientBrush x:Name="myBrush"
StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
...
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

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

Animation with KeyFrames - Example
...
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Width">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:1" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
...

Programmatic Animation
• StoryBoard object enables programmatic control of animation
sequences
• Begin()
• Pause()
• Resume()
• Stop()
• Seek()
function onMouseEnter(sender) {
var animationSequence = WPFCtrl1.findName(“animationSequence”);
animationSequence.Begin();
}

• 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

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

Bringing it all together: Tools and
Silverlight

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’

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

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 ;-)

SilverlightDevIntro

More Related Content

What's hot

Similar to SilverlightDevIntro

SilverlightDevIntro

Editor's Notes