Part 2 (Mike) Control Templating Custom Controls Custom Layout OpenFileDialog HTML Integration Deep Zoom Local Storage Q&A Part 1 (Joe) Overview Getting.
Post on 23-Dec-2015
215 Views
Preview:
Transcript
Building Rich Internet Applications Using Microsoft Silverlight
Mike HarshMicrosoft Corporation
Joe StegmanMicrosoft Corporation
Agenda
Part 2 (Mike)Control TemplatingCustom ControlsCustom LayoutOpenFileDialogHTML IntegrationDeep ZoomLocal StorageQ&A
Part 1 (Joe)OverviewGetting StartedBuild an Application
NetworkingXMLControlsData Binding
Silverlight 2 Runtime Features
2D, GraphicsAudio, VideoAnimationsText, 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 SerializerLocal storage*Crypto APIs (AES)*Threading*
Silverlight 2 SDK Libraries
Dynamic Languages*JScriptIronRubyIronPython
Additional Controls*LINQ for XML*XML Serialization*Syndication APIs (RSS)*
* New in Silverlight 2
Silverlight Roadmap
Silverlight V1 Shipped Q307Silverlight V2
March 5th Beta 1 (non-commercial go-live)Q208: Beta 2 (go live)
ToolsExpression Suite and Visual Studio updates for all public Silverlight releasesVisual Studio Designer support (Cider) later this year
Getting Started
an old-ish dog with new-ish tricksand a new dog doing old tricks
demo
Build an Application
Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) ViewStep 4: Create a Details ViewStep 5: Add Search and UX Animations
Build an Application
Step 1: Get DataNetwork data from site of originNetwork data from cross domain (x-domain)*Local data
Silverlight Sandbox
Silverlight lives in the browser SandboxDevelopers cannot extend the sandboxSilverlight extends in a secure way
Local storage (isolated storage)Similar to cookies
FileOpen dialogSockets
Beta 1: Site of origin, port restrictions
Cross domain HTTP(S) requestsSupport Silverlight and Subset of Flash policy files
Build an Application
Step 1: Get DataGet data from http://catalog.video.msn.com/Secured via a Silverlight policy file
Networking
demo
Build an Application
Step 1: Get DataStep 2: Convert XML data to .NET objects
Options:LINQ to XML XMLReaderXML Serialization
Convert XML to Objects(XML -> List<VideoSource>)
demo
Build an Application
Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) View
Beta 1 ControlsCanvasFileOpenDialogGridImageItemsControlMediaElementMultiScaleImageStackPanelTextBoxTextBlockButtonPopup
CheckBox*DataGrid*DateTimePicker*GridSplitter*Hyperlink*ListBox*Calendar*RadioButton*Slider*ToggleButton*Tooltip*WatermarkTextBox*
* ship in a separate libraryNote: additional controls to follow between Beta 1 and final
release
Layout
Layout containersCanvas, Grid, StackPanel, Border
Layout propertiesWidth, MinWidth, MaxWidth, ActualWidthHeight, MinHeight, MaxHeight, ActualHeightMargin and Padding
Layout extensibility
Data Binding
Property BindingOne way, two way and one timeUse “DataContext” propertySupports value converters
Collection/List BindingSupport data templates (repeater)Use “ItemsSource” property
List Binding with Data Templates
{{FileName=“Html.html”, FileImageUrl=“html.jpg”},
{FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}
Data Template:
Data (.NET Object):
Bind using ItemsControl (List Control):
Build an Application
Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) View
Use Data Binding, Layout and Templates
Build the Master View
demo
Build an Application
Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) ViewStep 4: Creating a Detail View
Make a re-usable controlStep 5: Add Search and UX Animations
Time permitting
Finishing the Application
demo
Related Sessions
Integrating Media in Silverlight ApplicationsThursday, 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 OpportunityWednesday, 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 SilverlightFriday, March 7 10:00 AM - 11:15 AM, Lando 4204
Building RIAs Using Silverlight 2Mike HarshProgram ManagerMicrosoft Corporation
Part 2 – Making Apps Sticky
AgendaReview part 1Control TemplatingCustom Controls & LayoutsLocal StorageHTML IntegrationOpenFileDialogDeep ZoomQ&A
What Joe Showed You…
Silverlight 2.0 has a rich UI framework built-inCan provide AJAX++ experiences with very little codeHowever…
You can take your app to 11 with Silverlight 2.0
Silverlight 1
Silverlight 2
Styling / Skinning
Customize the look of an application without changing it’s behavior3 levels of customization:
Styling / Skinning
Customize the look of an application without changing it’s behavior3 levels of customization:
Styling / Skinning
Customize the look of an application without changing it’s behavior3 levels of customization:
Styling / Skinning
Customize the look of an application without changing it’s behavior3 levels of customization:
Styling / Skinning
Silverlight UI customization is designed to easily enable the styling and skinning modelsEasy for designers and developers to understandDesigned for toolabilitySkins can be easily ported to WPF
Styling / Skinning
Parts Based Model:Control authors define parts of a controlAdd metadata so tools can discover parts and customize them in a templateTemplates are defined in XAML and are reusable
DownButton
UpButtomThumb
Track
Custom Control Template
demo
<ControlTemplate <Storyboard x:Name="STATE_MousePressed"> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty=“fill"> <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2F2727"/></ColorAnimationUsingKeyFrames> </Storyboard> <Rectangle Fill="Black" x:Name="ELEMENT_Rectangle"/></ControlTemplate>
+ =
Custom Controls & Layouts
.NET programming model brings componentization and reuse to Silverlight
Custom XAML elements can be created using .NET inheritanceLayout engine can also be extendedWPF attached property model allows existing components to learn new tricksClasses can be used to encapsulate common functionality
Custom Layout Container
demo
Local Storage
Cookies on steroidsProvides 10MB of app specific local storageCan be expanded per app by prompting the userUses .NET IsolatedStorage APIs
Storing Previous Search
demo
HTML DOM Integration
Silverlight apps are browser appsInteracting with the browser host is critical
Interact with HTML elements and script objects through .NET codeExpose .NET objects to javascript
HTML DOM Integration
Typical HTML DOM pattern
Browser History Integration
demo
Open File Dialog
Allows an end-user to choose a fileApplication gets access to a streamSupports multi-selection and file extension filteringEnables:
File uploading (w/ HttpWebRequest)Viewing local images (w/ Image element)Playing local media (w/ MediaElement)
Local Video Playback
demo
Image Deep Zoom
Provides seamless viewing & zooming of huge imagesLoads only the data necessary to show the part of an image the user is viewingEffectively turns a large image into an efficiently scaling vector
Image Deep Zoom
Preprocessing tool breaks image into 256 x 256 tilesThen generates pyramids of tiles at lower resolutions
Deep Zoom – How does it work?
When the image is displayed on the client the lowest resolution tiles are shown firstThen as the higher quality tiles are downloaded, they are smoothly blended in
Deep Zoom – How does it work?
When the image is displayed on the client the lowest resolution tiles are shown firstThen as the higher quality tiles are downloaded, they are smoothly blended in
Deep Zoom – How does it work?
When the image is displayed on the client the lowest resolution tiles are shown firstThen as the higher quality tiles are downloaded, they are smoothly blended in
Image Deep Zoom
Exposed through the MultiScaleImagePreprocessing tool outputs image tiles and XML description file
Using Deep Zoom
demo
© 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.
top related