Adapting UI for Different Screens and Orientations WinRT Apps Building Apps for Windows Phone 8.1 Jump Start Building Windows Runtime Apps using C# and XAML Adapting UI for Different Screens and Orientations Andy Wigley @andy_wigley Matthias Shapiro @matthiasshap 29 April 2014

In this module… Adapting UI for Different Screens and Orientations in Windows XAML apps… Adapting to a diverse range of screen sizes and resolutions Recap: Windows Phone 8 Silverlight approach Windows XAML approach in Windows Phone 8.1 Using emulators for testing different screen sizes and resolutions Programming for different screen sizes and resolutions Images Responsive UI DisplayInformation

Increasingly diverse Windows Phones 520 620 720 820 920 1020 1320 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 1.0x 1.6x 1.5x 2.25x 480x800 480x853 App is largely designed for one resolution and the OS applies (vector) scaling *GDR3 added extra capability here

Today - Windows Phone 8.0 1080px 480px 800px 1920px Start screen (e.g.) works differently – some devices display more content than others

Sidebar: pixel sizes vary per device

“Raw” device pixels vary in size Lumia 1320 720px 1280px Lumia 1520 1080px 1920px 6”

“Raw” device pixels vary in size 800px Dell Venue 8 Pro 1280px 1280px 768px Lumia 1520 Re-use of pieces of UI (e.g. templates) across platforms needs an abstraction that works for both

Windows Phone 8.1 approach

Windows Runtime XAML on Windows Phone 8.1 Upper bounds of X,Y vary depending on the device Calculated using physical display size display resolution Works for both today’s and future devices Same system as Windows 8.1 4.5” 7” 5” 6” y Infinite virtual canvas

Platform calculates a scale factor 12:38 scale factor = pixels / width x platform constant pixels scale factor minimum of 1.0, rounded to nearest 0.2 width (inch) platform constant depends on viewing distance of device (phone/tablet/PC)

Scale factor is applied 12:38 width height “raw” pixels 12:38 width height “view” pixels divide by scale factor

Same size, higher resolutions 12:38 540 960 5.5” 720 1280 1080 1920 450 800 “view” pixels increasing scale factor

Same resolution, larger sizes 12:38 6” 1080 1920 491x873 12:38 5.5” 1080 1920 450x800 12:38 4.7” 1080 1920 increasing scale factor “view” pixels 368x686

Sidebar: the emulator is your friend

Emulator support for device sizes Width Height Scale 400 666 1.2 384 640 2.0 711 1.8 450 800 2.4 490 872 2.2

How does an app provide the right experience?

What does an app need to do? Provide bitmap images to work with the scaling system Build responsive UI that adapts to the usable screen size Make use of DisplayInformation for granular display information

1. Bitmaps

Bitmaps only scale so far… 720px 1080px 12:38 12:38 1280px multiply by scale factor 1920px

System for resolving resources <Image Source="girl.png"/> System attempts to use girl.scale-xxx.png Value of xxx is based on the scale factor No exact match? fallback to “next” best scale factor Scale is one factor – system can also resolve based on scale, culture, theme, etc.

Resolution based on scale factor 12:38 <Image Source="girl.png"/> scale factor 3.2 100 120 140 160 180 200 220 240 300 400 system defined scale factor “buckets” 320 <Image Source="girl.scale-400.png"/>

Creating images Variable size images (e.g. background) – design for a high resolution (1080p) display Fixed size images size to get baseline width & height ship 140% and 240% images (at least) 140 240 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 Content Your root content panel will fill all the space (unless you take explicit steps)

Factors affecting XAML sizing Top Left Many factors contribute to size Generally avoid explicitly sizing elements – let the parent size the child

Proportional layout with Grid 2* 1* auto 7* Rows/columns – 3 types of sizing: star sizing proportional: 1*/3* = 25%/75% auto sizing sized to content content can also have Max/Min widths and heights as limits pixel sizing hard-coded size – avoid in most situations auto 4* 1*

Proportional layout with Grid 600 1067 Grid auto 1* 400 711

Additional space/additional content Additional space generally given to controls which can display more content e.g. ItemsControls can display additional items e.g. TextBlocks or RichTextBlocks can display more text e.g. content in ScrollViewers requires less scrolling e.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 content 600 1067 400 711 NB: MaxLines is a good mechanism for flexible limiting of text size

Additional space/scaled content 600 1067 400 711

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 Image (height = x) RichTextBlock No Content In This Column (width is effectively zero) auto Image (height = x) RichTextBlock No Content In This Row (height is effectively zero) “Landscape” Visual State animate grid.row 2 => 1 grid.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

Summary New approach to layout for Windows Phone 8.1 Shared with Windows 8.1 Beyond uniform scaling of the UI Display size of the runtime device is unknown at design time Apps need to be responsive Design for proportional layouts, not fixed sizes Design for orientation changes Test 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