An Introduction toSilverlightDave Bostdave.bost@microsoft.comhttp://davebost.com | @davebost
Topics   The Metro design style   Silverlight Components   Creating a Silverlight Application   Silverlight and XAML ...
Windows Phone
Windows Phone and Metro To make life easier for us the Metro  style is “baked in” to the Windows  developer tools The de...
Tools for the job : GraphicalDesign separates the Great design  graphical design aspects from  the programming       The...
Metro Templates andComponents Visual Studio  provides a set  of Metro  project  templates Each of them  maps onto a  par...
Application Types and Templates The three application types provide quite different user experiences Select the one that...
Silverlight display elements   Application title   Page title   First number   Plus text   Second number   Equals bu...
Silverlight element class hierarchy                                                         FrameworkElement The Silverli...
Elements in AddingMachine The adding machine actually contains three different types of Silverlight  display element Tex...
Elements and XAML    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <TextBox Height="72" HorizontalAl...
Grid container element    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <TextBox Height="72" Horizon...
TextBox element    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <TextBox Height="72" HorizontalAlig...
Button element    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <TextBox Height="72" HorizontalAlign...
Button element    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <TextBox Height="72" HorizontalAlign...
Button click event handler    private void equalsButton_Click(object sender, RoutedEventArgs e)    {        float v1 = flo...
DemoDemo 1: TheSilverlightAdding Machine                 17
Best Practice: Keyboard use It is best if the user can still press  the equals button when the  keyboard is displayed Th...
Selecting Orientations    SupportedOrientations="Portrait"    SupportedOrientations="PortraitOrLandscape"     A XAML prop...
Using a StackPanel    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">       <StackPanel>          <TextBox He...
DemoDemo 2: Orientation Handling                               21
Handling errors    try    {      v1 = float.Parse(firstNumberTextBox.Text);      v2 = float.Parse(secondNumberTextBox.Text...
Configuring the input scope    <TextBox InputScope="Number" ... If all you want from the user is a number it is  dangerou...
DemoDemo 3: CompleteAddingMachine                   24
ApplicationBar
Application ChromeSystem Tray and Application Bar System Tray     System owned indicator area that      displays system-...
Application Bar27
Application Bar in Xaml<phone:PhoneApplicationPage  x:Class=“MyApp.MainPage”  … >    <phone:PhoneApplicationPage.Applicati...
App Bar & Landscape2   Windows Phone9
Page Navigation
Frame and Page Frame     Top-level container control     PhoneApplicationFrame class     Contains the page control and...
Page Navigation    Silverlight on Windows Phone uses     a Page-based navigation model          Similar to web page mode...
Navigating Back   Application can provide controls to    navigate    back to preceding page    private void button1_Click...
DemoApplicationBar, Page Navigation andPivot Control                                      34
Review   Windows Phone applications use Silverlight to express the design of    their user interface         The design ...
Bonus  (and really good to know)
Silverlight Toolkit for WindowsPhone the Microsoft Silverlight teamA product of The Silverlight Toolkit adds tons of add...
NuGet Package management system for .NET Simplifies incorporating 3rd party libraries Developer focused Free, open sou...
Q&A
Upcoming SlideShare
Loading in...5
×

Introduction to Silverlight for Windows Phone

1,237

Published on

From the Windows Phone Boot Camp Series - Fall 2011

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,237
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Silverlight for Windows Phone

  1. 1. An Introduction toSilverlightDave Bostdave.bost@microsoft.comhttp://davebost.com | @davebost
  2. 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 Navigation2 Windows Phone
  3. 3. Windows Phone
  4. 4. 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.com4 Windows Phone
  5. 5. Tools for the job : GraphicalDesign separates the Great design 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 user5 interface Windows Phone 5
  6. 6. Metro Templates andComponents Visual Studio provides a set of Metro project templates Each of them maps onto a particular style of application6 Windows Phone 6
  7. 7. Application Types and Templates The three application types provide quite different user experiences Select the one that you feel is the most appropriate7 Windows Phone 7
  8. 8. Silverlight display elements Application title Page title First number Plus text Second number Equals button Result text8 Windows Phone 8
  9. 9. Silverlight element class hierarchy FrameworkElement The Silverlight class hierarchy is quite complex TextBlock Control Everything is based on the FrameworkElement class which contains the fundamental properties TextBox ContentControl of all elements You can derive your own components if you wish ButtonBase Button9 Windows Phone 9
  10. 10. 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 application1 Windows Phone 100
  11. 11. 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 components1 Windows Phone 111
  12. 12. 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 elements1 Windows Phone 122
  13. 13. 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 display1 Windows Phone 133
  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> Button is used for user actions and generates events when activated1 Windows Phone 144
  15. 15. 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 specified1 Windows Phone 155
  16. 16. Button click event handler private void equalsButton_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 result1 Windows Phone 166
  17. 17. DemoDemo 1: TheSilverlightAdding Machine 17
  18. 18. 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 screen1 Windows Phone 188
  19. 19. Selecting Orientations SupportedOrientations="Portrait" SupportedOrientations="PortraitOrLandscape"  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 changes1 Windows Phone 199
  20. 20. 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 components2 Windows Phone 200
  21. 21. DemoDemo 2: Orientation Handling 21
  22. 22. 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 well2 Windows Phone 222
  23. 23. Configuring the input scope <TextBox InputScope="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 numbers2 Windows Phone 233
  24. 24. DemoDemo 3: CompleteAddingMachine 24
  25. 25. ApplicationBar
  26. 26. Application ChromeSystem Tray and Application Bar System Tray  System owned indicator area that displays system-level status information  Apps can show/hide  Microsoft.Phone.Shell.SystemTray.IsVisib le = false; Application Bar  Area where applications can display buttons for the most common tasks  Can display pop-up menu for less common tasks2 Windows Phone 266
  27. 27. Application Bar27
  28. 28. 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>2 Windows Phone 288
  29. 29. App Bar & Landscape2 Windows Phone9
  30. 30. Page Navigation
  31. 31. 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 bar3 Windows Phone1
  32. 32. Page Navigation Silverlight on Windows Phone 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) ); }3 Windows Phone2
  33. 33. Navigating Back Application can provide controls to navigate back to preceding page private void button1_Click( object sender, RoutedEventArgs e) { NavigationService.GoBack(); } The hardware Back key will also navigate back to preceding page  No code required – built-in behaviour3 Windows Phone3
  34. 34. DemoApplicationBar, Page Navigation andPivot Control 34
  35. 35. 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 uri (Uniform Resource Indicator) values The back button normally navigates back to the source page, but this can be overridden3 The uri can contain simple text messages Windows Phone 355 Pages can share larger objects in the App.xaml page
  36. 36. Bonus (and really good to know)
  37. 37. Silverlight Toolkit for WindowsPhone the Microsoft Silverlight teamA product of 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 Refresh every 3 months or so  Bug fixes  New controls http://silverlight.codeplex.com37
  38. 38. NuGet Package management system for .NET Simplifies incorporating 3rd party libraries Developer focused Free, open source Install NuGet using the Visual Studio Extension Manager Use NuGet to add libraries such as the Silverlight Toolkit to your project3 Windows Phone8
  39. 39. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×