2. Part 2 (Mike) Control Templating Custom Controls Custom Layout OpenFileDialog HTML Integration Deep Zoom Local Storage Q&A Part 1 (Joe) Overview Getting Started Build an Application NetworkingXMLControls Data Binding

3. 2D, Graphics Audio, Video Animations Text, Text Input* Controls*Layout*Styles/Templates* Data Binding* Networking HTTP/S and Sockets* * New in Silverlight 2.NET Support* C# and VB.NET* LINQ* XML APIs* Generics* HTML Integration* JSON Serializer Local storage* Crypto APIs (AES)* Threading*

4. Dynamic Languages* JScriptIronRubyIronPython Additional Controls* LINQ for XML* XML Serialization* Syndication APIs (RSS)* * New in Silverlight 2

5. Silverlight V1 Shipped Q307 Silverlight V2 March 5 th Beta 1 (non-commercial go-live) Q208:Beta 2 (go live) Tools Expression Suite and Visual Studio updates for all public Silverlight releases Visual Studio Designer support (Cider) later this year

7. Step 1: Get Data Step 2: Convert XML data to.NET objects Step 3: Build Main (Master) View Step 4: Create a Details View Step 5: Add Search and UX Animations

8. Step 1: Get Data Network data from site of origin Network data from cross domain (x-domain)* Local data

9. Silverlight lives in the browser Sandbox Developers cannot extend the sandbox Silverlight extends in a secure way Local storage (isolated storage) Similar to cookies FileOpen dialog Sockets Beta 1: Site of origin, port restrictions Cross domain HTTP(S) requests Support Silverlight and Subset of Flash policy files

10. Step 1: Get Data Get data from http://catalog.video.msn.com/ http://catalog.video.msn.com/ Secured via a Silverlight policy file policy filepolicy file

12. Step 1: Get Data Step 2: Convert XML data to.NET objects Options: LINQ to XML XMLReader XML Serialization

14. Step 1: Get Data Step 2: Convert XML data to.NET objects Step 3: Build Main (Master) View

15. CanvasFileOpenDialogGridImageItemsControlMediaElementMultiScaleImageStackPanelTextBoxTextBlockButtonPopup CheckBox* DataGrid* DateTimePicker* GridSplitter* Hyperlink* ListBox* Calendar* RadioButton* Slider* ToggleButton* Tooltip* WatermarkTextBox* * ship in a separate library Note: additional controls to follow between Beta 1 and final release

16. Layout containers Canvas, Grid, StackPanel, Border Layout properties Width, MinWidth, MaxWidth, ActualWidth Height, MinHeight, MaxHeight, ActualHeight Margin and Padding Layout extensibility

17. Property Binding One way, two way and one time Use “DataContext” property Supports value converters Collection/List Binding Support data templates (repeater) Use “ItemsSource” property

18. {{FileName=“Html.html”, FileImageUrl=“html.jpg”}, {FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}} Data Template: Data (.NET Object): Bind using ItemsControl (List Control):

19. Step 1: Get Data Step 2: Convert XML data to.NET objects Step 3: Build Main (Master) View Use Data Binding, Layout and Templates

21. Step 1: Get Data Step 2: Convert XML data to.NET objects Step 3: Build Main (Master) View Step 4: Creating a Detail View Make a re-usable control Step 5: Add Search and UX Animations Time permitting

23. Integrating Media in Silverlight Applications Thursday, March 6 8:30 AM - 9:45 AM, San Polo 3501A Encoding Video for Microsoft Silverlight Delivery Scenarios Wednesday, March 5 3:00 PM - 4:15 PM, Delfino 4105 Creating Rich, Dynamic User Interfaces with Silverlight 2 Controls Thursday, March 6 10:15 AM - 11:30 AM, Lando 4204 Silverlight and the Advertising Opportunity Wednesday, March 5 4:30 PM - 5:45 PM, San Polo 3501A Working with Data and Web Services in Microsoft Silverlight 2 Wednesday, March 5 1:30 PM - 2:45 PM, Delfino 4105 Lighting Up Your AJAX Applications with Silverlight Friday, March 7 10:00 AM - 11:15 AM, Lando 4204

25. Agenda Review part 1 Control Templating Custom Controls & Layouts Local Storage HTML Integration OpenFileDialog Deep Zoom Q&A

26. Silverlight 2.0 has a rich UI framework built-in Can provide AJAX++ experiences with very little code However… You can take your app to 11 with Silverlight 2.0

29. Customize the look of an application without changing it’s behavior 3 levels of customization:

30. Customize the look of an application without changing it’s behavior 3 levels of customization:

31. Customize the look of an application without changing it’s behavior 3 levels of customization:

32. Customize the look of an application without changing it’s behavior 3 levels of customization:

33. Silverlight UI customization is designed to easily enable the styling and skinning models Easy for designers and developers to understand Designed for toolability Skins can be easily ported to WPF

34. Parts Based Model: Control authors define parts of a control Add metadata so tools can discover parts and customize them in a template Templates are defined in XAML and are reusable DownButtonUpButtomThumb Track

35. <ControlTemplate + =

36. .NET programming model brings componentization and reuse to Silverlight Custom XAML elements can be created using.NET inheritance Layout engine can also be extended WPF attached property model allows existing components to learn new tricks Classes can be used to encapsulate common functionality

38. Cookies on steroids Provides 10MB of app specific local storage Can be expanded per app by prompting the user Uses.NET IsolatedStorage APIs

40. Silverlight apps are browser apps Interacting with the browser host is critical Interact with HTML elements and script objects through.NET code Expose.NET objects to javascript

41. Typical HTML DOM pattern

43. Allows an end-user to choose a file Application gets access to a stream Supports multi-selection and file extension filtering Enables: File uploading (w/ HttpWebRequest) Viewing local images (w/ Image element) Playing local media (w/ MediaElement)

45. Provides seamless viewing & zooming of huge images Loads only the data necessary to show the part of an image the user is viewing Effectively turns a large image into an efficiently scaling vector

46. Preprocessing tool breaks image into 256 x 256 tiles Then generates pyramids of tiles at lower resolutions

47. When the image is displayed on the client the lowest resolution tiles are shown first Then as the higher quality tiles are downloaded, they are smoothly blended in

48. When the image is displayed on the client the lowest resolution tiles are shown first Then as the higher quality tiles are downloaded, they are smoothly blended in

49. When the image is displayed on the client the lowest resolution tiles are shown first Then as the higher quality tiles are downloaded, they are smoothly blended in

50. Exposed through the MultiScaleImage Preprocessing tool outputs image tiles and XML description file

52. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.