Developing with Microsoft Silverlight Mark Johnston Developer & Platform Group Microsoft UK April 2007

? www

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) 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 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.NET Framework programming model for these scenarios

Media and Interactive Content Demo

Silverlight Consumer Installation Experience

Silverlight 1.0 and 1.1 Browser Host Deploy Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater Browser Host Deploy Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater Application ServicesApplication Services Presentation Core UI Core Vector Text AnimationImages UI Core Vector Text AnimationImagesInputs Keyboard Mouse Input Inputs Media VC-1 WMA MP3 Media DRMMediaDRMMedia Controls Layout Editing Controls.NET for Silverlight XAMLXAML DataMediaDataMediaWPF Extensible Controls WPF DLR Ruby Python DLR BCL Generics Collections BCL NetworkingRESTRSSSOAPNetworkingRESTRSSSOAP POXJSONPOXJSON V1.0V1.0V1.1V1.1 MS Ajax LibraryMS Ajax Library DOM IntegrationDOM Integration MS Ajax LibraryMS Ajax Library DOM IntegrationDOM Integration Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-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 YYYYMicrosoft 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 new agHost("wpfeControl1Host", // hostElementID "wpfeControl1", // ID of the WPF/E control "400", // Width "400", // Height "# ", // Background color null, // SourceElement "helloworld.xaml", // Source file "true", // IsWindowless "30", // MaxFrameRate null // OnError handler ); new agHost("wpfeControl1Host", // hostElementID "wpfeControl1", // ID of the WPF/E control "400", // Width "400", // Height "# ", // Background color null, // SourceElement "helloworld.xaml", // Source file "true", // IsWindowless "30", // MaxFrameRate null // OnError handler );

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

Demo

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: <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" /> Width="200" Height="150" Fill=“Yellow" /></Canvas> <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" /> 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="..."> xmlns:x="..."> </Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> </Canvas>

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

Shapes

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) Support creation by name 141 named colors supported (e.g. Blue, Red, Green) Supports #FFFFFF or #FFFFFFFF syntax as well </Rectangle> </Rectangle>

Brushes (3) Start and Stop are to set angle as numbers Gradient Stops are the different color points </Rectangle> </Rectangle>

Brushes (4) Gradient Stops are same syntax as Linear Gradient <GradientStop Color="Red" <GradientStop Color="Red" Offset="0" /> Offset="0" /> <GradientStop Color="Black" <GradientStop Color="Black" Offset="1" /> Offset="1" /> </Rectangle> <GradientStop Color="Red" <GradientStop Color="Red" Offset="0" /> Offset="0" /> <GradientStop Color="Black" <GradientStop Color="Black" Offset="1" /> Offset="1" /> </Rectangle>

Brushes (5) Gradient Stops are same syntax as Linear Gradient <ImageBrush <ImageBrush ImageSource=" /> ImageSource=" /> </Ellipse> <ImageBrush <ImageBrush ImageSource=" /> ImageSource=" /> </Ellipse>

Using Text <TextBlock>Hello</TextBlock><TextBlock>Hello</TextBlock> Hello Hello Hello Hello <TextBlock FontFamily="Courier New">Hello FontFamily="Courier New">Hello <TextBlock Hello Hello there, how are you? Hello there, how are you?</TextBlock> Hello there, how are you? Hello there, how are you?</TextBlock> Hello there, how are you? <TextBlock> Hello there, how are you? Hello there, how are you?</TextBlock><TextBlock> </TextBlock> Hello there, how are you?

Using Images Like ImageBrush But can only place a rectangular image

Transformations Used to make changes to an object </Rectangle> </Rectangle>

Transformations (2) Power in Transforming Groups of Objects <Canvas> <Ellipse Canvas.Top="25" Canvas.Left="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> </Canvas><Canvas> <Ellipse Canvas.Top="25" Canvas.Left="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> </Canvas>

Transformations (3) Transform Types Rotation Resizes/Stretch Skews Moves Scale, Skew and Translate Combined

Transformations (4) Allows Grouping of Multiple Transforms <Canvas> <Ellipse Canvas.Top="25" Canvas.Left="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /></Canvas><Canvas> <Ellipse Canvas.Top="25" Canvas.Left="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /></Canvas>

Integrating Media 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="..."> xmlns:x="..."> </Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> </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" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas><Canvas> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> 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; theCircle.opacity =.5; var wpfeControl = document.getElementById("WpfeControl1"); var theCircle = wpfeControl.findName("theCircle"); if (theCircle != null) theCircle.opacity =.5; theCircle.opacity =.5; <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas>

Referencing Child Elements Canvas.Children collection: Add() Insert() Remove() RemoveAt() GetItem() Clear() Count

CreateFromXaml method Allows dynamic Silverlight object creation and insertion into existing XAML tree Enables very interesting AJAX scenarios where the XAML fragment is created and returned from a server var wpfeControl = document.getElementById("WpfeControl1"); var rootCanvas2 = wpfeControl.findName("canvas2"); var fragment =' '; var newRect = wpfeControl.createFromXaml(fragment); var newRect = wpfeControl.createFromXaml(fragment); rootCanvas2.children.add(newRect); var wpfeControl = document.getElementById("WpfeControl1"); var rootCanvas2 = wpfeControl.findName("canvas2"); var fragment =' '; var newRect = wpfeControl.createFromXaml(fragment); var newRect = wpfeControl.createFromXaml(fragment); rootCanvas2.children.add(newRect);

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

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

Code handling with JavaScript and XAML

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> <DoubleAnimation <DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> AutoReverse="True"/> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas><Canvas> <DoubleAnimation <DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> AutoReverse="True"/> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas>

Triggers 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 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 DoubleAnimation Animate numeric properties <DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> AutoReverse="True"/><DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> AutoReverse="True"/>

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

AnimationTypes (3) PointAnimation Animates Dual-Value Numbers (e.g. 100,100)...<PointAnimation Storyboard.TargetName="myBrush" Storyboard.TargetName="myBrush" Storyboard.TargetProperty="StartPoint" Storyboard.TargetProperty="StartPoint" From="0,0" To="1,1" Duration="0:0:2" From="0,0" To="1,1" Duration="0:0:2" AutoReverse="True" /> AutoReverse="True" />... <LinearGradientBrush x:Name="myBrush" StartPoint="0,0" EndPoint="1,1"> StartPoint="0,0" EndPoint="1,1"> </LinearGradientBrush>...<PointAnimation Storyboard.TargetName="myBrush" Storyboard.TargetName="myBrush" Storyboard.TargetProperty="StartPoint" Storyboard.TargetProperty="StartPoint" From="0,0" To="1,1" Duration="0:0:2" From="0,0" To="1,1" Duration="0:0:2" AutoReverse="True" /> AutoReverse="True" />... <LinearGradientBrush x:Name="myBrush" StartPoint="0,0" EndPoint="1,1"> StartPoint="0,0" EndPoint="1,1"> </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 (2) Three types of KeyFrames Discrete Specific value to set immediately Linear Animate from previous value using linear interpolation Spline Change value progressively using splined interpolation

Animation with KeyFrames - Example...<DoubleAnimationUsingKeyFrames Storyboard.TargetName="theCircle" Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width"> Storyboard.TargetProperty="Width"> </DoubleAnimationUsingKeyFrames>......<DoubleAnimationUsingKeyFrames Storyboard.TargetName="theCircle" Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width"> Storyboard.TargetProperty="Width"> </DoubleAnimationUsingKeyFrames>...

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

Animating XAML

Silverlight 1.1 development

62 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

63 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…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 (Coming soon!) Good blogs to watch: ;-)

? www Thank you!