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)
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Building Rich Internet Applications Using Microsoft Silverlight 2, Part 2
1.
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
6.
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
11.
12. Step 1: Get Data
Step 2: Convert XML data to .NET objects
Options:
LINQ to XML
XMLReader
XML Serialization
13.
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
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
20.
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
22.
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
24.
25.
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
28.
29.
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
31.
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
35.
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
37.
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
40.
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)
42.
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
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
49.
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