Scott Guthrie [email protected] .

Building Silverlight 2 Applications(Parts 1 and 2)Scott [email protected]://weblogs.asp.net/scottgu

mailto:[email protected]

http://weblogs.asp.net/scottgu

What You'll Need:Install the following:

Silverlight Tools for Visual Studio 2008 Beta 2Expression Blend 2.5 June Preview

Everything you need is at www.silverlight.net Links to downloads & docsVS object browser a great way to view APIs

http://www.silverlight.net/

Building Hello World

demo

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>

<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 schemaExample usages: WPF, Silverlight, Workflow Foundation

Enables rich tooling supportWhile still preserving readability & hand-coding with text editors

XAML Sample

<Grid>

<TextBlock FontSize="32" Text="Hello world" />

</Grid>

<Grid>

<TextBlock FontSize="32" Text="Hello world" />

</Grid>

Hello world

Markup = Object Model

<TextBlock FontSize="32" Text="Hello world" /><TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock();t.FontSize = 32;t.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 />

<TextBlock>Hello</TextBlock><TextBlock>Hello</TextBlock> Hello

<TextBlock FontSize="18">Hello</TextBlock><TextBlock FontSize="18">Hello</TextBlock> Hello

<TextBlock FontFamily="Courier New">Hello</TextBlock><TextBlock FontFamily="Courier New">Hello</TextBlock> Hello

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

Hello there, how are you?

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

Hello there, how are you?

Shapes and Vector Graphics

<Rectangle />

<Ellipse />

<Line />

<Polygon />

<PolyLine />

<Path />

ControlsRe-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 x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />

Button b = new Button();b.Width = 150;b.Height = 50;b.Content = “Push Me";

Button b = new Button();b.Width = 150;b.Height = 50;b.Content = “Push Me";

Silverlight ControlsForm 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:NameName your controls so you can use it in code

Visual Studio automatically declares field for all x:name elements

<Button x:Name=“MyButton”/><Button x:Name=“MyButton”/>

public void Page_Loaded(sender, MouseEventArgs e) { MyButton.Content = “Push Me!”;}

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 fileVB – using the "Handles" keywordC# -- programmatically within the Page_Loaded event handler

<Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/><Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/>

public void MyButton_Click(object sender, RoutedEventArgs e) { // todo: add code}

public void MyButton_Click(object sender, RoutedEventArgs e) { // todo: add code}

Controls

demo

Layout

Layout

Silverlight and WPF support concept of Layout Panels

CanvasStackPanelGrid

Layout system is customizableWrapPanel, DockPanel, TilePanel, RadialPanel, Etc.

CanvasIs a Drawing SurfaceChildren have relative positions:<Canvas Width="250" Height="200">

<Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" />

</Canvas>

<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 Canvas.Top="25" Canvas.Left="25"/>

Rectangle rectangle = new Rectangle();rectangle.SetValue(Canvas.TopProperty, 25);rectangle.SetValue(Canvas.LeftProperty, 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>

<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>

<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 LayoutRemove the top "Width" and "Height" attributes on your parent control in order to have Silverlight fill the entire HTML region your page provides it

Layout

demo

Brushes

Brushes

Determines how objects are paintedFor painting objects (e.g. Fill)For painting of lines (e.g. Stroke)

Brush options include:Solid color brushes Gradient brushesImage brushesVideo 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" > <Rectangle.Fill> <SolidColorBrush Color="Black" /> </Rectangle.Fill></Rectangle>

<Rectangle Width="200" Height="150" Fill="Black" /><Rectangle Width="200" Height="150" Fill="Black" />

<Rectangle Width="200" Height="150" Fill="#FFFFFF" /><Rectangle Width="200" Height="150" Fill="#FFFFFF" />

Brushes (3)<LinearGradientBrush />

Start and Stop are to set angle as numbersGradient 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>

<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>

Brushes

demo

Transformations

All elements support themTransform Types

<RotateTransform /><ScaleTransform /><SkewTransform /><TranslateTransform />

Moves

<MatrixTransform />Scale, Skew and Translate Combined

Transformations (2)

<TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform></TextBlock>

<TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform></TextBlock>

Hello World

Hello World

Transforms

demo

Networking

Rich Networking Options Available

HTTPWCF/SOAPRESTRSSSocketsADO.NET Data Services (aka "Astoria")

Cross Domain Networking Support

Networking

demo

Databinding

DatabindingEnable 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

Databinding

demo

User Controls

Enable easy encapsulation and re-use of functionality

Can be declaratively specified or procedurally created

Can expose custom events and properties

User Controls

demo

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

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

Content Templates

demo

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

Content Templates

demo

HTML Integration

Access the HTML DOM from ManagedHTML access availble in new namespace

HtmlPage.Window.Navigate("http://www.microsoft.com");String server = HtmlPage.Document.DocumentUri.Host;HtmlPage.Window.Navigate("http://www.microsoft.com");String server = HtmlPage.Document.DocumentUri.Host;

using System.Windows.Browser;using System.Windows.Browser;

HtmlElement myButton = HtmlPage.Document.GetElementById("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

HtmlElement myButton = HtmlPage.Document.GetElementById("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

Static HtmlPage class provides entry point

Hookup events, call methods, or access properties

HTML Integration

Scripting Integration:Allow JavaScript on the HTML page to call into SilverlightAllow Silverlight code to call JavaScript methods on HTML page

Other interesting HTML integration scenarios:Persisent linksFwd/Back Integration

Open File Dialog Support

OpenFileDialogSilverlight 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 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 structurePatterned after .NET Framework IsolatedStorage classesRead and write string or binary dataFlexible user policy storage options

Summary

Silverlight provides an incredibly powerful RIA platform

Easy to deploy applicationsEasy to create great looking applicationsEasy to create fast and responsive applicationsAll 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. 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.

Scott Guthrie [email protected] .

Documents

Transcript of Scott Guthrie [email protected] .