Developing with microsoft silverlight
1 / 65

- PowerPoint PPT Presentation

  • Uploaded on

Developing with Microsoft Silverlight. Mark Johnston Developer & Platform Group Microsoft UK April 2007. ? [email protected] www Agenda. Overview 1.0 and 1.1 releases Scenarios How to build sites that use Silverlight XAML

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about '' - Audrey

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Developing with microsoft silverlight l.jpg

Developing with Microsoft Silverlight

Mark Johnston

Developer & Platform Group

Microsoft UK

April 2007

Slide2 l.jpg


[email protected]


Agenda l.jpg

  • 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 l.jpg
Building Applications With .NET





media & RIA

Slide5 l.jpg

  • Microsoft Silverlight

  • is a

  • cross-browser,cross-platformplug-in

  • for delivering

  • the next generation of

  • media experiences

  • &

  • rich interactive applications (RIAs)

  • for theWeb

Silverlight overview l.jpg
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 l.jpg
A few core Silverlight scenarios

  • Media

  • Interactive Content Experiences

  • Rich Internet Applications

Media support l.jpg
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)

  • Will also support broadcast/live streaming later this spring for webcasts, events, etc.

  • Supports 720 HD video, full screen projection, and best compression in industry

Interactive content experiences l.jpg
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 l.jpg
Rich Internet Applications

  • Future: not all features enabled in 1.1 SilverlightAlpha

  • Rich control encapsulation model

    • Databinding

    • Layout managers

    • Built-in common controls

  • .NET Framework programming model for these scenarios

Silverlight 1 0 and 1 1 l.jpg



Silverlight 1.0 and 1.1

Browser Host


  • Friction-Free Installer

  • Auto-Updater

.NET forSilverlight

  • MS Ajax Library

  • DOM Integration




Extensible Controls








Ruby Python


Generics Collections

  • Application Services


Presentation Core

  • Friction-Free Installer

  • Auto-Updater

UI Core

Vector Text




KeyboardMouse Input






Layout Editing

Net for silverlight desktop l.jpg
.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 l.jpg
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

Microsoft Confidential

How does silverlight work l.jpg
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 l.jpg
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




What does silverlight point to l.jpg
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 l.jpg
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 l.jpg
XAML Sample

  • For example:

<Canvas xmlns="..."


<Rectangle Width="200" Height="150" Fill="Black" />

<Ellipse Width="200" Height="150" Stroke="Orange" />


Drawing with xaml l.jpg
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 l.jpg
Drawing with XAML (2)

  • Basic Vocabulary of Silverlight XAML Elements

    • Canvas

    • Brushes

    • Basic shapes

      • Rectange, Ellipse, Line, Polygon, etc.

    • TextBlock

    • Image

Canvas l.jpg

The Canvas

The Rectangle


  • 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 2 l.jpg
Canvas (2)

  • Currently the parent of the every Silverlight XAML document:

  • Note xmlns= usage on root element to indicate document schema

<Canvas xmlns="..."


<Rectangle Width="200" Height="150" Fill="Black" />

<Ellipse Width="200" Height="150" Stroke="Orange" />


Canvas 3 l.jpg
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"


<Ellipse Canvas.Top="25"




Fill=“White" />



Shapes l.jpg

<Rectangle />

<Ellipse />

<Line />

<Polygon />

<PolyLine />

<Path />


Brushes l.jpg

  • 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 l.jpg
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" >


<SolidColorBrush Color="Black" />



<Rectangle Width="200" Height="150" Fill="Black" />

<Rectangle Width="200" Height="150" Fill="#FFFFFF" />

Brushes 3 l.jpg
Brushes (3)

  • <LinearGradientBrush />

    • Start and Stop are to set angle as numbers

    • Gradient Stops are the different color points

<Rectangle Width="200" Height="150">


<LinearGradientBrushStartPoint="0,0" EndPoint="1,1">


<GradientStop Color="Red" Offset="0" />

<GradientStop Color="Black" Offset="1" />





Brushes 4 l.jpg
Brushes (4)

  • <RadialGradientBrush />

    • Gradient Stops are same syntax as Linear Gradient

<Rectangle Width="200" Height="150" >




<GradientStop Color="Red"

Offset="0" />

<GradientStop Color="Black"

Offset="1" />





Brushes 5 l.jpg
Brushes (5)

  • <ImageBrush />

    • Gradient Stops are same syntax as Linear Gradient

<Ellipse Width="200" Height="75" >



ImageSource="http://.../XBox360Logo.jpg" />



Using text l.jpg
Using Text

  • <TextBlock />






FontFamily="Courier New">Hello</TextBlock>


<TextBlock TextWrapping="Wrap" Width="100">

Hello there, how are you?


Hello there, how are you?


Hello there,<LineBreak/>how are you?


Hello there,

how are you?

Using images l.jpg
Using Images

  • <Image />

    • Like ImageBrush

    • But can only place a rectangular image

<Image Width="200" Source="http://.../XBox360Logo.jpg" />

Transformations l.jpg

  • Used to make changes to an object

<Rectangle Width="200" Height="100" Fill=“Red">


<RotateTransformCenterX="25" CenterY="100" Angle="45" />



Transformations 2 l.jpg
Transformations (2)

  • Power in Transforming Groups of Objects



<RotateTransform Angle="-45" CenterX="50" CenterY="50"/>


<Ellipse Width="100" Height="100" Fill="Yellow" />

<Ellipse Canvas.Top="25" Canvas.Left="25"

Width="10" Height="10" Fill="Black" />

<Ellipse Canvas.Top="25" Canvas.Left="65"

Width="10" Height="10" Fill="Black" />

<Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" />


Transformations 3 l.jpg

Transform Types

<RotateTransform />


<ScaleTransform />


<SkewTransform />


<TranslateTransform />


<MatrixTransform />

Scale, Skew and Translate Combined

Transformations (3)

Transformations 4 l.jpg
Transformations (4)

  • <TransformGroup />

    • Allows Grouping of Multiple Transforms




<RotateTransform Angle="-45" CenterX="50" CenterY="50"/>

<ScaleTransformScaleX="1.5" ScaleY="2" />



<Ellipse Width="100" Height="100" Fill="Yellow" />

<Ellipse Canvas.Top="25" Canvas.Left="25"

Width="10" Height="10" Fill="Black" />

<Ellipse Canvas.Top="25" Canvas.Left="65"

Width="10" Height="10" Fill="Black" />


Integrating media l.jpg
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="..."


<MediaElement Source="xbox.wmv" />


Naming objects in xaml l.jpg
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


<Ellipse x:Name="theCircle" Width="100"

Height="100" Fill="Yellow" />


Access silverlight via javascript l.jpg
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 l.jpg
Find XAML object via script

  • findName(name) method on Silverlight control

<Canvas xmlns="..."


<Ellipse x:Name="theCircle" Width="100"

Height="100" Fill="Yellow" />


varwpfeControl = document.getElementById("WpfeControl1");

vartheCircle = wpfeControl.findName("theCircle");

if (theCircle != null)

theCircle.opacity = .5;

Silverlight events l.jpg
Silverlight Events

  • Standard Events

    • Loaded

    • MouseMove

    • MouseEnter

    • MouseLeave

    • MouseLeftButtonDown

    • MouseLeftButtonUp

  • Use .NET / ASP.NET AJAX event pattern:

  • KeyUp

  • KeyDown

  • GotFocus

  • LostFocus

function onMouseEnter(sender, eventargs) {

sender.Fill = “Red”;


Silverlight event example l.jpg
Silverlight Event Example

<Canvas xmlns="..."


<Ellipse MouseEnter="javascript:onMouseEnter"


Height="100" Width="100" Fill="Teal" />

<Ellipse Canvas.Left="120“



Height="100" Width="100" Fill="Teal" />


function onMouseEnter(sender) {

sender.Fill = “Coral”;


function onMouseLeave(sender) {

sender.Fill = “Teal”;


Animating with xaml l.jpg
Animating with XAML

  • Silverlight provides a rich animation system

    • Animations can be defined in XAML

    • Animations can be triggered via Code

Animating xaml example l.jpg
Animating XAML Example









From="200" To="1" Duration="0:0:2"






<Ellipse x:Name="theCircle" Width="100"

Height="100" Fill="Yellow" />


Triggers l.jpg

  • <EventTrigger />

    • Used to specify what starts an Animation

    • Properties are used to tie it to other Animation

      • RoutedEvent

        • The event that starts the triggers

      • Actions

        • A optional list of Storyboards to fire

Storyboards l.jpg

  • <Storyboard />

    • Contains one or more Animations

    • Properties are used to share with all Animations

      • TargetName and TargetProperty

      • From, By and To

      • Duration

      • AutoReverse

      • RepeatBehavior

Animation types l.jpg
Animation Types

  • DoubleAnimation

    • Animate numeric properties




From="200" To="1" Duration="0:0:2"


Animation types 2 l.jpg
Animation Types (2)

  • ColorAnimation

    • Animation colors





From="Black" To="LightGray" Duration="0:0:2"

AutoRepeat="True" />


<Ellipse x:Name="theCircle" Width="100" Height="100">


<SolidColorBrush x:Name="circleBrush"

Color="Yellow" />



Animationtypes 3 l.jpg
AnimationTypes (3)

  • PointAnimation

    • Animates Dual-Value Numbers (e.g. 100,100)





From="0,0" To="1,1" Duration="0:0:2"

AutoReverse="True" />


<LinearGradientBrush x:Name="myBrush"

StartPoint="0,0" EndPoint="1,1">





Animating with keyframes l.jpg
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 l.jpg
Animation with KeyFrames - Example






<SplineDoubleKeyFrame Value="0" KeyTime="0:0:1" />

<SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" />

<SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" />




Programmatic animation l.jpg
Programmatic Animation

  • StoryBoard object enables programmatic control of animation sequences

    • Begin()

    • Pause()

    • Resume()

    • Stop()

    • Seek()

function onMouseEnter(sender) {

varanimationSequence = WPFCtrl1.findName(“animationSequence”);



Silverlight 1 1 development l.jpg

Silverlight 1.1 development

Slide59 l.jpg

  • 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

Slide60 l.jpg










DesignerEmotional ConnectionLook, behavior, data visualization, usability, brand impact

DeveloperFunctional CapabilitiesDeployment, function, data connection and integrity, IT process, security

Roadmap l.jpg

MIX 07

Summer 07


  • Silverlight 1.0 Beta

  • Silverlight 1.1 Alpha

  • Silverlight 1.0

  • Silverlight 1.1

  • SilverLight for mobile

  • Expression Studio

  • Expression Blend 2 Preview

  • Expression Media Encoder

  • Expression Studio 2

  • Silverlight Tools Preview for Visual Studio ‘Orcas’

  • Silverlight Tools for Visual Studio ‘Orcas’

Summary l.jpg

  • Silverlightis 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 l.jpg
Where To Learn More

  • Silverlight Dev Center on MSDN

    • Great SDK documentation and Quickstart samples


    • (Coming soon!)


  • Good blogs to watch:



    • ;-)

Thank you l.jpg
Thank you!


[email protected]