Post on 22-Dec-2015
Building Silverlight 2 Applications(Parts 1 and 2)Scott Guthriescottgu@microsoft.comhttp://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
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
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
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.