Download presentation
Presentation is loading. Please wait.
1
Building Silverlight 2 Applications (Parts 1 and 2)
Scott Guthrie
2
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 Links to downloads & docs VS object browser a great way to view APIs
3
demo Building Hello World
4
Loading a Silverlight Application…
5
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=" <img src=" /> </a> </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe> </body> </html>
6
Running Application…
7
XAML, Shapes and Controls
8
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
9
Hello world XAML Sample <Grid>
<TextBlock FontSize="32" Text="Hello world" /> </Grid> Hello world
10
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
11
<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>
12
Shapes and Vector Graphics
<Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />
13
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";
14
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
15
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!”; }
16
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 }
17
demo Controls
18
Layout
19
Layout Silverlight and WPF support concept of Layout Panels
Canvas StackPanel Grid Layout system is customizable WrapPanel, DockPanel, TilePanel, RadialPanel, Etc.
20
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
21
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
22
Attached Properties (2)
<Rectangle Canvas.Top="25" Canvas.Left="25"/> = Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25);
23
StackPanel <StackPanel Orientation="Vertical">
<Button>Button 1</Button> <Button>Button 2</Button> </StackPanel>
24
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>
25
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
26
demo Layout
27
Brushes
28
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
29
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" />
30
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>
31
demo Brushes
32
Transformations All elements support them Transform Types
<RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> Moves <MatrixTransform /> Scale, Skew and Translate Combined
33
Transformations (2) Hello World <TextBlock Text="Hello World">
<TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock> Hello World
34
demo Transforms
35
Networking
36
Rich Networking Options Available
HTTP WCF/SOAP REST RSS Sockets ADO.NET Data Services (aka "Astoria") Cross Domain Networking Support
37
demo Networking
38
Databinding
39
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
40
demo Databinding
41
User Controls Enable easy encapsulation and re-use of functionality
Can be declaratively specified or procedurally created Can expose custom events and properties
42
demo User Controls
43
Styles
44
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
45
Styles
46
Styles
47
Styles
48
Control Templates
49
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
50
demo Content Templates
51
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
52
demo Content Templates
53
HTML Integration
54
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(" 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) { ... }
55
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
56
Open File Dialog Support
57
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 }
58
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
59
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
60
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
61
© 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.
Similar presentations
