1 / 61

Building Silverlight 2 Applications (Parts 1 and 2)

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

keelty
Download Presentation

Building Silverlight 2 Applications (Parts 1 and 2)

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. Building Silverlight 2 Applications(Parts 1 and 2) Scott Guthrie scottgu@microsoft.com http://weblogs.asp.net/scottgu

  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 www.silverlight.net • 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="http://go.microsoft.com/fwlink/?LinkID=108182"> <imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181" /> </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. XAML Sample <Grid> <TextBlockFontSize="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 /> <TextBlock>Hello</TextBlock> Hello <TextBlockFontSize="18">Hello</TextBlock> Hello <TextBlock FontFamily="Courier New">Hello</TextBlock> Hello Hello there, how are you? <TextBlockTextWrapping="Wrap" Width="100"> Hello there, how are you? </TextBlock> Hello there, how are you? <TextBlock> Hello there,<LineBreak/>how are you? </TextBlock>

  12. <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path /> Shapes and Vector Graphics

  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 • 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 • Form Controls: • TextBox • PasswordBox • Button • Toggle/Repeat Button • CheckBox • RadioButton • ComboBox • ListBox • Navigation Controls: • HyperlinkButton • Popup

  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, RoutedEventArgse) { // 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. 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>

  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 • 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> <LinearGradientBrushStartPoint="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. All elements support them Transform Types <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> Moves <MatrixTransform /> Scale, Skew and Translate Combined Transformations

  33. Transformations (2) <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

More Related