March 23, 2018

Develop for Windows 10 Q&A – (4) Adaptive Design

This Q&A is related to video #6 and #7 in Jerry Nixon and Andy Wigley’s A Developer’s Guide for Windows 10. They are titiled Adaptive Design and Adaptive UI, that’s the core of UWP programming. They have talked about these topic conceptually and practically, but I am just taking a few typical points here.

Q. What is the golden rule in UWP UI sizing?

A. The golden rule (I make up the term) in sizing is multiples of 4. In UI design with XAML, whenever you have to decide on the size of anything (length, wide, margin, etc.) arbitrarily, always try to align it to multiples of 4. The reason is it scales better on different size of screens. In the past there was different guide lines, but before official document appears on, remember multiples of 4.

Q. What are scaling factors and epx? How do they work?

A. Scaling factor is a ratio applied to any display element on the screen based on the screen size. The scaling algorithms are build in the OS. It understands the screen size, resolution and physical DPI, it figures out a proper scaling factor that is proper to specific device type, see the following pictures.


In XAML, when specify a font size or a control size in pixels, the font and control are not rendered in physical pixels, they are called effective pixels (“epx”). Now when the OS render the font or control, it takes screen size, resolution, DPI, and form factor (therefore view distance) into consideration to workout a scale factor (say, 1.5, 2.2, ect.), when the font or control are translated into physical pixels, the final values are different between devices, however viewing effect to the end user are close to the same, or proper to the device.

As a developer, should you care? No. You can trust the OS to do the right thing. If things appear satisfactory on one device regarding size, it should be right on the others from a designer’s point of view. Of course it should be tested on all supported devices (at least emulators).

To extend this rule, developer should ignore scaling, screen resolution, dpi, and let the OS deal with it.

Q. What are the three UI transition points?

A. In UWP applications, we are writing one code running on different screen sizes, We have to deal with UI transitions among different screen sizes. Also, even though app is running on the same screen, because apps are now windowed, user can resize it, that’s more reason we have deal with transitions.




Problem is there are many different sizes, from 3″ to 84″, we have to decide at which points we start dramatically rearrange the UI, or change their sizes, we call that Snap Points or Transition Points. Common practical transition points are 5″, 8″, 13″, which is diagonal length of the screen.

In some cases, you can achieve continuous transition without dramatically resize of rearrange UI elements. For example, you can use percentage instead of fixed pixel. Use auto-flowing containers, but they don’t work on all cases.

Q. How to achieve UI transitions in XAML and code behind?

A. In code behind, use StateManageManager static class. In XAML use AdaptiveTrigger (new to Windows 10). You can design three (or more) visualstates that corresponding to the three snap points, then switch between them using AdaptiveTrigger in XAML.


What Is This Tablet from HP?

HoloLens: Field of View (FOV) Collections