DEV Community

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

Posted on

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 AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

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

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay