DEV Community

Cover image for A tutorial on WinUI 3 (2025)
Mario Rosell
Mario Rosell

Posted on

1

A tutorial on WinUI 3 (2025)

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...

Installation

Requirements

We need a few things to get started:

  1. Visual Studio Community 2022
  2. A Windows 10 or 11 machine

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:


Screenshot of Visual Studio with a new WinUI project opened,


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>
Enter fullscreen mode Exit fullscreen mode

Let's analyze this program:

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

You can try other elements (Like TextBox])
Here is the full list of elements, if you want

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay