1. 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

2. 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

3. Increasingly diverse Windows Phones
520
620
720
820
920
1020
1320
1520
*examples – many more devices in market

4. Used in different orientations

5. Apps need to cope with a diverse set of display sizes/resolutions

6. Recap – Windows Phone 8 approach

7. 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

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

9. Sidebar: pixel sizes vary per device

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

11. “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

12. Windows Phone 8.1 approach

13. 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

14. 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)

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

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

17. 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

18. Sidebar: the emulator is your friend

19. 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

20. How does an app provide the right experience?

21. 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

22. 1. Bitmaps

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

24. 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.

25. 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"/>

26. 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

27. Image scaling
demo

28. 2. Responsive UI

29. 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)

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

31. Proportional layout with Grid2* 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*

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

33. 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

34. Additional space/additional content
600
1067
400
711
NB: MaxLines is a good mechanism for flexible limiting of text size

35. Additional space/scaled content
600
1067
400
711

36. Responsive UI
demo

37. 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 };

38. 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

39. Orientation Changes
demo

40. 3. Display information

41. 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

42. DisplayInformation
demo

43. 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