Building Silverlight 2 Applications (Parts 1 and 2) Scott Guthrie scottgu@microsoft.com http://weblogs.asp.net/scottgu
What You'll Need: Install the following: Silverlight Tools for Visual Studio 2008 Beta 2 Expression Blend 2.5 June Preview Everything you need is at www.silverlight.net Links to downloads & docs VS object browser a great way to view APIs
demo Building Hello World
Loading a Silverlight Application…
Test.htm <html> <body> <object data="data:application/x-silverlight," type="application/x-silverlight-2-b1"> <param name="source“ value="ClientBin/SilverlightApplication1.xap"/> <a href="http://go.microsoft.com/fwlink/?LinkID=108182"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" /> </a> </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe> </body> </html>
Running Application…
XAML, Shapes and Controls
XAML XAML = eXtensible Application Markup Language Flexible XML document schema Example usages: WPF, Silverlight, Workflow Foundation Enables rich tooling support While still preserving readability & hand-coding with text editors
Hello world XAML Sample <Grid> <TextBlock FontSize="32" Text="Hello world" /> </Grid> Hello world
Markup = Object Model <TextBlock FontSize="32" Text="Hello world" /> = TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world"; Anything that can be expressed in XAML can be programmatically coded as well
<TextBlock /> Hello Hello there, how are you? Hello Hello there, <TextBlock>Hello</TextBlock> Hello <TextBlock FontSize="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? Hello there, how are you? <TextBlock> Hello there,<LineBreak/>how are you? </TextBlock>
Shapes and Vector Graphics <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />
Controls Re-usable UI elements that encapsulate UI and behavior and enable re-use and composition <Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” /> Button b = new Button(); b.Width = 150; b.Height = 50; b.Content = “Push Me";
Silverlight Controls Form Controls: Navigation Controls: TextBox PasswordBox Button Toggle/Repeat Button CheckBox RadioButton ComboBox ListBox Navigation Controls: HyperlinkButton Popup Core Controls: Border Image MediaElement MultiScaleImage ToolTip ScrollViewer ProgressBar Layout Controls: StackPanel Grid / GridSplitter Canvas High-Level Controls: Calendar DataGrid Slider TabControl DateTimePicker Shapes: Ellipse Rectangle Line TextBlock Path
x:Name Name your controls so you can use it in code Visual Studio automatically declares field for all x:name elements <Button x:Name=“MyButton”/> public void Page_Loaded(sender, MouseEventArgs e) { MyButton.Content = “Push Me!”; }
Wiring Up Event Handlers Event handlers can be wired up declaratively in XAML: Or explictly within the code-behind file VB – using the "Handles" keyword C# -- programmatically within the Page_Loaded event handler <Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/> public void MyButton_Click(object sender, RoutedEventArgs e) { // todo: add code }
demo Controls
Layout
Layout Silverlight and WPF support concept of Layout Panels Canvas StackPanel Grid Layout system is customizable WrapPanel, DockPanel, TilePanel, RadialPanel, Etc.
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> The Canvas The Rectangle
Attached Property Syntax <Canvas> <Rectangle Canvas.Top="25"/> </Canvas> Top property only make sense inside a Canvas When we add new container panels, do we have to add new properties to Rectangle? Solution: Use attached properties to add flexible, container specific customization
Attached Properties (2) <Rectangle Canvas.Top="25" Canvas.Left="25"/> = Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25);
StackPanel <StackPanel Orientation="Vertical"> <Button>Button 1</Button> <Button>Button 2</Button> </StackPanel>
Grid Panel <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="75"/> <RowDefinition Height="*"/> <RowDefinition Height="85"/> </Grid.RowDefinitions> <Button Grid.Column="1" Grid.Row="1" Content=“Button 1" Margin="8,8,8,8"/> <Button Grid.Column="1" Grid.Row="2" Content=“Button 2" Margin="8,8,8,8"/> </Grid>
Tip: Dynamic Flow Layout Remove the top "Width" and "Height" attributes on your parent control in order to have Silverlight fill the entire HTML region your page provides it
demo Layout
Brushes
Brushes Determines how objects are painted Brush options include: For painting objects (e.g. Fill) For painting of lines (e.g. Stroke) Brush options include: Solid color brushes Gradient brushes Image brushes Video brushes
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" />
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> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color=“Blue" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
demo Brushes
Transformations All elements support them Transform Types <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> Moves <MatrixTransform /> Scale, Skew and Translate Combined
Transformations (2) Hello World <TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock> Hello World
demo Transforms
Networking
Rich Networking Options Available HTTP WCF/SOAP REST RSS Sockets ADO.NET Data Services (aka "Astoria") Cross Domain Networking Support
demo Networking
Databinding
Databinding Enable clean view/model separation and binding Change UI presentation wtihout code-behind modifications Works with any object that implements IEnumerable Arrays, Lists, Collections, etc. Binding Expressions can be one way or two way INotifyPropertyChange change notifications supported
demo Databinding
User Controls Enable easy encapsulation and re-use of functionality Can be declaratively specified or procedurally created Can expose custom events and properties
demo User Controls
Styles
Styles Allow look and feel of a control to be defined externally Conceptually similar to Stylesheets with HTML Support encapsulating style properties and control templates Control templates particularly powerful (will see soon) Can be defined either within UI XAML files or App.xaml App.xaml allows use across all files in application
Styles
Styles
Styles
Control Templates
Control Templates Allow the visual tree of a control to be completely replaced and/or customized however you want Override not only the look and style – but also the feel Interaction behaviors, animations, etc. Enable clean designer/developer workflow
demo Content Templates
Visual State Manager Enables control to expose states and transitions to customize Eg: Pressed, Disabled, Focused, etc. Integrated designer support within Expression Blend to enable this
demo Content Templates
HTML Integration
Access the HTML DOM from Managed HTML access availble in new namespace using System.Windows.Browser; Static HtmlPage class provides entry point HtmlPage.Window.Navigate("http://www.microsoft.com"); String server = HtmlPage.Document.DocumentUri.Host; Hookup events, call methods, or access properties HtmlElement myButton = HtmlPage.Document.GetElementById("myButtonID"); myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked)); private void myButtonClicked(object sender, EventArgs e) { ... }
HTML Integration Scripting Integration: Allow JavaScript on the HTML page to call into Silverlight Allow Silverlight code to call JavaScript methods on HTML page Other interesting HTML integration scenarios: Persisent links Fwd/Back Integration
Open File Dialog Support
OpenFileDialog Silverlight supports ability to prompt for local files Developers can then work with file contents locally without having to first upload them to the server OpenFileDialog openFileDlg = new OpenFileDialog(); openFileDlg.EnableMultipleSelection = false; openFileDlg.Filter = "Text files (*.txt;*.xml)|*.txt;*.xml"; openFileDlg.Title = "Select an image to upload"; if (openFileDlg.ShowDialog() == DialogResult.OK) { // Do something with the file or files }
OpenFileDialog Security Constraints Silverlight does not allow developer to control or access the origional file path on the local machine Silverlight does not allow direct file access without first going through the OpenFileDialog
Isolated Storage Stream based access to a private file/directory structure Patterned after .NET Framework IsolatedStorage classes Read and write string or binary data Flexible user policy storage options
Summary Silverlight provides an incredibly powerful RIA platform Easy to deploy applications Easy to create great looking applications Easy to create fast and responsive applications All enabled cross platform and cross browser Silverlight enables a common programming model across browsers, mobile devices, and the desktop Silverlight 2 and associated tools will ship later this year
© 2007 Microsoft Corporation. All rights reserved © 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.