This document discusses building Windows Phone applications, covering three main topics:
1. Handling screen orientation changes, including detecting orientation changes and adjusting layouts for portrait and landscape modes.
2. Supporting multiple screen resolutions, such as using resolution-independent units and adaptive grids to build responsive interfaces.
3. An introduction to localization, such as adding support for additional languages and translating string resources.
4. 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
5. NEW DEVICE TAB IN VISUAL STUDIO 2012
View Designer in Portrait or Landscape
6. 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
9. 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.
13. SO I HAVE TO DO THREE DIFFERENT UIS?
Well, No…
As developers, we work with device independent pixels
OS applies a scale factor to the actual resolution
15. USE “AUTO” AND “*” ON GRID ROWS TO
ENSURE GOOD LAYOUT
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
17. IMAGES
•In most cases, you should supply images targeting the WXGA (1280 x
768) screen
Will automatically scale down on WVGA phones
WXGA assets are of the highest quality
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
18. SPLASH SCREENS
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-WXGA.jpg
SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-720p.jpg
In addition to these images, you must still include the default
SplashScreenImage.jpg file
19. APP ICON AND TILES
You must supply app icon and tile images sized for WXGA
The framework automatically scales to the correct size for WVGA and
720p
21. WINDOWS PHONE 8 LANGUAGE SUPPORT
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
22. NEW PROJECT TEMPLATES HAVE
LOCALIZATION SUPPORT BUILT IN
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
23. ACCESSING STRING RESOURCES FROM
XAML
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
24. ADD SUPPORT FOR ADDITIONAL
LANGUAGES
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
25. TRANSLATE THE ADDITIONAL LANGUAGES
RESOURCE FILES
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
26. DEFINE THE DEFAULT LANGUAGE
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. E.g., if the
strings in the default resources file are
English (UK) language strings, you
would select English (United Kingdom)
as the Neutral Language for the project