SlideShare a Scribd company logo

Silverlight 2

•Download as PPT, PDF•
•
Dave Bost
Dave Bost

The document provides an overview of Silverlight, including: - Its origins as a platform for rich web experiences and applications. - Key features like XAML support, .NET integration, and cross-browser compatibility. - The controls that ship with Silverlight and how to style and bind them. - Capabilities of the Base Class Library like media playback and animations. - How to develop Silverlight applications using Visual Studio and Expression Blend.

1 of 50
Dave Bost Developer Evangelist http://davebost.com/blog http://twitter.com/davebost
Where did Silverlight come from and what can it really do What is XAML and how does it aid in UI authoring What controls ship with Silverlight and how can they be styled and data-bound What functionality is available in the Silverlight Base Class Library
Visual Studio 2008 Silverlight 2 Runtime Microsoft Silverlight Tools for for VS2008 Other useful stuff Silverlight 2 SDK (installed with tools install) Expression Studio 2 (Blend SP1) Deep Zoom Composer Silverlight 2 Controls Source Code + Unit Tests
Introduction to Silverlight XAML Controls Base 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-in Quick, easy install experience
Silverlight 1.0 Shipped September 2007 XAML rendering and JavaScript API Silverlight 2 Shipped October 2008 XAML, .NET Framework, managed code, dynamic languages (e.g., IronPython, IronRuby)
 
Refactored version of full-size CLR Same core type system, JIT compiler, etc. COM interop, remoting, binary serialization, server GC, and other features removed CAS replaced with transparency model Multiple CLR instances per process supported Most globalization support pushed down to OS Dynamic Language Runtime (DLR) added Small footprint (< 2MB), cross-platform
System.Windows System.Windows.Controls System.Windows.Input System.Windows.Interop System.Windows.Media System.Windows.Shapes System.Windows.Threading System.Windows.Browser System System.Collections System.Collections.Generic System.Diagnostics System.Globalization System.IO System.IO.- IsolatedStorage System.Reflection System.Security System.Security.Cryptography System.Text System.Threading System System.Collections.Generic System.ComponentModel System.Diagnostics System.Text.RegularExpressions System.Linq System.Linq.Expressions System.Runtime.CompilerServices System.Security.Cryptography System.Xml System.XmlSchema System.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 &quot;page&quot; seen by user XAP file containing application assembly, library assemblies, and resources
<object id=&quot;SilverlightControl&quot; data=&quot;data:application/x-silverlight&quot; type=&quot;application/x-silverlight-2-b2&quot; width=&quot;100%&quot; height=&quot;100%&quot;> <param name=&quot;source&quot; value=&quot;ClientBin/SilverLife.xap&quot; /> </object> OBJECT tag Application package Control DOM ID MIME type Control version Width and height XAP file containing application assembly, resources, etc.
<Canvas Width=&quot;300&quot; Height=&quot;300&quot; xmlns=&quot;http://schemas.microsoft.com/client/2007&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;> <Ellipse Canvas.Left=&quot;20&quot; Canvas.Top=&quot;20&quot; Height=&quot;200&quot; Width=&quot;200&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;10&quot; Fill=&quot;Yellow&quot; /> <Ellipse Canvas.Left=&quot;80&quot; Canvas.Top=&quot;80&quot; Height=&quot;35&quot; Width=&quot;25&quot; Stroke=&quot;Black&quot; Fill=&quot;Black&quot; /> <Ellipse Canvas.Left=&quot;140&quot; Canvas.Top=&quot;80&quot; Height=&quot;35&quot; Width=&quot;25&quot; Stroke=&quot;Black&quot; Fill=&quot;Black&quot; /> <Path Data=&quot;M 70, 150 A 60, 60 0 0 0 170, 150&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;15&quot; StrokeStartLineCap=&quot;Round&quot; StrokeEndLineCap=&quot;Round&quot; /> </Canvas>
XAML objects fire events Canvases and UI objects fire Loaded events and mouse events (e.g., MouseLeftButtonDown) Root canvas also fires keyboard events Other objects fire object-specific events Handlers can be registered declaratively or programmatically Mouse events &quot;bubble up&quot; through XAML object hierarchy
Layout is driven by Panel objects Every page has a root Grid object Page 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/>
<Canvas/>
<StackPanel/>
<StackPanel/>
Silverlight supports six shapes Rectangle Ellipse Polygon Line PolyLine Path
Audio/video playback in a box Progressive downloads and streaming Robust API provides basis for rich UIs Play, Pause, Stop, and other methods Position, Volume, and other properties DownloadProgressChanged 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 linearly Key-frame animations use discrete steps Animation objects define animations DoubleAnimation[UsingKeyFrames] ColorAnimation[UsingKeyFrames] PointAnimation[UsingKeyFrames] StoryBoard objects hold animation objects
 
Created a smiley face object using Expression Blend Applied an animation to the smiley face object Added some event handling to the smiley face using Visual Studio
More than 20 built-in controls Canvas, StackPanel, Grid, and GridSplitter Button, CheckBox, HyperlinkButton, RepeatButton, RadioButton, and ToggleButton TextBox, ListBox, and DataGrid TabControl, Slider, and MultiScaleImage Border, Calendar, DatePicker, and more! Support styles, templates, and data binding
FrameworkElement ButtonBase ContentControl Control Button HyperlinkButton RepeatButton ToggleButton CheckBox RadioButton ScrollViewer Calendar DataGrid DatePicker GridSplitter TextBox RangeBase ItemsControl ListBox Slider Scrollbar TabControl
FrameworkElement Canvas Panel Grid StackPanel Border Image MediaElement MultiScaleImage TextBlock InkPresenter
Redefine a control’s entire visual tree Perform extreme customization without changing basic behavior of control Exposed through control's Template property (inherited from Control base class) Use {TemplateBinding} to flow property values from control to template Use 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 resource Apply style using {StaticResource} markup extension Can be scoped globally or locally Combine 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 DependencyProperty Source property can be any type of property Source 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 XAML Applied a DataTemplate to the ListBox Data-bound our new ListBox control to a generic list of user objects Applied 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 permitted OpenFileDialog can be used to open files User interaction constitutes permission needed to safely open files No 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=&quot;*&quot; 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 XAML Opened and parsed a local XML file Downloaded and parsed an RSS feed Data-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 Web By 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, visit www.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.com http://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.

More Related Content

Silverlight 2

  • 1. Dave Bost Developer Evangelist http://davebost.com/blog http://twitter.com/davebost
  • 2. Where did Silverlight come from and what can it really do What is XAML and how does it aid in UI authoring What controls ship with Silverlight and how can they be styled and data-bound What functionality is available in the Silverlight Base Class Library
  • 3. Visual Studio 2008 Silverlight 2 Runtime Microsoft Silverlight Tools for for VS2008 Other useful stuff Silverlight 2 SDK (installed with tools install) Expression Studio 2 (Blend SP1) Deep Zoom Composer Silverlight 2 Controls Source Code + Unit Tests
  • 4. Introduction to Silverlight XAML Controls Base Class Library
  • 5. Formerly known as &quot;WPF/E&quot; Microsoft's platform for rich, highly interactive Web experiences and RIAs Cross-platform (browsers and OSes) Windows, Mac OS, Linux (&quot;Moonlight&quot;) Internet Explorer, Firefox, Safari, and more XAML-based rendering (subset of WPF XAML) Implemented as browser plug-in Quick, easy install experience
  • 6. Silverlight 1.0 Shipped September 2007 XAML rendering and JavaScript API Silverlight 2 Shipped October 2008 XAML, .NET Framework, managed code, dynamic languages (e.g., IronPython, IronRuby)
  • 7.  
  • 8. Refactored version of full-size CLR Same core type system, JIT compiler, etc. COM interop, remoting, binary serialization, server GC, and other features removed CAS replaced with transparency model Multiple CLR instances per process supported Most globalization support pushed down to OS Dynamic Language Runtime (DLR) added Small footprint (< 2MB), cross-platform
  • 9. System.Windows System.Windows.Controls System.Windows.Input System.Windows.Interop System.Windows.Media System.Windows.Shapes System.Windows.Threading System.Windows.Browser System System.Collections System.Collections.Generic System.Diagnostics System.Globalization System.IO System.IO.- IsolatedStorage System.Reflection System.Security System.Security.Cryptography System.Text System.Threading System System.Collections.Generic System.ComponentModel System.Diagnostics System.Text.RegularExpressions System.Linq System.Linq.Expressions System.Runtime.CompilerServices System.Security.Cryptography System.Xml System.XmlSchema System.Xml.Serialization
  • 10. 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 &quot;page&quot; seen by user XAP file containing application assembly, library assemblies, and resources
  • 11. <object id=&quot;SilverlightControl&quot; data=&quot;data:application/x-silverlight&quot; type=&quot;application/x-silverlight-2-b2&quot; width=&quot;100%&quot; height=&quot;100%&quot;> <param name=&quot;source&quot; value=&quot;ClientBin/SilverLife.xap&quot; /> </object> OBJECT tag Application package Control DOM ID MIME type Control version Width and height XAP file containing application assembly, resources, etc.
  • 12. <Canvas Width=&quot;300&quot; Height=&quot;300&quot; xmlns=&quot;http://schemas.microsoft.com/client/2007&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;> <Ellipse Canvas.Left=&quot;20&quot; Canvas.Top=&quot;20&quot; Height=&quot;200&quot; Width=&quot;200&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;10&quot; Fill=&quot;Yellow&quot; /> <Ellipse Canvas.Left=&quot;80&quot; Canvas.Top=&quot;80&quot; Height=&quot;35&quot; Width=&quot;25&quot; Stroke=&quot;Black&quot; Fill=&quot;Black&quot; /> <Ellipse Canvas.Left=&quot;140&quot; Canvas.Top=&quot;80&quot; Height=&quot;35&quot; Width=&quot;25&quot; Stroke=&quot;Black&quot; Fill=&quot;Black&quot; /> <Path Data=&quot;M 70, 150 A 60, 60 0 0 0 170, 150&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;15&quot; StrokeStartLineCap=&quot;Round&quot; StrokeEndLineCap=&quot;Round&quot; /> </Canvas>
  • 13. XAML objects fire events Canvases and UI objects fire Loaded events and mouse events (e.g., MouseLeftButtonDown) Root canvas also fires keyboard events Other objects fire object-specific events Handlers can be registered declaratively or programmatically Mouse events &quot;bubble up&quot; through XAML object hierarchy
  • 14. Layout is driven by Panel objects Every page has a root Grid object Page 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
  • 19. Silverlight supports six shapes Rectangle Ellipse Polygon Line PolyLine Path
  • 20. Audio/video playback in a box Progressive downloads and streaming Robust API provides basis for rich UIs Play, Pause, Stop, and other methods Position, Volume, and other properties DownloadProgressChanged and other events WMV1/2/3/A/VC1, WMA, and MP3
  • 22. Animations are created by varying properties of XAML objects over time From/To animations vary properties linearly Key-frame animations use discrete steps Animation objects define animations DoubleAnimation[UsingKeyFrames] ColorAnimation[UsingKeyFrames] PointAnimation[UsingKeyFrames] StoryBoard objects hold animation objects
  • 23.  
  • 24. Created a smiley face object using Expression Blend Applied an animation to the smiley face object Added some event handling to the smiley face using Visual Studio
  • 25. More than 20 built-in controls Canvas, StackPanel, Grid, and GridSplitter Button, CheckBox, HyperlinkButton, RepeatButton, RadioButton, and ToggleButton TextBox, ListBox, and DataGrid TabControl, Slider, and MultiScaleImage Border, Calendar, DatePicker, and more! Support styles, templates, and data binding
  • 26. FrameworkElement ButtonBase ContentControl Control Button HyperlinkButton RepeatButton ToggleButton CheckBox RadioButton ScrollViewer Calendar DataGrid DatePicker GridSplitter TextBox RangeBase ItemsControl ListBox Slider Scrollbar TabControl
  • 27. FrameworkElement Canvas Panel Grid StackPanel Border Image MediaElement MultiScaleImage TextBlock InkPresenter
  • 28. Redefine a control’s entire visual tree Perform extreme customization without changing basic behavior of control Exposed through control's Template property (inherited from Control base class) Use {TemplateBinding} to flow property values from control to template Use ContentPresenter and ItemsPresenter to flow content and items to template
  • 29. Styles provide level of indirection between visual properties and their values Define style as XAML resource Apply style using {StaticResource} markup extension Can be scoped globally or locally Combine styles and templates to “stylize” controls with custom visual trees
  • 30. Permits properties of one object to be bound to properties of another Target property must be DependencyProperty Source property can be any type of property Source can be a collection if target supports binding to collections {Binding} markup extension provides declarative support for data binding
  • 31.  
  • 32. Added a ListBox control to our XAML Applied a DataTemplate to the ListBox Data-bound our new ListBox control to a generic list of user objects Applied 2 different styles to our data-bound ListBox
  • 33. 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
  • 34. General-purpose file I/O not permitted OpenFileDialog can be used to open files User interaction constitutes permission needed to safely open files No 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
  • 35. 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
  • 36. Allowed if target domain has XML policy file in place permitting calls from other domains Crossdomain.xml – Requires domain=&quot;*&quot; allowing calls from any domain Clientaccesspolicy.xml – Can restrict access to certain domains only Policy file must be located at domain root
  • 37. 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
  • 38. 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
  • 39.  
  • 40. Added a DataGrid control to our XAML Opened and parsed a local XML file Downloaded and parsed an RSS feed Data-bound our parsed data to the added DataGrid control
  • 41. 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 Web By 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
  • 42. Visit the urls below for additional information http://silverlight.net/default.aspx http://msdn.microsoft.com/silverlight http://timheuer.com/blog
  • 43. For the latest titles, visit www.microsoft.com/learning/books/devtools
  • 44. These books can be found and purchased at all major book stores and online retailers
  • 45. For training information and availability www.microsoft.com/learning
  • 46. 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
  • 47. http://thirstydeveloper.com “ Looking at someone’s code, but with audio”
  • 48. 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
  • 49. Dave Bost thank you! http://davebost.com http://twitter.com/davebost
  • 50. © 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.

Editor's Notes

  1. Hello and Welcome to this MSDN session on {insert session title}. My name is {insert name} Let us start this session by going into more detail on exactly what we will be covering.