Learn how to use Microsoft Visual Studio to create applications, how to create UI using XAML markup and code, how to build a custom control, how to retrieve data from a Web service, and how to manipulate data with XML and LINQ. (Part 2 of 2)

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

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

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

5. Silverlight V1 Shipped Q307
Silverlight V2
March 5th 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. Application
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/
Secured via a Silverlight policy 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. Controls
CheckBox*
Canvas
DataGrid*
FileOpenDialog
DateTimePicker*
Grid
GridSplitter*
Image
Hyperlink*
ItemsControl
ListBox*
MediaElement
Calendar*
MultiScaleImage
RadioButton*
StackPanel
Slider*
TextBox
ToggleButton*
TextBlock
Tooltip*
Button
WatermarkTextBox*
Popup
* 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. Data Template:
Data (.NET Object):
{{FileName=“Html.html”, FileImageUrl=“html.jpg”},
{FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}
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

26. Agenda
Review part 1
Custom Controls & Components
UI Customization
Local Storage
HTML Integration
OpenFileDialog
Deep Zoom
Q&A

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

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

32. Silverlight is designed for UI flexibility
Customize the look of an application without
changing it’s behavior
2 levels of customization:
Styling: Small visual changes on an element
(Font, background color, etc)
Skinning: Replacing an element’s entire
visual tree

33. Silverlight UI customization enables styling
through styles and skinning through control
templates
Easy for designers and developers to
understand
Designed for toolability

34. Get more information on custom
controls, styles and templates at:
Creating Rich, Dynamic User Interfaces with
Silverlight 2 Controls
Thursday, March 6 10:15 AM - 11:30 AM, Lando 4204

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

38. Silverlight apps are browser apps
Interacting with the browser host is critical
Interact with and create HTML elements and
script objects through .NET code
Expose .NET objects to javascript
Gives access to common browser services
Alert
Browser history
Existing web app functionality

39. Get more information on HTML DOM and
local storage at:
Lighting Up Your AJAX Applications with
Silverlight
Friday, March 7 10:00 AM - 11:15 AM, Lando 4204

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

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

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

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

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

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. Exposed through the MultiScaleImage
Preprocessing tool outputs image tiles and
XML description file

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

51. © 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.