06 adapting ui for different screens and orientations

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.