A tutorial on WinUI 3 (2025)

#dotnet #microsoft #tutorial #winui

WinUI is a modern, easy-to-use, yet powerful framework for Windows 10 & 11 used by Microsoft to build desktop apps.

In this tutorial, you will learn...

How to install WinUI in Visual Studio
Making your first app

Installation

Requirements

We need a few things to get started:

Installing the Workload

To get templates, better language support, and debugging options, we need
to install the Visual Studio workload.

Search for Visual Studio Installer on the Windows menu to do that, then,
click Modify, and (in the Workloads tab), check Windows Application Development, after that, click Install while Downloading.

Making your first app

After installing the workload, it's time to make our first app!

First, open Visual Studio and click Create new project.

Then, apply these filters:

Language: C#
Platform: Windows
Type: WinUI

Now, click on Blank App, Packaged (WinUI 3 on Desktop) and Next several times.

You should see something like this:

You may have noticed the .xaml files.

What is XAML

XAML (Short for eXtensible Application Markup Language) is a language similar, if not identical to XML

The main difference is that XAML is made to make GUIs instead of storing and transferring data between systems in a structured way.

In our project, if we go to the MainWindow.xaml file, we will see this:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="Tutorial.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Tutorial"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="Tutorial">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

Let's analyze this program:

XML Version
Make a window
Boilerplate
- 9. Schemas
Set the title
Blank line, does nothing
Makes a new "Stack", that holds elements on the center of the screen, and aligns elements in a row
Makes a button with the name myButton, that activates the myButton_click method (declared on the MainAppWindow.xaml.cs file)
- 15. Close tags