Oliver Scheer
Senior Technical Evangelist
Microsoft Deutschland
http://the-oliver.com
Building Windows Phone
Applications
Agenda
Designing Windows Phone Applications
This module
follows on from the
previous, in which
we go through the
essential...
Page Navigation
• Frame
• Top-level container control
• PhoneApplicationFrame class
• Contains the page control and system
elements such a...
Page Navigation
•XAML apps on Windows Phone use a
page-based navigation model
• Similar to web page model
• Each page iden...
Navigating Back
• Application can provide controls to navigate back
to preceding page
• The hardware Back key will also na...
Overriding Back Key
• May need to override Back hardware key if ‘back to previous page’ is not logical behaviour
• For exa...
Overriding the Back Key
8
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
…
shell:SystemTray.IsVisible="True"
Bac...
Passing Data Between Pages
• Can pass string data between pages using query strings
• On destination page
private void pas...
Passing Objects Between Pages
• Often, you will pass a data object from one page to another
• E.g., user selects an item i...
Handling Non Linear Navigation
• Design your app navigation strategy carefully!
• If you navigate from ‘third page’ to ‘ma...
NavigationService.RemoveBackEntry()
• When ‘Third Page’ navigates back to MainPage, put a marker in the query string
• In ...
Demo 1: Page
Navigation
13
ApplicationBar
Application Chrome System Tray
and Application Bar
Don’t fill all 4 slots if not needed
Use the ApplicationBar instead of creating
your own menu system
Up to 4 buttons plus ...
ApplicationBar in Xaml
17
<phone:PhoneApplicationPage
x:Class="CRMapp.MainPage“
…>
<phone:PhoneApplicationPage.Application...
ApplicationBar and Landscape
ApplicationBarpaints on side of
screen in landscape
Has built-in animation when
page switches...
If Application Bar opacity is less than 1, displayed
page will be the size of the screen Application Bar
overlays screen c...
ApplicationBar Design in Blend – and now in VS Too!
Demo 2: Designing
an ApplicationBar
21
Handling Screen
Orientation Changes
Phone UI Design – Orientation
• This application does not work in landscape mode at the moment
• Not all applications do, ...
New Device Tab in Visual Studio 2012
• View Designer in Portrait or Landscape
3/17/201424
Selecting Orientations
• A XAML property for the phone application page lets you select the orientation options
available
...
Layout May Need Altering
3/17/201426
Layout unaltered
Layout optimised for
landscape
Using a Grid to Aid Landscape Layout
• In the Grid, the second column is unused in Portrait
27
<phone:PivotItem Header="re...
Move Elements in Landscape Layout
• In Landscape, the recipe description moves into the second row and the second column a...
Moving Elements
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (t...
Demo 4:
Orientation Handling
Supporting Multiple
Screen Resolutions
3 Screen Resolutions
WVGA
800 x 480
15:9
WXGA
1280 x 768
15:9
720p
1280 x 720
16:9
• Well, No…
• As developers, we work with device independent pixels
• OS applies a scale factor to the actual resolution
S...
Scaled Resolutions
WVGA WXGA 720p
800
800
853
480
480
480
• Set Grid Row Height to “Auto” to size
according to the controls placed within it
• Set Grid Row Height to “*” to take up...
Adaptive Layout Using Grid
3/17/2014Microsoft confidential36
WVGA 720p
Image height sized
explicitly at 240px
Bottom row i...
• In most cases, you should supply images targeting the WXGA (1280 x 768) screen
• WXGA assets are of the highest quality
...
• To add a splash screen to your project suitable for all resolutions, add a file as content
called SplashScreenImage.jpg ...
• You must supply app icon and tile images sized for WXGA
• The framework automatically scales to the correct size for WVG...
Demo 4: Screen
Resolutions
40
Introduction to
Localization
• Windows Phone 8 supports 50 display languages (shipped with the
phone depending on market and country/region) and select...
• Every new project you create in Visual Studio 2012 has a class
included called LocalizedStrings
• Simply provides progra...
• Databind the Text property of your
TextBlock and other controls to the
StaticResource with a key of
LocalizedStrings
• T...
• Double-click project properties to open the Properties editor
• On the Application tab
• Check each of the
languages you...
• Visual Studio adds a resource file for each additional language that the app will support.
Each resource file is named u...
• Double-click WMAppManifest.xml to open the manifest editor
• On the Packaging tab
• Set the Default Language
to the lang...
Demo 5:
Localization
The Windows Phone
Toolkit
Windows Phone Toolkit
• A product of the Microsoft Windows Phone team
• Formerly known as the ‘Silverlight Toolkit’
• The ...
How to Get the Windows Phone Toolkit
• http://phone.codeplex.com
• Get source code, including the
sample application
• No ...
NuGet
• Package management system for .NET
• Simplifies incorporating third-party libraries
• Developer focused
• Free, op...
Controls in the
Windows Phone
Toolkit
ContextMenu
DatePicker and TimePicker
55
ToggleSwitch
56
WrapPanel
57
ListPicker
• WP7 ComboBox
• Dropdown list for small number
of items
• Full screen selector for longer lists
…And Many More
• Custom MessageBox
• Rating control
• AutoCompleteBox
• ExpanderView
• HubTile
• …more…
• Download the sou...
Page Transitions
and TiltEffect
Page Transitions
• Easy way to add page transitions to your app similar to those in
the built-in apps
• Different transiti...
Enabling Transitions on a Page
• Declare namespace for Windows Phone Toolkit assembly
• Under <phone:PhoneApplicationPage>...
TiltEffect
• Add additional visual feedback for control interaction
• Instead of simple states such as Pressed or Unpresse...
Demo 6:
Page Transitions
and TiltEffect
64
Review
• Navigation to pages is performed on the basis of a URI (Uniform Resource Indicator) values
• The back button norm...
The information herein is for informational
purposes only an represents the current view of
Microsoft Corporation as of th...
Upcoming SlideShare
Loading in …5
×

Windows Phone 8 - 3 Building WP8 Applications

1,407 views

Published on

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,407
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Windows Phone 8 - 3 Building WP8 Applications

  1. 1. Oliver Scheer Senior Technical Evangelist Microsoft Deutschland http://the-oliver.com Building Windows Phone Applications
  2. 2. Agenda Designing Windows Phone Applications This module follows on from the previous, in which we go through the essential knowledge you need to build an application In this module: • Page navigation • Application Bar • Handling Page Orientation Changes • Handling Different Screen Resolutions • Localization • Windows Phone Toolkit • Page Transitions
  3. 3. Page Navigation
  4. 4. • Frame • Top-level container control • PhoneApplicationFrame class • Contains the page control and system elements such as system tray and application bar • Page • Fills entire content region of the frame • PhoneApplicationPage-derived class • Contains a title • Optionally surfaces its own application bar Frame and Page
  5. 5. Page Navigation •XAML apps on Windows Phone use a page-based navigation model • Similar to web page model • Each page identified by a URI • Each page is essentially stateless private void HyperlinkButton_Click_1( object sender, RoutedEventArgs e) { NavigationService.Navigate( new Uri("/SecondPage.xaml", UriKind.Relative)); }
  6. 6. 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 Button_Click_1( object sender, RoutedEventArgs e) { NavigationService.GoBack(); }
  7. 7. Overriding Back Key • May need to override Back hardware key if ‘back to previous page’ is not logical behaviour • For example, when displaying a popup panel • User would expect Back key to close the panel, not the page
  8. 8. Overriding the Back Key 8 <phone:PhoneApplicationPage x:Class="PhoneApp1.MainPage" … shell:SystemTray.IsVisible="True" BackKeyPress="PhoneApplicationPage_BackKeyPress"> In code: private void PhoneApplicationPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e) { e.Cancel = true; // Tell system we've handled it // Hide the popup... ... }
  9. 9. Passing Data Between Pages • Can pass string data between pages using query strings • On destination page private void passParam_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative)); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e); string querystringvalue = ""; if (NavigationContext.QueryString.TryGetValue("msg", out querystringvalue)) textBlock1.Text = querystringvalue; }
  10. 10. Passing Objects Between Pages • Often, you will pass a data object from one page to another • E.g., user selects an item in a list and navigates to a Details page • One solution is to store your ViewModel (that is, data) in your App class • Global to whole application • Pass the ID of the selected item in query string // Navigate to the new page NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + (MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));
  11. 11. Handling Non Linear Navigation • Design your app navigation strategy carefully! • If you navigate from ‘third page’ to ‘main page’ and your user then presses the Back key, what happens? • User expects app to exit • App actually navigates back to Third Page • Solution for Windows Phone 7.0 was complex code to handle back navigation correctly, or the Non-Linear Navigation Recipe library from AppHub • Windows Phone APIs: • NavigationService.RemoveBackEntry() 11
  12. 12. NavigationService.RemoveBackEntry() • When ‘Third Page’ navigates back to MainPage, put a marker in the query string • In OnNavigatedTo() in MainPage, look for the marker and if present, remove the ‘ Third Page’, ‘SecondPage’ and original instance of ‘MainPage’ from the navigation history stack 12 NavigationService.Navigate(new Uri("/MainPage.xaml?homeFromThird=true", UriKind.Relative)); protected override void OnNavigatedTo(NavigationEventArgs e) { if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New && NavigationContext.QueryString.ContainsKey("homeFromThird")) { NavigationService.RemoveBackEntry(); // Remove ThirdPage NavigationService.RemoveBackEntry(); // Remove SecondPage NavigationService.RemoveBackEntry(); // Remove original MainPage } base.OnNavigatedTo(e); }
  13. 13. Demo 1: Page Navigation 13
  14. 14. ApplicationBar
  15. 15. Application Chrome System Tray and Application Bar
  16. 16. Don’t fill all 4 slots if not needed Use the ApplicationBar instead of creating your own menu system Up to 4 buttons plus optional menu Swipe up the bar to bring up the menu Swipe up the bar to bring up the menu ApplicationBar
  17. 17. ApplicationBar in Xaml 17 <phone:PhoneApplicationPage x:Class="CRMapp.MainPage“ …> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar x:Name="AppBar" Opacity="1.0" 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> </phone:PhoneApplicationPage>
  18. 18. ApplicationBar and Landscape ApplicationBarpaints on side of screen in landscape Has built-in animation when page switches orientation
  19. 19. If Application Bar opacity is less than 1, displayed page will be the size of the screen Application Bar overlays screen content If Opacity is 1, displayed page is resized to the area of the screen not covered by the Application Bar ApplicationBar Opacity 19
  20. 20. ApplicationBar Design in Blend – and now in VS Too!
  21. 21. Demo 2: Designing an ApplicationBar 21
  22. 22. Handling Screen Orientation Changes
  23. 23. Phone UI Design – Orientation • This application does not work in landscape mode at the moment • Not all applications do, or need to • You can configure applications to support portrait or landscape 23
  24. 24. New Device Tab in Visual Studio 2012 • View Designer in Portrait or Landscape 3/17/201424
  25. 25. Selecting Orientations • 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 25 SupportedOrientations="Portrait" SupportedOrientations="PortraitOrLandscape"
  26. 26. Layout May Need Altering 3/17/201426 Layout unaltered Layout optimised for landscape
  27. 27. Using a Grid to Aid Landscape Layout • In the Grid, the second column is unused in Portrait 27 <phone:PivotItem Header="recipe"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> ... </Grid> Row 0 Row 1 Row 2 Row 3 Column 0
  28. 28. Move Elements in Landscape Layout • In Landscape, the recipe description moves into the second row and the second column and the third row of the grid is now unused. Since that row’s Height is “*”, it shrinks to zero. 28 <phone:PivotItem Header="recipe"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> ... </Grid> Row 0 Row 1 Row 2 Row 3 Column 0 Column 1
  29. 29. Moving Elements private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { if (this.Orientation == PageOrientation.LandscapeLeft || this.Orientation == PageOrientation.LandscapeRight) { DirectionsScrollViewer.SetValue(Grid.RowProperty, 1); DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1); } else { DirectionsScrollViewer.SetValue(Grid.RowProperty, 2); DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0); } } 3/17/201429
  30. 30. Demo 4: Orientation Handling
  31. 31. Supporting Multiple Screen Resolutions
  32. 32. 3 Screen Resolutions WVGA 800 x 480 15:9 WXGA 1280 x 768 15:9 720p 1280 x 720 16:9
  33. 33. • Well, No… • As developers, we work with device independent pixels • OS applies a scale factor to the actual resolution So I Have to Do Three Different UIs? 3/17/2014Microsoft confidential33 Resolution Aspect ratio Scale Factor Scaled resolution WVGA 800 x 480 15:9 1.0x scale 800 x 480 WXGA 1280 x 768 15:9 1.6x scale 800 x 480 720p 1280 x 720 16:9 1.5x scale, 80 pixels taller (53 pixels, before scaling) 853 x 480
  34. 34. Scaled Resolutions WVGA WXGA 720p 800 800 853 480 480 480
  35. 35. • Set Grid Row Height to “Auto” to size according to the controls placed within it • Set Grid Row Height to “*” to take up all the rest of the space • If you size multiple rows using “*”, available space is divided up evenly between them Use “Auto” and “*” on Grid Rows To Ensure Good Layout 3/17/2014Microsoft confidential35 <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> ... </Grid>
  36. 36. Adaptive Layout Using Grid 3/17/2014Microsoft confidential36 WVGA 720p Image height sized explicitly at 240px Bottom row is “Auto” so sized to hold a TextBlock Directions row is “*” so gets everything that’s left – ends up taller on 720p
  37. 37. • In most cases, you should supply images targeting the WXGA (1280 x 768) screen • WXGA assets are of the highest quality • Will automatically scale down on WVGA phones • Still look great on 720p (1280 x 720) • If you want, you can include images at each of the three resolutions in your project • E.g. MyImage.wvga.png, MyImage.wxga.png and MyImage.720p.png • At runtime, get Application.Current.Host.Content.ScaleFactor to determine the resolution of the screen on the current phone, returns 100 for WVGA, 160 for WXGA and 150 for 720p • Write code to load image at runtime appropriate for the current screen resolution Images 3/17/2014Microsoft confidential37
  38. 38. • To add a splash screen to your project suitable for all resolutions, add a file as content called SplashScreenImage.jpg at 768 x 1280 resolution • The framework automatically scales it to the correct size on different resolution screens • If you want to provide pixel-perfect splash screens for all resolutions, add images with the following names: • SplashScreenImage.Screen-WVGA.jpg • SplashScreenImage.Screen-WXGA.jpg • SplashScreenImage.Screen-720p.jpg • In addition to these images, you must still include the default SplashScreenImage.jpg file Splash Screens 3/17/2014Microsoft confidential38
  39. 39. • You must supply app icon and tile images sized for WXGA • The framework automatically scales to the correct size for WVGA and 720p App Icon and Tiles 3/17/2014Microsoft confidential39 Tile size WXGA Application Icon 100 × 100 Small 159 × 159 Medium 336 × 336 Large 691 × 336
  40. 40. Demo 4: Screen Resolutions 40
  41. 41. Introduction to Localization
  42. 42. • Windows Phone 8 supports 50 display languages (shipped with the phone depending on market and country/region) and selectable by the user on the language+region section of the Settings page • Windows Phone 7.1 supported only 24 • Windows Phone 8 allows you to build apps that read from right to left Windows Phone 8 Language Support 3/17/2014
  43. 43. • Every new project you create in Visual Studio 2012 has a class included called LocalizedStrings • Simply provides programmatic access to resources • An instance of this is create in App.xaml in the Application Resources with the key LocalizedStrings • Every new project also includes a resources file: ResourcesAppResources.resx • Some strings already defined in here • Create all your string literals in here to support localization • All new projects also included commented-out code in MainPage.xaml.cs to setup a localized Application Bar New Project Templates Have Localization Support Built In 3/17/2014
  44. 44. • Databind the Text property of your TextBlock and other controls to the StaticResource with a key of LocalizedStrings • That is an instance of the LocalizedStrings class • It provides access to string resources Accessing String Resources from XAML 3/17/2014Microsoft confidential44
  45. 45. • Double-click project properties to open the Properties editor • On the Application tab • Check each of the languages your app will support • Save the Project Properties • Visual Studio creates new AppResources files for each selected language/culture Add Support for Additional Languages 3/17/2014Microsoft confidential45
  46. 46. • Visual Studio adds a resource file for each additional language that the app will support. Each resource file is named using the correct culture/language name, as described in Culture and language support for Windows Phone in the documentation • For example: • For the culture Spanish (Spain), file is AppResources.es-ES.resx. • For the culture German (Germany), file is AppResources.de-DE.resx. • Supply appropriate translations in each resource file Translate the Additional Languages Resource Files 3/17/2014Microsoft confidential46
  47. 47. • Double-click WMAppManifest.xml to open the manifest editor • On the Packaging tab • Set the Default Language to the language of your default resources • This identifies the language of the strings in the default resources file. For example, if the strings in the default resources file are English (United Kingdom) language strings, you would select English (United Kingdom) as the Neutral Language for the project Define the Default Language 3/17/2014Microsoft confidential47
  48. 48. Demo 5: Localization
  49. 49. The Windows Phone Toolkit
  50. 50. Windows Phone Toolkit • A product of the Microsoft Windows Phone team • Formerly known as the ‘Silverlight Toolkit’ • The Windows Phone Toolkit adds new functionality ‘out of band’ from the official product control set • Includes full open source code, samples, documentation, and design-time support for controls for Windows Phone • Refresh every three months or so • Bug fixes • New controls 50
  51. 51. How to Get the Windows Phone Toolkit • http://phone.codeplex.com • Get source code, including the sample application • No MSI! – Install binaries from NuGet only
  52. 52. NuGet • Package management system for .NET • Simplifies incorporating third-party libraries • Developer focused • Free, open source • NuGet client is included in Visual Studio 2012 – including Express Editions! • Use NuGet to add libraries such as the Windows Phone Toolkit to projects
  53. 53. Controls in the Windows Phone Toolkit
  54. 54. ContextMenu
  55. 55. DatePicker and TimePicker 55
  56. 56. ToggleSwitch 56
  57. 57. WrapPanel 57
  58. 58. ListPicker • WP7 ComboBox • Dropdown list for small number of items • Full screen selector for longer lists
  59. 59. …And Many More • Custom MessageBox • Rating control • AutoCompleteBox • ExpanderView • HubTile • …more… • Download the source from http://Silverlight.codeplex.com, build the sample application and deploy to emulator or device 3/17/201459
  60. 60. Page Transitions and TiltEffect
  61. 61. Page Transitions • Easy way to add page transitions to your app similar to those in the built-in apps • Different transitions are included • Roll, Swivel, Rotate, Slide and Turnstile • Start by using the TransitionFrame control from the Windows Phone Toolkit instead of the default PhoneApplicationFrame • Set in InitializePhoneApplication() method in App.Xaml.cs:
  62. 62. Enabling Transitions on a Page • Declare namespace for Windows Phone Toolkit assembly • Under <phone:PhoneApplicationPage> root element, add transition you want
  63. 63. TiltEffect • Add additional visual feedback for control interaction • Instead of simple states such as Pressed or Unpressed, controls with TiltEffect enabled provide motion during manipulation • For example, Button has a subtle 3D effect and appears to move into the page when pressed and bounce back again when released • Easy to enable TiltEffect for all controls on a page • Also can apply to individual controls
  64. 64. Demo 6: Page Transitions and TiltEffect 64
  65. 65. Review • Navigation to pages is performed on the basis of a URI (Uniform Resource Indicator) values • The back button normally navigates back to the previous page, but this can be overridden • The URI can contain a query string to pass contextual string data • Support for Localization is incorporated into the project templates • Supporting different screen resolutions is simplified because they are scaled to a near-identical effective resolution. • Supply images scaled for WXGA and they will be scaled down automatically for lower screen resolutions. • The Windows Phone Toolkit is an out of band method for Microsoft to release additional tools and libraries outside of Visual Studio release cycles • http://silverlight.codeplex.com • The toolkit includes Page transitions and TiltEffect with which you can add common animations to your applications
  66. 66. The information herein is for informational purposes only an 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. © 2012 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. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×