silverlight 2
DESCRIPTION
This deck provides an overview for .NET developers in how to create Silverlight 2 applications.TRANSCRIPT
Dave BostDeveloper Evangelisthttp://davebost.com/bloghttp://twitter.com/davebost
Where did Silverlight come from and what can it really doWhat is XAML and how does it aid in UI authoringWhat controls ship with Silverlight and how can they be styled and data-boundWhat functionality is available in the Silverlight Base Class Library
Visual Studio 2008Silverlight 2 RuntimeMicrosoft Silverlight Tools for for VS2008
Other useful stuffSilverlight 2 SDK (installed with tools install)Expression Studio 2 (Blend SP1)Deep Zoom ComposerSilverlight 2 Controls Source Code + Unit Tests
Introduction to SilverlightXAMLControlsBase Class Library
Formerly known as "WPF/E"Microsoft's platform for rich, highly interactive Web experiences and RIAs
Cross-platform (browsers and OSes)Windows, Mac OS, Linux ("Moonlight")Internet Explorer, Firefox, Safari, and more
XAML-based rendering (subset of WPF XAML)
Implemented as browser plug-inQuick, easy install experience
Silverlight 1.0Shipped September 2007XAML rendering and JavaScript API
Silverlight 2Shipped October 2008XAML, .NET Framework, managed code, dynamic languages (e.g., IronPython, IronRuby)
Refactored version of full-size CLRSame core type system, JIT compiler, etc.COM interop, remoting, binary serialization, server GC, and other features removedCAS replaced with transparency modelMultiple CLR instances per process supportedMost globalization support pushed down to OSDynamic Language Runtime (DLR) added
Small footprint (< 2MB), cross-platform
System.WindowsSystem.Windows.ControlsSystem.Windows.InputSystem.Windows.InteropSystem.Windows.MediaSystem.Windows.ShapesSystem.Windows.Threading
System.Windows.Browser
SystemSystem.CollectionsSystem.Collections.GenericSystem.DiagnosticsSystem.GlobalizationSystem.IOSystem.IO.- IsolatedStorageSystem.ReflectionSystem.SecuritySystem.Security.CryptographySystem.TextSystem.Threading
SystemSystem.Collections.GenericSystem.ComponentModelSystem.DiagnosticsSystem.Text.RegularExpressions
System.LinqSystem.Linq.ExpressionsSystem.Runtime.CompilerServicesSystem.Security.Cryptography
System.XmlSystem.XmlSchemaSystem.Xml.Serialization
Web project generated by Visual Studio for testing and debugging
Main project
HTML test page
XAML file containing global (application) resources and event handlers
XAML file containing "page" seen by user
XAP file containing application assembly, library assemblies, and resources
<object id="SilverlightControl" data="data:application/x-silverlight" type="application/x-silverlight-2-b2" width="100%" height="100%"> <param name="source" value="ClientBin/SilverLife.xap" /></object>
<object id="SilverlightControl" data="data:application/x-silverlight" type="application/x-silverlight-2-b2" width="100%" height="100%"> <param name="source" value="ClientBin/SilverLife.xap" /></object>
OBJECT tag
Application package
Control DOM ID
MIME type
Control version
Width and heightXAP file containing application assembly, resources, etc.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="20" Canvas.Top="20" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Yellow" /> <Ellipse Canvas.Left="80" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Ellipse Canvas.Left="140" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Path Data="M 70, 150 A 60, 60 0 0 0 170, 150" Stroke="Black" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" /></Canvas>
XAML objects fire eventsCanvases and UI objects fire Loaded events and mouse events (e.g., MouseLeftButtonDown)Root canvas also fires keyboard eventsOther objects fire object-specific events
Handlers can be registered declaratively or programmaticallyMouse events "bubble up" through XAML object hierarchy
Layout is driven by Panel objectsEvery page has a root Grid objectPage can contain additional Grids or Canvases
Panels are a containers for other UI elements
Grids, StackPanel, Canvas are types of panels
All units measured in logical pixels
<Grid/><Grid/>
<Canvas/><Canvas/>
<StackPanel<StackPanel/>/>
<StackPanel<StackPanel/>/>
Silverlight supports six shapes
Rectangle Ellipse Polygon
Line PolyLine Path
Audio/video playback in a boxProgressive downloads and streaming
Robust API provides basis for rich UIsPlay, Pause, Stop, and other methodsPosition, Volume, and other propertiesDownloadProgressChanged and other events
WMV1/2/3/A/VC1, WMA, and MP3
TranslateTransform
RotateTransform
SkewTransform ScaleTransform
Animations are created by varying properties of XAML objects over time
From/To animations vary properties linearlyKey-frame animations use discrete steps
Animation objects define animationsDoubleAnimation[UsingKeyFrames]ColorAnimation[UsingKeyFrames]PointAnimation[UsingKeyFrames]
StoryBoard objects hold animation objects
Created a smiley face object using Expression BlendApplied an animation to the smiley face objectAdded some event handling to the smiley face using Visual Studio
More than 20 built-in controlsCanvas, StackPanel, Grid, and GridSplitterButton, CheckBox, HyperlinkButton, RepeatButton, RadioButton, and ToggleButtonTextBox, ListBox, and DataGridTabControl, Slider, and MultiScaleImageBorder, Calendar, DatePicker, and more!
Support styles, templates, and data binding
FrameworkElementFrameworkElement
ButtonBaseButtonBase
ContentControlContentControl
ControlControl
ButtonButton
HyperlinkButtonHyperlinkButton
RepeatButtonRepeatButton
ToggleButtonToggleButton
CheckBoxCheckBox
RadioButtonRadioButton
ScrollViewerScrollViewer
CalendarCalendar
DataGridDataGrid
DatePickerDatePicker
GridSplitterGridSplitter
TextBoxTextBox
RangeBaseRangeBase
ItemsControlItemsControl
ListBoxListBox
SliderSlider
ScrollbarScrollbar
TabControlTabControl
FrameworkElementFrameworkElement
CanvasCanvas
PanelPanel
GridGrid
StackPanelStackPanel
BorderBorder
ImageImage
MediaElementMediaElement
MultiScaleImageMultiScaleImage
TextBlockTextBlock
InkPresenterInkPresenter
Redefine a control’s entire visual treePerform extreme customization without changing basic behavior of controlExposed through control's Template property (inherited from Control base class)
Use {TemplateBinding} to flow property values from control to templateUse ContentPresenter and ItemsPresenter to flow content and items to template
Styles provide level of indirection between visual properties and their values
Define style as XAML resourceApply style using {StaticResource} markup extension
Can be scoped globally or locallyCombine styles and templates to “stylize” controls with custom visual trees
Permits properties of one object to be bound to properties of another
Target property must be DependencyPropertySource property can be any type of propertySource can be a collection if target supports binding to collections
{Binding} markup extension provides declarative support for data binding
Added a ListBox control to our XAMLApplied a DataTemplate to the ListBoxData-bound our new ListBox control to a generic list of user objectsApplied 2 different styles to our data-bound ListBox
• System.Windows.Browser namespace contains classes for accessing browser DOM• HtmlPage, HtmlWindow, and others
• Managed -> unmanaged• Access DOM from managed code• Call JavaScript functions from managed code
• Unmanaged -> managed• Call managed code from JavaScript• Process DOM events with managed code
General-purpose file I/O not permittedOpenFileDialog can be used to open files
User interaction constitutes permission needed to safely open filesNo SaveFileDialog yet
Isolated storage can be used to persist data locally subject to quotas
Quote is initially set to 1MB per domain but can be increased
• Silverlight 2 has rich networking support• SOAP/XML Web services via WCF
proxies• HTTP services (POX, REST, RSS,
ATOM) via HttpWebRequest and WebClient classes
• Socket support, asset downloads over HTTP, syndication classes, and more
• Cross-domain access supported using Flash-compatible or Silverlight XML policy files
• Allowed if target domain has XML policy file in place permitting calls from other domains• Crossdomain.xml – Requires
domain="*" allowing calls from any domain
• Clientaccesspolicy.xml – Can restrict access to certain domains only
• Policy file must be located at domain root
• Delegate-based HTTP networking API• Supports asynchronous operation
only• Provides control over wire format
• GET/POST/PUT/DELETE (REST)• Customization of HTTP headers
• Completion methods called on background threads
• Event-based HTTP networking API• Commonly used to download
assets• DownloadStringAsync - String• OpenReadAsync – Stream
(binary)• Can also be used to perform
uploads• Fires progress and completion events
and supports cancellation of pending requests• Event handlers execute on UI
thread
Added a DataGrid control to our XAMLOpened and parsed a local XML fileDownloaded and parsed an RSS feedData-bound our parsed data to the added DataGrid control
Microsoft Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of media experiences and rich interactive applications for the WebBy using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow
Visit the urls below for additional information
http://silverlight.net/default.aspx
http://msdn.microsoft.com/silverlight
http://timheuer.com/blog
For the latest titles, visitwww.microsoft.com/learning/books/devtools
These books can be found and purchased at all major book stores and online retailers
For training information and availability
www.microsoft.com/learning
Are you ready to take your career as a developer to the next level?Looking for a learning experience that is designed for you?
Join MSDN Ramp Up and Summit Your Career!MSDN Ramp Up is your online source that provides free training and technical resources to help take your development skills to the next level.• Step-by-Step training plans to build your development skills.
• Premium technical content created by expert developers for developers.
• Access to valuable online e-learning, e-references, and virtual labs.
• 50% discount on select certification exams and 30% discount on Microsoft Press training kits.
Join Ramp Up for free today!Go to: http://msdn.microsoft.com/rampup
http://thirstydeveloper.com
“Looking at someone’s code, but with audio”
The nature of software development is radically changing ...
ARE YOU READY?
Prepare yourself for a demanding future. Attend the MSDN Developer Conference.
•Experience Microsoft’s Cloud Computing Platform •Be among the first to see Windows 7•Take your .NET skills to the next level•The Cost? Just $99
To register, check out www.MSDNDevCon.com
RSVP Code: MDCDEV
Houston 12/9/08 Orlando 12/11/08 Atlanta 12/16/08 Chicago 1/13/09 Minneapolis 1/13/09 Washington, DC 1/16/09 New York 1/20/09 Boston 1/22/09 Detroit 1/22/09 Dallas 1/26/09
San Francisco 2/19/09
ONILNE: Find our tag under #MSDNDevCon at Facebook, Twitter, Flickr, Delicious and Twemes
Dave Bost
thank you!
http://davebost.comhttp://twitter.com/davebost
© 2007 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.