1 / 38

An Introduction to Silverlight

An Introduction to Silverlight. Matt Harrington Developer Evangelist, Microsoft bit.ly/ mattharrington , @mh415. October 20, 2011. Topics. The Metro design style Silverlight Components Creating a Silverlight Application Silverlight and XAML Introduction to Silverlight Layout

peyton
Download Presentation

An Introduction to Silverlight

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. An Introduction to Silverlight Matt Harrington Developer Evangelist, Microsoft bit.ly/mattharrington, @mh415 October 20, 2011

  2. Topics • The Metro design style • Silverlight Components • Creating a Silverlight Application • Silverlight and XAML • Introduction to Silverlight Layout • Components and Events • Silverlight Project Templates • ApplicationBar • Page Navigation 2

  3. Windows Phone and Metro • To make life easier for us the Metro style is “baked in” to the Windows developer tools • The default appearance, behaviour and fonts of the user elements all match the style • If you want to find out more about Metro on phone you can read the “User Experience Design Guidelines” http://msdn.microsoft.com/en-us/library/hh202915.aspx 4

  4. Tools for the job : Design • Great design separates the graphical design aspects from the programming • The designer works on the look and feel of the application • The programmer implements the required behaviours • Silverlight is designed to support this • A Silverlight designer can use the “Expression Blend” to specify the appearance of the user interface • A version of Blend for the phone is supplied as part of the phone SDK 5

  5. Metro Templates and Components • Visual Studio provides a set of Metro project templates • Each of them maps onto a particular style of application 6

  6. Application Types and Templates • The three application types provide quite different user experiences • Select the one that you feel is the most appropriate 7

  7. Silverlight display elements • Application title • Page title • First number • Plus text • Second number • Equals button • Result text 8

  8. Silverlight element class hierarchy • The Silverlight class hierarchy is quite complex • Everything is based on the FrameworkElement class which contains the fundamental properties of all elements • You can derive your own components if you wish 9

  9. Elements in AddingMachine • The adding machine actually contains three different types of Silverlight display element • TextBox • Used to receive user input from the keyboard • TextBlock • Used to display messages to the user • Button • Used to cause events in the application 10

  10. Elements and XAML <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . . </Grid> • XAML is the markup language that describes the Silverlight UI components 11

  11. Grid container element <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . . </Grid> • Grid is a container into which you can position display elements 12

  12. TextBox element <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . . </Grid> • TextBox is used for text entry • TextBlock can be used for text display 13

  13. Button element <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . . </Grid> • Button is used for user actions and generates events when activated 14

  14. Button element <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . . </Grid> • Click is the button clicked event which is bound to the method specified 15

  15. Button click event handler privatevoidequalsButton_Click(object sender, RoutedEventArgs e) { float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text); float result = v1 + v2; resultTextBlock.Text = result.ToString(); } • The event hander for the button takes the values out of the textboxes, parses them and then calculates and displays the result 16

  16. Demo 1: The Silverlight Adding Machine

  17. Best Practice: Keyboard use • It is best if the user can still press the equals button when the keyboard is displayed • This means the equals button should be moved up the screen 18

  18. Selecting Orientations SupportedOrientations="Portrait" • A XAML property for the phone application page lets you select the orientation options available • Your application can bind to an event which is fired when the orientation changes SupportedOrientations="PortraitOrLandscape" 19

  19. Using a StackPanel <Grid x:Name="ContentPanel"Grid.Row="1" Margin="12,0,12,0"> <StackPanel> <TextBox Height="72"HorizontalAlignment="Center".../> <TextBlock Height="56"HorizontalAlignment="Center".../> <TextBox Height="72"HorizontalAlignment="Center" .../> <Button Content="equals" Height="72"...> <TextBlock Height="46"HorizontalAlignment="Center".../> </StackPanel> </Grid> • To automatically handle orientation change we can use a StackPanel container that will stack the display components 20

  20. Demo 2: Orientation Handling

  21. Handling errors try { v1 = float.Parse(firstNumberTextBox.Text); v2 = float.Parse(secondNumberTextBox.Text); } catch { MessageBox.Show("Invalid number"); return; } • A program can catch errors as on the desktop • There is also a MessageBox mechanism as well 22

  22. Configuring the input scope <TextBoxInputScope="Number"... • If all you want from the user is a number it is dangerous to allow them to enter text as well • You can add to the XAML to specify that the keyboard only accepts numbers 23

  23. Demo 3: Complete Adding Machine

  24. ApplicationBar

  25. Application ChromeSystem Tray and Application Bar • System Tray • System owned indicator area that displays system-level status information • Apps can show/hide • SystemTray.IsVisible = false; • Application Bar • Area where applications can display buttons for the most common tasks • Can display pop-up menu for less common tasks 26

  26. Application Bar Use the ApplicationBar instead of creating your own menu system • Up to 4 buttons plus optional menu • Hit ellipsis to bring up the menu Don’t fill all 4 slots if not needed • Use white foreground on transparent background for icons • System will colorize button according to users selected theme 27

  27. Application Bar in Xaml <phone:PhoneApplicationPage x:Class=“MyApp.MainPage” … > <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar x:Name="AppBar" IsMenuEnabled="True"> <shell:ApplicationBar.Buttons> <shell:ApplicationBarIconButton x:Name="NewContactButton" IconUri="Images/appbar.new.rest.png" Text="New" Click="NewContactButton_Click"/> <shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="Images/appbar.feature.search.rest.png" Text="Find" Click="SearchButton_Click"/> </shell:ApplicationBar.Buttons> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="GenerateMenuItem" Text="Generate Data" Click="GenerateMenuItem_Click" /> <shell:ApplicationBarMenuItem x:Name="ClearMenuItem" Text="Clear Data" Click="ClearMenuItem_Click" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> 28

  28. App Bar & Landscape ApplicationBar paints on side of screen in landscape Has built-in animation when page switches orientation 29

  29. Page Navigation

  30. Frame and Page • Frame • Top-level container control • PhoneApplicationFrame class • Contains the page control and system elements such as system tray and application bar • Page • Fills the entire content region of the frame • PhoneApplicationPage-derived class • Contains a title • Optionally surfaces its own application bar 31

  31. Page Navigation • Silverlight uses a Page-based navigation model • Similar to web page model • Each page identified by a URI • Each page is essentially stateless private void hyperlinkButton1_Click( object sender, RoutedEventArgs e) { NavigationService.Navigate( new Uri("/SecondPage.xaml", UriKind.RelativeOrAbsolute) ); } 32

  32. Navigating Back • Application can provide controls to navigate back to preceding page • The hardware Back key will also navigate back to preceding page • No code required – built-in behaviour private void button1_Click( object sender, RoutedEventArgs e) { NavigationService.GoBack(); } 33

  33. ApplicationBar, Page Navigation and Pivot Control

  34. Review • Windows Phone applications use Silverlight to express the design of their user interface • The design is expressed in a XAML text file that identifies and configures display elements • Elements can also be manipulated as code objects • There are a set of Silverlight templates for applications and elements based on the Metro design • You can create multiple Silverlight pages and add them to your project • Navigation to pages is performed on the basis of a URI (Uniform Resource Indicator) values • The back button navigates back to the source page • The URI can contain a query string • Pages can share larger objects in the App.xaml page 35

  35. Bonus (and really good to know)

  36. Silverlight Toolkit for Windows Phone • A product of the Microsoft Silverlight team • The Silverlight Toolkit adds tons of additional controls ‘out of band’ from the official product control set • Includes full open source code, samples, documentation, and design-time support for controls • Refreshed ~3 months • Bug fixes • New controls • silverlight.codeplex.com 37

  37. NuGet • Package management system for .NET • Simplifies incorporating 3rd party libraries • Developer focused • Free, open source • Install using the Visual Studio Extension Manager • Use NuGet to add libraries such as the Silverlight Toolkit to your project 38

More Related