1 / 65

Developing with Microsoft Silverlight

Developing with Microsoft Silverlight. Mark Johnston Developer & Platform Group Microsoft UK April 2007. ? markjo@microsoft.com www http://blogs.msdn.com/markjo. Agenda. Overview 1.0 and 1.1 releases Scenarios How to build sites that use Silverlight XAML

Audrey
Télécharger la présentation

Developing with Microsoft Silverlight

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Developing with Microsoft Silverlight Mark Johnston Developer & Platform Group Microsoft UK April 2007

  2. ? markjo@microsoft.com www http://blogs.msdn.com/markjo

  3. Agenda • Overview • 1.0 and 1.1 releases • Scenarios • How to build sites that use Silverlight • XAML • Graphics, Brushes, Text, Media, Transforms • JavaScript Programmability • Animation • Tools • Designer and Developer

  4. Building Applications With .NET web web desktop desktop media & RIA

  5. Microsoft Silverlight • is a • cross-browser,cross-platformplug-in • for delivering • the next generation of • media experiences • & • rich interactive applications (RIAs) • for theWeb

  6. Silverlight Overview • Enable richer interactive web experiences • Vector Graphics, Media, Animation • Integrate cleanly within existing sites • XML markup with AJAX JavaScript • Easily incorporated within HTML pages • Cross Browser and Cross Platform • Enabled via small, one-time, 1.1Mb download • IE, FireFox, Safari support on Windows and Macintosh systems (both Intel and PPC)

  7. A few core Silverlight scenarios • Media • Interactive Content Experiences • Rich Internet Applications

  8. Media Support • Built-in Audio and Video Codec Support • MP3 and WMA Audio • WMV video • Supports downloading media via standard HTTP requests (works with any web server) • Will also support broadcast/live streaming later this spring for webcasts, events, etc. • Supports 720 HD video, full screen projection, and best compression in industry

  9. Interactive Content Experiences • Powerful vector graphics engine • Device independent resolution scaling • Flexible animation system • Enable declarative animation of any element • Declarative markup approach enables great tool integration and designer/dev workflow • Easy AJAX scripting with JavaScript

  10. Rich Internet Applications • Future: not all features enabled in 1.1 SilverlightAlpha • Rich control encapsulation model • Databinding • Layout managers • Built-in common controls • .NET Framework programming model for these scenarios

  11. Media and Interactive Content Demo

  12. Silverlight Consumer Installation Experience

  13. V1.0 V1.1 Silverlight 1.0 and 1.1 Browser Host Deploy • Friction-Free Installer • Auto-Updater .NET forSilverlight • MS Ajax Library • DOM Integration Data Media WPF Extensible Controls Networking REST RSS SOAP POX JSON DLR Ruby Python BCL Generics Collections • Application Services XAML Presentation Core • Friction-Free Installer • Auto-Updater UI Core Vector Text Animation Images Inputs KeyboardMouse Input DRM Media Media VC-1 WMA MP3 Controls Layout Editing

  14. .NET for Silverlight & Desktop • .NET for Silverlight is a factored subset of the full .NET • Desktop ~ 50 MB (Windows Only) • Silverlight + .NET Alpha ~4MB (Cross platform) • Additional pieces of .NET available in a pay for play model • Same core development framework • The shared technologies and APIs are the same • The tools are the same • Highly compatible • Minimal changes needed to move from Silverlight to Desktop • However, not binary compatible by default

  15. The Sandbox • All apps run in Sandbox • Conceptually similar to the HTML DOM sandbox • Apps run just like HTML pages – just click a URL • No elevation prompts • No way to get out of the sandbox • Includes some additional functionality • Safe isolated storage • Client based file upload controls • Cross-domain support in-work Microsoft Confidential

  16. How to build sites that use Silverlight

  17. How does Silverlight Work? • Silverlight is a browser control within IE and plug-in within FireFox/Safari • Silverlight content can be hosted into any container element within an HTML document • HTML can be overlaid on top of Silverlight content, enabling easy page blending • Silverlight can be programmed using regular browser JavaScript • HTML and XAML DOM elements can be manipulated in the same block of code

  18. Silverlight Load Script <script type="text/javascript" src="js/aghost.js"></script> <div id="wpfeControl1Host" > <script type="text/javascript"> new agHost("wpfeControl1Host", // hostElementID "wpfeControl1", // ID of the WPF/E control "400", // Width "400", // Height "#00000000", // Background color null, // SourceElement "helloworld.xaml", // Source file "true", // IsWindowless "30", // MaxFrameRate null // OnError handler ); </script> </div>

  19. What does Silverlight Point to? • Silverlight load script today points to a .XAML text file to load the XAML content • Future option will allow multiple XAML files, images, and media assets to be packaged into a .zip file to optimize download

  20. XAML (rhymes with Camel) • XAML = eXtensible Application Markup Language • Flexible XML document schema • Examples: WPF, Silverlight, Workflow Foundation • Enables rich tooling support • While still preserving good readability and hand-coding within text editors

  21. XAML Sample • For example: <Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Black" /> <Ellipse Width="200" Height="150" Stroke="Orange" /> </Canvas>

  22. Demo

  23. Drawing with XAML • You can create rich graphics using XAML • Device independent vector graphics • Scale from low to extremely high DPI devices • XAML is made up of Tags • Represent a single item or container of the design • E.g. Rectangle, Ellipse, Canvas, Storyboard, etc. • Not all Tags are design elements – some can also define behavior (e.g. animations) and in the future will define customization (e.g. style and data-binding)

  24. Drawing with XAML (2) • Basic Vocabulary of Silverlight XAML Elements • Canvas • Brushes • Basic shapes • Rectange, Ellipse, Line, Polygon, etc. • TextBlock • Image

  25. The Canvas The Rectangle Canvas • Is a Drawing Surface • Children have relative positions: <Canvas Width="250" Height="200"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" /> </Canvas>

  26. Canvas (2) • Currently the parent of the every Silverlight XAML document: • Note xmlns= usage on root element to indicate document schema <Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Black" /> <Ellipse Width="200" Height="150" Stroke="Orange" /> </Canvas>

  27. Canvas (3) • Position relative to first Canvas parent: <Canvas Background="Light Gray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top=“50" Canvas.Left="50" Width="150" Height="100" Background="Red"> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="150" Height="75" Fill=“White" /> </Canvas> </Canvas>

  28. <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path /> Shapes

  29. Brushes • Determines how objects are painted • For painting objects (e.g. Fill) • For painting of lines (e.g. Stroke) • Brush options include: • Solid color brushes • Gradient brushes • Image brushes

  30. Brushes (2) • <SolidColorBrush /> • Support creation by name • 141 named colors supported (e.g. Blue, Red, Green) • Supports #FFFFFF or #FFFFFFFF syntax as well <Rectangle Width="200" Height="150" > <Rectangle.Fill> <SolidColorBrush Color="Black" /> </Rectangle.Fill> </Rectangle> <Rectangle Width="200" Height="150" Fill="Black" /> <Rectangle Width="200" Height="150" Fill="#FFFFFF" />

  31. Brushes (3) • <LinearGradientBrush /> • Start and Stop are to set angle as numbers • Gradient Stops are the different color points <Rectangle Width="200" Height="150"> <Rectangle.Fill> <LinearGradientBrushStartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

  32. Brushes (4) • <RadialGradientBrush /> • Gradient Stops are same syntax as Linear Gradient <Rectangle Width="200" Height="150" > <Rectangle.Fill> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

  33. Brushes (5) • <ImageBrush /> • Gradient Stops are same syntax as Linear Gradient <Ellipse Width="200" Height="75" > <Ellipse.Fill> <ImageBrush ImageSource="http://.../XBox360Logo.jpg" /> </Ellipse.Fill> </Ellipse>

  34. Using Text • <TextBlock /> <TextBlock>Hello</TextBlock> Hello <TextBlockFontSize="18">Hello</TextBlock> Hello <TextBlock FontFamily="Courier New">Hello</TextBlock> Hello <TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you? </TextBlock> Hello there, how are you? <TextBlock> Hello there,<LineBreak/>how are you? </TextBlock> Hello there, how are you?

  35. Using Images • <Image /> • Like ImageBrush • But can only place a rectangular image <Image Width="200" Source="http://.../XBox360Logo.jpg" />

  36. Transformations • Used to make changes to an object <Rectangle Width="200" Height="100" Fill=“Red"> <Rectangle.RenderTransform> <RotateTransformCenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform> </Rectangle>

  37. Transformations (2) • Power in Transforming Groups of Objects <Canvas> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" /> </Canvas>

  38. Transform Types <RotateTransform /> Rotation <ScaleTransform /> Resizes/Stretch <SkewTransform /> Skews <TranslateTransform /> Moves <MatrixTransform /> Scale, Skew and Translate Combined Transformations (3)

  39. Transformations (4) • <TransformGroup /> • Allows Grouping of Multiple Transforms <Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransformScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> </Canvas>

  40. Integrating Media • <MediaElement /> • Used to show media (music or video) • Control Video with Code • No Built-in Controls – You build the UI in XAML <Canvas xmlns="..." xmlns:x="..."> <MediaElement Source="xbox.wmv" /> </Canvas>

  41. Naming Objects in XAML • XAML objects can be named by adding a x:Name attribute to the element: • They can then be referenced by other XAML elements elsewhere in the file • Can then be programmed against via code <Canvas> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas>

  42. Access Silverlight via JavaScript • Use browser’s document.getElementById() to access the Silverlight control on a page: • Can also use ASP.NET AJAX $get() function: var control = document.getElementById("WpfeControl1"); var control = $get("WpfeControl1");

  43. Find XAML object via script • findName(name) method on Silverlight control <Canvas xmlns="..." xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas> varwpfeControl = document.getElementById("WpfeControl1"); vartheCircle = wpfeControl.findName("theCircle"); if (theCircle != null) theCircle.opacity = .5;

  44. Silverlight Events • Standard Events • Loaded • MouseMove • MouseEnter • MouseLeave • MouseLeftButtonDown • MouseLeftButtonUp • Use .NET / ASP.NET AJAX event pattern: • KeyUp • KeyDown • GotFocus • LostFocus function onMouseEnter(sender, eventargs) { sender.Fill = “Red”; }

  45. Silverlight Event Example <Canvas xmlns="..." xmlns:x="..."> <Ellipse MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> <Ellipse Canvas.Left="120“ MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> </Canvas> function onMouseEnter(sender) { sender.Fill = “Coral”; } function onMouseLeave(sender) { sender.Fill = “Teal”; }

  46. Code handling with JavaScript and XAML

  47. Animating with XAML • Silverlight provides a rich animation system • Animations can be defined in XAML • Animations can be triggered via Code

  48. Animating XAML Example <Canvas> <Canvas.Triggers> <EventTriggerRoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas>

  49. Triggers • <EventTrigger /> • Used to specify what starts an Animation • Properties are used to tie it to other Animation • RoutedEvent • The event that starts the triggers • Actions • A optional list of Storyboards to fire

  50. Storyboards • <Storyboard /> • Contains one or more Animations • Properties are used to share with all Animations • TargetName and TargetProperty • From, By and To • Duration • AutoReverse • RepeatBehavior

More Related