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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay