What is a UWP application

  • Universal Windows Platform (UWP) is a homogeneous application architecture Platform created by Microsoft and first introduced in Windows 10. The purpose of the software platform is to help develop Metro-style applications that can run on Windows 10 and Windows 10 Mobile without rewriting.
  • Uwp is different from exe applications on traditional PC and is fundamentally different from apps only applicable to mobile terminals. It’s not designed for a single terminal, but runs on all windows10 devices.

The biggest feature of UWP applications, also known as Windows 10 Universal Applications, is that they are truly “all-device universal”, meaning that they are designed for all Windows 10 devices rather than for any one device. Developers only need to write a UWP program, you can run on all Win10 devices, whether it is computer, phone, tablet, Surface Hub large screen device, or Hololens, can run perfectly. This is not only more efficient for UWP developers, but also more convenient for the rest of us.

UWP application design

Valid pixel and zoom

Run the UWP application on all Windows 10 devices, from your tablet or PC to your TV. So, how do you design the UI to look good on a variety of devices and screen sizes?

The same application on all devices

UWP helps by automatically adjusting UI elements so that they are clear and easy to interact with all devices and screen sizes.

When your application is running on the device, the system uses algorithms to normalize how UI elements appear on the screen. This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size rather than physical size. The scaling algorithm ensures that a 24-pixel font on a Surface Hub can be identified from 10 feet away, just as a 24-pixel font on a 5-inch phone can be identified from a few inches away.

Viewing distance of different devices

Based on how the scaling system works, UWP applications are designed in effective pixels rather than actual physical pixels. Effective pixels (EPX) is a virtual unit of measure used to represent layout size and spacing (independent of screen density). (Epx, EP, and PX are used interchangeably in our guidelines.) When designing, you can ignore pixel density and actual screen resolution. Instead, they are designed for the same level of effective resolution (resolution in effective pixels)

In multiples of four

In UWP applications, the size, margins, and position of UI elements should always be multiples of 4 EPx.

UWP can be scaled on a variety of devices, with scaling platforms of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. The base unit is 4 because it is the only integer that can be scaled with non-integers (e.g. 4*1.5=6). Using multiples of 4 aligns all UI elements with the entire pixel and ensures that UI elements have clear, sharp edges.

layout

  • Windows, frames, and pages when you launch a uwp application on any Windows10 device, it launches in a window with a frame that navigates between page instances.

    You can think of your application’s user interface as a collection of pages. It depends on what you decide to do on each page and how the pages relate to each other.

    To learn how to organize your pages, see Navigation Basics.

  • How should the page layout display the page? Most pages follow a common structure to provide consistency so that users can easily navigate between and within application pages. Pages typically contain three types of UI elements: 1. Navigation elements help users select what they want to display. 2. Command elements initiate actions, such as processing, saving, or sharing content. 3. Content elements display application content.

Common Layout Patterns

Controls

UWP’s Design platform provides a set of common controls that are guaranteed to work on all Windows-enabled devices, following the Fluent Design system principles. These controls include everything from simple controls, such as buttons and text elements, to complex controls that can generate lists from a set of data and a template.

UWP controls

style

Common controls automatically reflect system themes and theme colors, using all input types and extending to all devices. In this way, they embody the characteristics of the Fluent Design system – adaptability, resonance, and aesthetics. The default styles for common controls use lighting, motion, and depth, so when you use them, you integrate the Fluent Design system into your application. Common controls are highly customizable; you can change the foreground color of the control or completely customize its appearance. To override default styles in controls, use lightweight style Settings or create custom controls in XAML.

Theme colour GIF

shell

Your UWP application will interact with the broader Windows experience and display tiling and notifications in the Windows Shell.

Interactive programs are displayed on the Start menu and when the application launches, they provide a glimpse of what is happening in the application. Their power comes from the content behind them, as well as the intelligence and craftsmanship they are offered.

Uwp applications come in four sizes (small, medium, wide, and large) and can be customized with the application’s icon and logo.

The input

UWP applications rely on intelligent interaction. You can design around a click interaction without having to know or define whether a click comes from a mouse, stylus, or finger tap. However, you can also design applications for specific input patterns.

equipment

availability





Conclusion:

advantages

You don’t have to worry about starting up, and you don’t have to worry about being installed with some messy bundled programs. Clean, safe, installed in the application center, approved. No residue during unloading. Notifications are conveniently integrated into the notification center. Speed and performance are very good due to architectural improvements, and relatively smooth when configuration is low. Adaptive, high and low split screen adaptation is very good, mom no longer need to worry about blindness.

disadvantages

Relatively strict permissions, restrictive rules and restrictions. Less productive than desktop applications, mostly lightweight applications. Many apps don’t, making it difficult to attract developers.