ltstudiooo - Fotolia

How does Universal Windows Platform create an adaptive UI for apps?

Developers can use the Universal Windows Platform to build apps that work on Windows 10 PCs, tablets and smartphones. The apps adapt to devices based on their screen size and resolution.

Applications built on the Universal Windows Platform can run on different types of devices, so developers only have to build a Windows app once and it works on PCs, mobile devices and just about every other Windows 10 device. And desktop administrators only have to manage a single app that works across a variety of platforms.

Apps based on the Universal Windows Platform (UWP) -- known as Universal Windows apps -- can run on different devices, so they must be able to adapt to various environmental factors such as dpi densities and screen resolutions. To account for these differences, the UWP includes a set of adaptive features. These features, such as universal controls and adaptive-layout panels, enable the app's user interface to adjust to a device's capabilities and respond to how a user interacts with the device. On a desktop computer, for example, the app recognizes that the user has a keyboard and mouse, and it works in a way that utilizes those tools.

Universal controls make it possible for the adaptive user interface to automatically adjust to different device types, layouts and orientations. With these controls, Windows 10 can determine how users interact with the app at runtime and render the appropriate features for the circumstances. For example, if an individual on a 2-in-1 laptop uses the touchscreen rather than the mouse, the app will display a lightweight UI with large touch targets specific to the laptop environment. Another component of the UWP is the adaptive panel, which changes the adaptive UI layout based on available screen space.

The UWP also includes universal styles, a feature developers can use to define an app's look and feel. For example, they can choose from light or dark themes to incorporate a user's accent color preferences. The styles are designed to support devices in high-contrast mode, with Segoe font to help ensure a crisp look across all devices. Developers can also customize the default styles or replace them altogether.

In addition, the UWP includes design states that give developers the power to adapt the overall UI layout to the available screen space. This means the app can accommodate changes in screen size when moving from a smartphone to a PC, for example. A trigger activates the design state at a predefined activation threshold, at which point the design state sets layout properties specific to the screen size that triggered the changes.

Because an app must be able to adjust to different screen sizes and resolutions, the UWP also includes a unified set of scale factors to provide consistency across devices. The UWP uses a scaling algorithm to normalize how the app displays fonts, controls and other UI elements, taking into account variables such as screen density and viewing distance. Because of how the UWP scales the interface, developers build their apps based on effective pixels, rather than physical pixels.

Next Steps

Use MADPs to develop mobile apps

Taking universal apps to the healthcare world

A look at Windows 10 app compatibility

What's the difference between UI design software and manual coding?

Dig Deeper on Windows 10