How to Add .NET WinUI Controls to Your Desktop Applications

WinUI is the native UI platform that provides a unified set of APIs and tools that can be used to create production desktop apps that target Windows 10 and later, and can be published to the Microsoft Store. From this blog you will learn how to add .NET WinUI controls to your desktop applications including controls from NuGet and GrapeCity ComponentOne WinUI Edition.

What is WinUI

The WinUI platform is the latest in a long line of graphical user interface (GUI) frameworks from Microsoft following WPF, WinRT and UWP as a means to develop modern desktop applications. You can see from the table below that WinUI is meant to be the best yet when it comes to .NET desktop development because it supports Win32, UWP, .NET 6 and boasts a modern, fluent UI style.

*For the sake of this comparison, WinForms and WPF do not support a fluent/modern UI style out of the box. But of course, with 3rd party libraries and additional coding it can be achieved with themes. Due to its XAML-based nature, it is a lot easier to theme WPF UI than WinForms.

The Difference Between UWP and WinUI

It's all in the platform name branding. UWP is both a platform and a type of application so it can be confusing. One way to better understand it is that the "UWP" platform is based on WinUI 2.0 and the "WinUI" platform is based on WinUI 3.0. 

WinUI 3 contains everything included with WinUI 2 plus brings in the desktop Win 32 application model. So anywhere you see "WinUI 3.0" it's referring to the "WinUI platform" for developing desktop (Win32) or UWP apps. The "UWP platform" only produces UWP apps.

For more details, check out my previous article about comparing WinUI and its predecessors. 

Creating a WinUI Application

You'll need Visual Studio 2019 version 16.10.0 or higher. You'll also need to install the Windows App SDK (formerly called Project Reunion), which will give you the WinUI project templates. You can download the Windows App SDK from the Extension Manager in Visual Studio 2019 or 2022.

Then you can create new WinUI projects in Visual Studio. The project name has changed many times over the past year, but as of the of this writing it's called "Experimental Blank App, Packaged with WAP (WinUI 3 in Desktop)". This project types creates a Win32 WinUI app, along with the packaging needed to publish the app in the Microsoft Store. There's also a "WinUI 3 in UWP" version, which creates a UWP app instead of a Win32 app.

The WinUI project template includes MSIX packaging, which includes a project template in your solution for side-loading the app in the Microsoft Store.

Adding WinUI Controls

Once you have a WinUI project, open the MainWindow.xaml file. This is the starter page that displays when you build and run the application. As of the time of this writing, there is no design surface for WinUI apps. You can only add controls to the XAML markup by typing them. This is where it helps if you had experience with WPF, UWP or Xamarin apps because the XAML is the same.

You can use the intellisense drop-down to help build your UI.

You can build your entire UI using just a few basic controls such as StackPanel, Grid, Button, TextBlock, TextBox, ListView, and ComboBox to name a few. The XAML Controls Gallery sample from Microsoft is a great place to start learning how to use each of these controls.

Eventually Microsoft will support the design surface and toolbox for WinUI so you will be able to drag and drop the controls to create your UI more easily.

Adding WinUI Controls from NuGet

The standard controls are the essential building blocks for the UI frame of your application. But unless your application is just a simple forms over data, you may require advanced UI controls that provide additional functionality. The best place to find them for WinUI applications is NuGet.

With your project open in Visual Studio, select Tools | NuGet Package Manager | Manage NuGet Packages for Solution. This opens up the NuGet package search window where you can look for different UI libraries by key words like "chart" or "calendar". Be sure to include "WinUI" in your search term.

Working with ComponentOne WinUI Controls

In 2021, GrapeCity released its first WinUI controls as part of its ComponentOne product line. The ComponentOne WinUI Edition is a native UI library for Windows desktop applications based on the WinUI 3 framework. As of this writing, it includes several controls including a powerful datagrid, essential calendar and accordion layout controls.

The ComponentOne FlexGrid is a WinUI datagrid component with superior cell customization and high-performance virtualization. If you want to customize what is displayed in your datagrid cells, or load very large data sets in chunks from the server, the FlexGrid component can help.

You can use the WinUI FlexGrid datagrid like an Excel spreadsheet, or use it with its default fluent style for a clean list view.

add FlexGrid to your WinUI application, search and add the C1.WinUI.Grid NuGet package. Then add the following XML namespace (xmlns) and FlexGrid markup to your XAML window. The XML namespace is necessary to access the known class names from the package we just added.

<Window
    x:Class="App6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App6"
xmlns:c1="using:C1.WinUI.Grid"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
 <c1:FlexGrid x:Name="grid" />  
</Window>

In the code behind, Now you can also access the control's API through the "grid" control. Then follow our FlexGrid for WinUI quickstart tutorial to complete populating and working with FlexGrid.

ComponentOne WinUI controls support the WinUI in desktop apps only, which provides a great way to gradually migrate existing apps written in familiar technologies like MFC, WinForms, and WPF, allowing you to move these applications forward at your own pace. You can download from grapecity.com and get all samples installed to your documents folder. Find more samples from GrapeCity on GitHub.

The ComponentOne WinUI Edition will continue to expand and grow over time with more controls like charts, treeviews and input editors. If you're looking for any specific feature or control for WinUI 3, let us know in the comments below.