06 adapting ui for different screens and orientations
DESCRIPTION
Building Apps for Windows Phone 8.1 Jump Start . Videos at: http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1TRANSCRIPT
Andy Wigley @andy_wigleyMatthias Shapiro @matthiasshap
Adapting UI for Different Screens and Orientations
WinRT Apps
29 April 2014
Building Apps for Windows Phone 8.1 Jump Start
Building Windows Runtime Apps using C# and XAML
In this module…Adapting UI for Different Screens and Orientations in Windows XAML apps…
Adapting to a diverse range of screen sizes and resolutionsRecap: Windows Phone 8 Silverlight approachWindows XAML approach in Windows Phone 8.1 Using emulators for testing different screen sizes and resolutionsProgramming for different screen sizes and resolutionsImagesResponsive UIDisplayInformation
Increasingly diverse Windows Phones
520 620 720 820 920 10201320 1520
*examples – many more devices in market
Used in different orientations
Apps need to cope with a diverse set of display sizes/resolutions
Recap – Windows Phone 8 approach
Today - Windows Phone 8.0
App is largely designed for one resolution and the OS applies (vector) scaling
1.0x 1.6x 1.5x 2.25x
480x800 480x800 480x853 480x853
*GDR3 added extra capability here
Start screen (e.g.) works differently – some devices display more content than others
Today - Windows Phone 8.0480px
80
0p
x
1080px
19
20
px
Sidebar: pixel sizes vary per device
“Raw” device pixels vary in size
Lumia 1520
1080px
19
20
px
Lumia 1320
720px
12
80
px
6”
“Raw” device pixels vary in size
Re-use of pieces of UI (e.g. templates) across platforms needs an abstraction that works for both
12
80
px
768px
Lumia 1520
800px
Dell Venue 8 Pro
12
80
px
Windows Phone 8.1 approach
Windows Runtime XAML on Windows Phone 8.1
7”
6”
5”
4.5”
Infinite virtual canvas
Upper bounds of X,Y vary depending on the deviceCalculated using• physical display
size• display resolution
Works for both today’s and future devicesSame system as Windows 8.1
x
y
Platform calculates a scale factor
12:38
width (inch)
pixelsscale factor =
pixels / width x platform constant
scale factor minimum of 1.0, rounded to nearest 0.2platform constant depends on viewing distance of device (phone/tablet/PC)
Scale factor is applied
12:38
width
heig
ht
“raw” pixels
12:38
width
heig
ht
“view” pixels
divide byscale factor
Same size, higher resolutions
12:38
540
96
05.5”
12:38
5.5”
720
12
80
12:38
5.5”
1080
19
20
450
800
“view” pixels
increasing scale factor
Same resolution, larger sizes
12:38
4.7”
1080
19
20
“view” pixels 368x686
12:38
5.5”
1080
19
20
450x800
12:38
6”
1080
19
20
491x873
increasing scale factor
Sidebar: the emulator is your friend
Emulator support for device sizes
Width Height Scale
400 666 1.2
400 666 1.2
384 640 2.0
400 711 1.8
450 800 2.4
490 872 2.2
How does an app provide the right experience?
1. Provide bitmap images to work with the scaling system
2. Build responsive UI that adapts to the usable screen size
3. Make use of DisplayInformation for granular display information
What does an app need to do?
1. Bitmaps
Bitmaps only scale so far…
12:38 12:38
multiply byscale factor
720px1
28
0p
x1080px
19
20
px
System for resolving resources
System attempts to use girl.scale-xxx.pngValue of xxx is based on the scale factorNo exact match? fallback to “next” best scale factorScale is one factor – system can also resolve based on scale, culture, theme, etc.
<Image Source="girl.png"/>
Resolution based on scale factor
12:38
scale factor
3.2
<Image Source="girl.png"/>
320<Image Source="girl.scale-400.png"/>
100 120 140 160 180 200 220 240 300 400
system defined scale factor “buckets”
Variable size images (e.g. background) – design for a high resolution (1080p) displayFixed size images
Creating images
size to get baselinewidth & height
ship 140% and 240%images (at least)
140
14
0
240
24
0
design for a 140%scaled device
Image scaling
demo
2. Responsive UI
Structure of a XAML page Frame
Page
Content (often Grid)
Page gives its entire space to its ContentYour root content panel will fill all the space (unless you take explicit steps)
Factors affecting XAML sizing
Top
Left
Many factors contribute to sizeGenerally avoid explicitly sizing elements – let the parent size the child
Proportional layout with Grid
Rows/columns – 3 types of sizing:star sizing
proportional: 1*/3* = 25%/75%
auto sizingsized to contentcontent can also have Max/Min widths and heights as limits
pixel sizinghard-coded size – avoid in most situations
auto1*2*
au
to1
*4
*7
*
Proportional layout with GridGrid
Grid
auto
auto
1*
1*1*
400
71
1
600
10
67
Additional space/additional content
Additional space generally given to controls which can display more contente.g. ItemsControls can display additional itemse.g. TextBlocks or RichTextBlocks can display more texte.g. content in ScrollViewers requires less scrollinge.g. more complex controls (e.g. Map) can take appropriate action
To simply scale the content as it was designed look to the ViewBox control
Additional space/additional content400
71
1
600
10
67
NB: MaxLines is a good mechanism for flexible limiting of text size
Additional space/scaled content
400
71
1
600
10
67
Responsive UI
demo
Responding to orientation changes
Display dimensions can change at runtime if your app supports portrait and landscape
Note: On Windows, it is customary to subscribe to the Page.SizeChanged event to detect orientation changes. SizeChanged does not fire on Windows Phone when orientation changes.
DisplayInformation displayInfo = DisplayInformation.GetForCurrentView();
displayInfo.OrientationChanged += (s, e) => { DisplayOrientations orientation = displayInfo.CurrentOrientation;
// TODO: handle orientation change };
Orientation changes via Visual States
Define visual states for orientations & use Visual State Manager to animate between
auto
auto
auto
autoauto
Image (height =
x)
RichTextBlock
No C
onte
nt
In T
his
Colu
mn
(wid
th is
eff
ect
ively
zero
) auto
auto
auto
autoauto
Image (height = x)
RichTextBlock
No Content In This Row(height is effectively zero)
“Landscape”Visual State
animategrid.row 2 => 1grid.column 0
=> 1
Orientation Changes
demo
3. Display information
DisplayInformation class
DisplayInformation displayInfo = DisplayInformation.GetForCurrentView();
// NB: not all properties/events shown - take care with deprecated properties // such as ResolutionScale var nativeOrientation = displayInfo.NativeOrientation; var currentOrientation = displayInfo.CurrentOrientation; var rawPixelsPerViewPixel = displayInfo.RawPixelsPerViewPixel; var viewPixelsDPI = displayInfo.LogicalDpi; var rawDpiX = displayInfo.RawDpiX; var rawDpiY = displayInfo.RawDpiY;
e.g. Helpful to determine the native device resolution when downloading web-based images to match
DisplayInformation
demo
SummaryNew approach to layout for Windows Phone 8.1Shared with Windows 8.1Beyond uniform scaling of the UIDisplay size of the runtime device is unknown at design time
Apps need to be responsiveDesign for proportional layouts, not fixed sizesDesign for orientation changesTest on different device sizes/resolutions (including the emulators)Consider portrait/landscape and use techniques (such as VSM) to handle
“Raw” display information available to the subset of apps that require it
©2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and 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. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.