BUILDING WINDOWS PHONE
APPLICATION
1. Handling Screen Orientation Changes
2. Supporting Multiple Screen Resolutions
3. Introduction to Localization
FOLLOW US
Twitter

: @chothanihitesh

Slideshare

: http://www.slideshare.net/Chothani-Hitesh

Email

: chothani.hitesh@gmail.com

Support

: windows.chothani@live.com

LinkedIn

: in.linkedin.com/pub/hiteshchothani/6b/311/2b8

W8 Publisher

: AppStudios

WP Publisher : AppStudios
Website

: www.appmobinfotech.com
HANDLING SCREEN
ORIENTATION CHANGES
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
NEW DEVICE TAB IN VISUAL STUDIO 2012


View Designer in Portrait or Landscape
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
LAYOUT MAY NEED ALTERING
USING A GRID TO AID LANDSCAPE
LAYOUT
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.
MOVING ELEMENTS
SUPPORTING MULTIPLE SCREEN
RESOLUTIONS
THREE SCREEN RESOLUTIONS
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
SCALED RESOLUTIONS
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
ADAPTIVE LAYOUT USING GRID
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
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
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
INTRODUCTION TO
LOCALIZATION
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
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
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
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
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
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
Thank You

More Related Content

PPTX
Neha Gupta - AIR Mobile: Cross promotion
PPTX
Do You Want to Build a Dashboard?
PPT
EventPilot Conference Apps - Getting Started: Mobile App Graphics
PDF
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
PDF
Windows phone 8 session 9
PDF
Windows phone 8 session 4
PDF
Windows phone 8 session 13
PDF
Windows phone 8 session 11
Neha Gupta - AIR Mobile: Cross promotion
Do You Want to Build a Dashboard?
EventPilot Conference Apps - Getting Started: Mobile App Graphics
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Windows phone 8 session 9
Windows phone 8 session 4
Windows phone 8 session 13
Windows phone 8 session 11

Similar to Windows phone 8 session 6 (20)

PPTX
"Discover windows phone" 01. Project Template
PDF
03.Controls in Windows Phone
PPTX
MVP Virtual Conference - Americas 2015 - Cross platform localization for mobi...
PPTX
Windows 8 DevUnleashed - Session 1
PDF
Windows phone 8 session 2
PPTX
Windows Phone and Windows 8 application development
PDF
Windows phone - Build your first app
PPTX
Windows phone 8 overview
DOCX
Windows Store App - Globalization
PPTX
Presentation at InfoCom conference about Windows Phone
PDF
windows phone-developer-guidance-map- 2-d00_-v2
PPTX
Build your wp8 app today
 
PPTX
Sharing code win8 wp8
PDF
Microsoft Nokia developer programmes and opportunity
PDF
Apress.migrating.to.windows.phone.dec.2011
PPTX
Run your app on every Windows Phone 8.1 device in the world
PPT
PPTX
Universal Apps Oct 2014
PPTX
Introduction to Windows phone app development
PPTX
Windows Phone 8 - 2 Designing WP8 Applications
"Discover windows phone" 01. Project Template
03.Controls in Windows Phone
MVP Virtual Conference - Americas 2015 - Cross platform localization for mobi...
Windows 8 DevUnleashed - Session 1
Windows phone 8 session 2
Windows Phone and Windows 8 application development
Windows phone - Build your first app
Windows phone 8 overview
Windows Store App - Globalization
Presentation at InfoCom conference about Windows Phone
windows phone-developer-guidance-map- 2-d00_-v2
Build your wp8 app today
 
Sharing code win8 wp8
Microsoft Nokia developer programmes and opportunity
Apress.migrating.to.windows.phone.dec.2011
Run your app on every Windows Phone 8.1 device in the world
Universal Apps Oct 2014
Introduction to Windows phone app development
Windows Phone 8 - 2 Designing WP8 Applications
Ad

More from hitesh chothani (6)

PDF
Windows phone 8 session 10
PDF
Windows phone 8 session 8
PDF
Windows phone 8 session 7
PDF
Windows phone 8 session 5
PDF
Windows phone 8 session 3
PDF
Windows phone 8 session 1
Windows phone 8 session 10
Windows phone 8 session 8
Windows phone 8 session 7
Windows phone 8 session 5
Windows phone 8 session 3
Windows phone 8 session 1
Ad

Recently uploaded (20)

PPTX
Share_Module_2_Power_conflict_and_negotiation.pptx
PDF
semiconductor packaging in vlsi design fab
PDF
English Textual Question & Ans (12th Class).pdf
PDF
Journal of Dental Science - UDMY (2022).pdf
PDF
Environmental Education MCQ BD2EE - Share Source.pdf
PPTX
Unit 4 Computer Architecture Multicore Processor.pptx
PDF
LIFE & LIVING TRILOGY - PART - (2) THE PURPOSE OF LIFE.pdf
PPTX
Core Concepts of Personalized Learning and Virtual Learning Environments
PDF
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 1)
PDF
Empowerment Technology for Senior High School Guide
PDF
David L Page_DCI Research Study Journey_how Methodology can inform one's prac...
PPTX
A powerpoint presentation on the Revised K-10 Science Shaping Paper
PDF
Skin Care and Cosmetic Ingredients Dictionary ( PDFDrive ).pdf
PDF
CRP102_SAGALASSOS_Final_Projects_2025.pdf
PDF
LIFE & LIVING TRILOGY - PART (3) REALITY & MYSTERY.pdf
PDF
LEARNERS WITH ADDITIONAL NEEDS ProfEd Topic
PDF
Journal of Dental Science - UDMY (2020).pdf
PDF
MBA _Common_ 2nd year Syllabus _2021-22_.pdf
PDF
Journal of Dental Science - UDMY (2021).pdf
PDF
International_Financial_Reporting_Standa.pdf
Share_Module_2_Power_conflict_and_negotiation.pptx
semiconductor packaging in vlsi design fab
English Textual Question & Ans (12th Class).pdf
Journal of Dental Science - UDMY (2022).pdf
Environmental Education MCQ BD2EE - Share Source.pdf
Unit 4 Computer Architecture Multicore Processor.pptx
LIFE & LIVING TRILOGY - PART - (2) THE PURPOSE OF LIFE.pdf
Core Concepts of Personalized Learning and Virtual Learning Environments
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 1)
Empowerment Technology for Senior High School Guide
David L Page_DCI Research Study Journey_how Methodology can inform one's prac...
A powerpoint presentation on the Revised K-10 Science Shaping Paper
Skin Care and Cosmetic Ingredients Dictionary ( PDFDrive ).pdf
CRP102_SAGALASSOS_Final_Projects_2025.pdf
LIFE & LIVING TRILOGY - PART (3) REALITY & MYSTERY.pdf
LEARNERS WITH ADDITIONAL NEEDS ProfEd Topic
Journal of Dental Science - UDMY (2020).pdf
MBA _Common_ 2nd year Syllabus _2021-22_.pdf
Journal of Dental Science - UDMY (2021).pdf
International_Financial_Reporting_Standa.pdf

Windows phone 8 session 6

  • 1. BUILDING WINDOWS PHONE APPLICATION 1. Handling Screen Orientation Changes 2. Supporting Multiple Screen Resolutions 3. Introduction to Localization
  • 2. FOLLOW US Twitter : @chothanihitesh Slideshare : http://www.slideshare.net/Chothani-Hitesh Email : chothani.hitesh@gmail.com Support : windows.chothani@live.com LinkedIn : in.linkedin.com/pub/hiteshchothani/6b/311/2b8 W8 Publisher : AppStudios WP Publisher : AppStudios Website : www.appmobinfotech.com
  • 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
  • 7. LAYOUT MAY NEED ALTERING
  • 8. USING A GRID TO AID LANDSCAPE LAYOUT
  • 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