Desktop Applications with XAML. Part 1: UWP

If you are creating WPF applications, what is the path going forward? What’s the best way going forward to build modern desktop applications. Of course, one way is to use HTML and JavaScript (or TypeScript) like it’s done with Visual Studio Code. However, XAML and C# is still a great way building desktop applications – with many fascinating options to go ahead. In this article series I explain what the options are – e.g. using the Universal Windows Platform (UWP) going forward, or enhancing WPF applications with new features. In the first part UWP has the focus. A later article follows where you can see how to use features from UWP within WPF.

With the article series I try to explain what the options are – and how you can decide to chose your best way going forward creating desktop applications with XAML and C#.

UWP Applications

The best option to build XAML applications for the desktop today is using the Universal Windows Platform. Windows 10 itself is using this technology to build its user interfaces. You can create XAML-based applications with C# and C++, and make use of the Windows Runtime.

New controls offer great improvements compared to WPF. Instead of using binding based on reflection, you can use compiled binding – with compilation errors if bound properties cannot be found. It’s faster, as behind the scenes properties are directly set. The application is compiled to native code. This way it’s not just the binding that’s faster.

To see the available controls in action, you can install the XAML Controls Gallery app from the store. This application not only shows the controls in action, but also gives you XAML code how the control can be used, and also links to documentation and guidelines.

UWP controls have animations built-in by default. Using WPF you need to do a lot more on your own to create an app that looks good.

Sample Business Application

A great example for a modern business application created with UWP is the Van Ardsel Inventory application. The source code is available at GibHub Microsoft Inventory Sample App.

Starting the application, already the login looks different. A big picture is shown, and you can login using Windows Hello, or using traditional username/password.

After logging in, the application makes use of the NavigationView control with a Hamburger button which is common nowadays. The main screen shows a dashboard with a nice look – customers, products, and orders.

The application also offers an adaptive UI. As the available screen changes, the application adapts – features built into XAML.

The application offers a Master/Detail view with editable details. Changing from the read mode to the edit mode using the standard look of the TextBox control it’s difficult for the user to see the mode he’s in. This application not only offers an Edit button to change in the edit mode, but also as soon as the user clicks into a TextBox control, the edit mode is active.

The products page looks different. All the products are shown in an adaptive grid.

Clicking on a product, the detail page opens in a separate top-level window. With the other views, the click of the button, you can also open the display in a separate window. Yes, UWP also allows to open new windows.

Behind the scenes, the application makes use of the MVVM pattern with the Microsoft.Extensions.DependencyInjection DI container. The view-models are created within a .NET Standard library. This way it should be possible to use the same view-models and services not only from UWP but also from WPF and Xamarin. Just the user interface needs to be re-created.

UWP Controls and Windows Runtime Versions

One issue we had using UWP controls is that the controls were related to a specific version of the Windows Runtime. Using a new control, it was necessary to wait until all users switched to the version of Windows where the control or the new features of a control are available.

With the Windows UI Library this is no longer the case. This library just requires the minimum version to be set to at least 14393, and the current version to 17134 or higher. The NuGet package has the name Microsoft.UI.Xaml and is currently available in preview.

In the book Professional C# 7 and .NET Core 2.0, I’ve changed a WPF application using a tree-view control to UWP. At the time of the writing, the TreeView control was not available with UWP. Because of this, I’ve used a C++ TreeView sample component offered by Microsoft and used it within the application. This had the disadvantage that users compiling the sample also needed to install the C++ compiler with Visual Studio to build the TreeView control. Since Windows 10 version 1803 (10.0.17134.0), UniversalApiContract v6, Windows 10 has a TreeView control. I changed the sample code to use this control instead. This has the disadvantage that users need to have at least Windows 10 version 1803. Next I’m changing the sample again to use the control from the Windows UI Library. This way, users can work with older Windows 10 versions.

Windows Template Studio

To see what you can all do with Universal Windows apps, it’s easy to start with the Windows Template Studio. This is a Visual Studio extension that allows you to create an application step by step using a wizard.

With the first step project type, you can select the main layout of the application: using either a navigation pane or tabs, or start with a blank page where you have to do the layout on your own.

In the second step design pattern you select the library to use. You can choose between simple code behind, or an MVVM architecture either using MVVM Basic where the MVVM classes are implemented within the application, or use a library such as MVVM Light, Caliburn.Micro, or Prism.

The third step pages allows you to create pages where you select the pages from a large list including for example Master/Detail, DataGrid, Tabbed, Map, Camera, Ink, Chart, and many more.

The last final step features gives you many features you can choose from, such as deep linking, Web to app link, recording user activity with the Windows timeline, create multiple views, background tasks, implement share contracts, drag and drop, add theme support, and much more.

Summary

Starting with Windows 8, the Universal Windows Platform has made a long way and now greatly supports building Windows 10 desktop applications. The sample application Van Ardsel Inventory greatly shows how a business app can look like with UWP. With the Windows UI Library, Microsoft plans to make UWP XAML controls open source. This library is available in preview on NuGet to use new UWP controls with older versions of Windows 10. The Windows Template Studio gives you a fast path to start with UWP and use the various features easily.

In case you would like to start now – go ahead and build great Windows 10 apps.

In case you still need to support Windows 7 users, and have an existing WPF app that cannot be changed to UWP in the short time, you can integrate Windows 10 features in this app. Information what you can do here is covered in the next article of this series.

If this information motivated you building Windows 10 apps with UWP, consider buying me a coffee which helps me staying up longer and writing more articles.