Native Look-and-Feel on Windows 10 Mobile with Qt / QML

The goal for today: create a QML app for Windows 10 Mobile, with a native look-and-feel!

The goal
Because this should be just about the UI and its QML items, I took an existing Windows 10 Mobile app and "copy" its UI, to see how we can achieve it with QML. The app to "copy" is the Alarm & Clock app:

The UI has, beside the common Modern UI controls, 3 major elements:
  1. a sticky header with a toolbar, button with icons + text
  2. Swipe-able subpages
  3. every subpage has its own AppBar [1] with different icons and entries

The tools
For the implementation, I'm using Qt 5.6(.0). Why? There are two main reasions.

The first reason is a new QML extension called "Qt Labs Controls" (see chapter "Further notes"), which makes it very easy to write re-usable UI controls with QML.

The Qt Labs Controls are the successor of the QtQuickControls1 module, which is present since the early Qt5 days. QtQuickControls1 had many issues when it comes the performance and its general design [2]. Qt Labs Controls seperated the logic and the look of the controls:
  • There is a QtLabsTemplates library, which gives you basic / abstracts types with the event handling and state processing
  • The actual controls inherit from these abstract types and add the visual look. Furthermore, it has the concept of styles and currently provides the styles: Base, Material (Android), Universal (Modern UI / Windows) [3].
To use the Universal style in your application, put this in the very first line of your main()-method:

qputenv("QT_LABS_CONTROLS_STYLE", QString("universal").toLatin1());
The second reason for choosing Qt 5.6 is the new High DPI support. On many mobile platforms, there is good support for High DPI displays like in smartphones or the Retina display in Apple MacBooks. But Qt lacked in a cross-platform support for this, until Qt5.6: you can specify integer scaling factor, which will shrink your available with and height in a QML context. Your app will be looking fine, even on a Retina display.

The new High DPI support has even a automatic DPI detection, which can be enabled through putting this line again at the beginning of yoru main()-method [4]:

qputenv("QT_AUTO_SCREEN_SCALE_FACTOR", QString("1").toLatin1());

As said before, the controls inherit from a module called QtLabsTemplates. In this module, the base types are defined, like a Button or Slider [5]. The different styles (base, material and universal) inherit from these base-controls and every style has the same set of controls. For example: the Universal.Switch is inherited from the the Templates.Switch.

So you're fine when using a Button, Slider or Switch, but what about platform-dependent XAML controls like the AppBar or the tab bar with icons shown in the picture at the beginning??
These controls don't fit in the API or the behaviouring of the "standard" control set. E.g. a AppBar could basically be implemented with a ToolBar. But the API doesn't allow to specify "secondary commands" (the menu entries, which are shown when a AppBar is opened).

The solution is to extend the controls set. We create a new type AppBar, which inherit the Templates.ToolBar:

Furthermore, we extend AppBar with new properties, to get closer to the feature set of the XAML AppBar. The same we do for AppBarButton (= Templates.ToolButton), IconTabBar (= Templates.TabBar) and IconTabButton (= Templates.TabButton), mainly because no one of the standard controls had an icon property.

The result
The result is really good: with a few lines of code, we get some platform-dependent controls for Windows 10 (Mobile).

Thanks to all contributors of the QtLabsControls module (most notable J-P Nurmi and Mitch Curtis), for this great set of APIs! The new controls even embedded in the universal color style (mainly because they promoted the color palette/style very well!).


Further notes
  1. Qt 5.6.0 on a Windows 10 Mobile device has no support for adapting the window size, according to the visibility of the navigation bar. If visible, the navigation bar will hide a part of the window content. This is fixed in Qt 5.6.1 [A1], the window will adapt according to the available space.
  2. In Qt 5.6.0 on Windows Runtine (WinRT = Windows 10 (Mobile), Windows 8.1 (Phone)) has no support for High DPI. This is added for Qt 5.6.1 [A2].
  3. Qt Labs Controls are in Technical Preview state for Qt 5.6. In the upcoming Qt 5.7, the module will be renamed to Qt Quick Controls 2.0.


Beliebte Posts aus diesem Blog

Building QtWebKit Technology Preview 5 from Sources

Qt5 on Windows Phone - Current State