Introduction to Silverlight for Windows Phone
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to Silverlight for Windows Phone

on

  • 1,742 views

From the Windows Phone Boot Camp Series - Fall 2011

From the Windows Phone Boot Camp Series - Fall 2011

Statistics

Views

Total Views
1,742
Views on SlideShare
1,738
Embed Views
4

Actions

Likes
0
Downloads
26
Comments
0

2 Embeds 4

http://paper.li 3
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Silverlight for Windows Phone Presentation Transcript

  • 1. An Introduction toSilverlightDave Bostdave.bost@microsoft.comhttp://davebost.com | @davebost
  • 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. Windows Phone
  • 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. 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. 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. 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. Silverlight display elements Application title Page title First number Plus text Second number Equals button Result text8 Windows Phone 8
  • 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. 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. 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. 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. 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. 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. 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. 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. DemoDemo 1: TheSilverlightAdding Machine 17
  • 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. 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. 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. DemoDemo 2: Orientation Handling 21
  • 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. 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. DemoDemo 3: CompleteAddingMachine 24
  • 25. ApplicationBar
  • 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. Application Bar27
  • 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. App Bar & Landscape2 Windows Phone9
  • 30. Page Navigation
  • 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. 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. 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. DemoApplicationBar, Page Navigation andPivot Control 34
  • 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. Bonus (and really good to know)
  • 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. 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. Q&A