Developing with Microsoft Silverlight

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

2. ? markjo@microsoft.com www http://blogs.msdn.com/markjo

3. 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

4. Building Applications With .NET web web desktop desktop media & RIA

5. Microsoft Silverlight • is a • cross-browser,cross-platformplug-in • for delivering • the next generation of • media experiences • & • rich interactive applications (RIAs) • for theWeb

6. 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)

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

8. 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

9. 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

10. 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

11. Media and Interactive Content Demo

12. Silverlight Consumer Installation Experience

13. V1.0 V1.1 Silverlight 1.0 and 1.1 Browser Host Deploy • Friction-Free Installer • Auto-Updater .NET forSilverlight • MS Ajax Library • DOM Integration Data Media WPF Extensible Controls Networking REST RSS SOAP POX JSON DLR Ruby Python BCL Generics Collections • Application Services XAML Presentation Core • Friction-Free Installer • Auto-Updater UI Core Vector Text Animation Images Inputs KeyboardMouse Input DRM Media Media VC-1 WMA MP3 Controls Layout Editing

14. .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

15. 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

16. How to build sites that use Silverlight

17. 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

18. 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>

19. 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

20. 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

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

22. Demo

23. 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)

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

25. The Canvas The Rectangle 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>

26. 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>

27. 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>

28. <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path /> Shapes

29. 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

30. 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" />

31. 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> <LinearGradientBrushStartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

32. 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>

33. 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>

34. Using Text • <TextBlock /> <TextBlock>Hello</TextBlock> Hello <TextBlockFontSize="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?

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

36. Transformations • Used to make changes to an object <Rectangle Width="200" Height="100" Fill=“Red"> <Rectangle.RenderTransform> <RotateTransformCenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform> </Rectangle>

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

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

39. Transformations (4) • <TransformGroup /> • Allows Grouping of Multiple Transforms <Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransformScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <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" /> </Canvas>

40. 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>

41. 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>

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

43. Find XAML object via script • findName(name) method on Silverlight control <Canvas xmlns="..." xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas> varwpfeControl = document.getElementById("WpfeControl1"); vartheCircle = wpfeControl.findName("theCircle"); if (theCircle != null) theCircle.opacity = .5;

44. 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”; }

45. 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”; }

46. Code handling with JavaScript and XAML

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

48. Animating XAML Example <Canvas> <Canvas.Triggers> <EventTriggerRoutedEvent="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> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas>

49. Triggers • <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

50. Storyboards • <Storyboard /> • Contains one or more Animations • Properties are used to share with all Animations • TargetName and TargetProperty • From, By and To • Duration • AutoReverse • RepeatBehavior