Introduction to WinUI 3 Desktop Development
Tags: beginners, programming, dotnet, csharp
Published: 2023-04-03 16:59:56

## Introduction

Hey devs, Welcome to my blog. In this blog, I'm going to expose you to the world of Fluent Windows Application Development (WinUI 3). At the end of this _tutorial blog_, you will be able to create a simple desktop application that uses the Windows App SDK to present a wonderful Fluent UI and better performance. Let's get started.

---


## Prerequisites

Make sure you meet those below requirements to get started.

- A Machine with Windows 11 (Windows 10 works too).
- Basic knowledge in C# and .NET (Optional)
- Willingness to learn.
- Consistency.

--- 

## Getting Started

- First of all, install the latest release of Visual Studio Community Edition from [here](https://visualstudio.microsoft.com/#vs-section).
- After installing, select the *"Visual Studio Community"* from the list and select the toolchains as shown in the below image to install them.

![VS Install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx9l8mx3ikmwrs448b2w.png)

--- 

## Grasp some basics

WinUI 3 is the native UI platform component that ships with the Windows App SDK. It is supported by the latest .NET6. The whole concept of this SDK is to create powerful Windows applications with fluent UI in mind. The Windows App SDK 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.

--- 

## Let's develop our app!


- First of all, Open Visual Studio and click on "Create New Project" as shown below,

![Create New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxcuk8vc5112oybzcbux.png)


- Then search for "Blank App, Packaged (WinUI3 in Desktop)", select it and click on "Next" as shown below,


![Select Project Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zjf4wht2ck39jhandv0.png)

- Now we want to name our solution. The **solution file (.sln)** basically contains a collection of projects or assemblies. You can name your project anything you want. I'm using the name "TestApp" here.

Then click on the checkbox below and click on "Create" button.

![Naming the Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9desueu08paldj430gy.png)

- If you have the same as below image, then you're good to go.

![Project Development Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gmbbqzej2zua78veh8t.png)

--- 

## Project Structure Breakdown


![Project Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mc8kail1hdmkgnhxoxfx.png)

- If we look at your project structure, there will be two files called `MainWindow.xaml` and `App.xaml` (I'll explain about other files in future blogs).
- Basically, when the app is launched, the "App.xaml" will get triggered first and it launches a new instance of `MainWindow.xaml` which is our home page in our case. 
- If your click on the _arrow symbol_ on the `MainWindow.xaml` file, there will be an another file called `MainWindow.xaml.cs`.

![Xaml Cs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmgf990e08td1dkpn1pb.png)

- Umm, so what are those two files? The `MainWindow.xaml` is the file where you define the UI of the application. It uses the XAML Markup Language which is designed by Microsoft for defining beautiful UI's without any hassle.
- The `MainWindow.xaml.cs` is called the *"Code-Behind"* file for `MainWindow.xaml` which contains all the logic to be implemented on the UI. 

## 

- If you open the `MainWindow.xaml` file, there will be something similar to the below code.

```xml
<!-- Copyright (c) Microsoft Corporation and Contributors. -->
<!-- Licensed under the MIT License. -->

<Window
    x:Class="TestApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

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

## 

- If you open the `MainWindow.xaml.cs` file, it'll look something like this,

```csharp
// Copyright (c) Microsoft Corporation and Contributors.
// Licensed under the MIT License.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace TestApp
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Clicked";
        }
    }
}
```

- According to the above code, a `Button` is defined inside a `StackPanel` (we'll talk about `Panels` later). 
- The `Button` has a `x:Name` property and `myButton` as its value and a `Click` event handler and its value as `myButton_Click` and it's `Content` property set to `Click Me`.
- And in the _Code-Behind_, we defined a method for `Click` event handler named `myButton_Click` where it is triggered, it'll change the `Content` property of the `Button` to `Clicked`. Simple isn't it?
- Let's run our app to see it in action. Click on the "TestApp (Package)" button to build and run the app.

![Build Run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnzaqbdu4a9337pyhgof.png)

- Tada! You've built and ran your first WinUI 3 App.

![App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux4r4sidtwvbifrqlbqi.png)

- When you click on the `Click Me` button, you see that the Button's `Content` has been changed to `Clicked` as we defined in the `MainWindow.xaml.cs`.

--- 

## Let's make a simple counter app

- So, we got a basic knowledge on how WinUI 3 app works. We can now make a simple "counter" app that increments and decrements the count.
- For that we need two `Button`. One for incrementing and another for decrementing.
- We also need a `TextBlock` to display the current count value.

##

- Let's get started with defining the UI. Simply copy paste the below code in your `MainWindow.xaml` file.

```xml
<Window
    x:Class="TestApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="20">
        
        
        <Button x:Name="IncrementButton" Click="IncrementButton_Click">
            +
        </Button>

        <TextBlock x:Name="DisplayTextBlock" Width="100" Text="0" TextAlignment="Center"/>

        <Button x:Name="DecrementButton" Click="DecrementButton_Click">
            -
        </Button>

    </StackPanel>
</Window>
```

- Also, copy paste the below code to your `MainWindow.xaml.cs` file.

```csharp
// Copyright (c) Microsoft Corporation and Contributors.
// Licensed under the MIT License.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace TestApp
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {

        private int count = 0;

        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void IncrementButton_Click(object sender, RoutedEventArgs e)
        {
            count++;
            DisplayTextBlock.Text = count.ToString();
        }

        private void DecrementButton_Click(object sender, RoutedEventArgs e)
        {
            count--;
            DisplayTextBlock.Text = count.ToString();
        }
    }
}
```

## 

- We basically defined two buttons and their `Click` event handlers in the "Code-Behind" file.
- The `IncrementButton_Click` will trigger when `IncrementButton` is clicked and it increments the `count` value and sets the count value in the `DisplayTextBlock`. The same applies for `DecrementButton` too.

## 

- Let's run our app by clicking the "TestApp (Package)" button on the top.

- Hooray, we built our fully working counter app.


![Counter App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ym1wm1oraglhrgdsmu.gif)

--- 

## Conclusion 

Hope you got a fair idea on WinUI 3 apps and if you find this blog interesting, consider following me and subscribe to my future blogs. See you guys in a next interesting blog 👋.


--- 

## Next Steps

- Learn C# [[Link](https://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/tutorials/)]
- Learn XAML [[Link](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-6.0)]
- Learn WinUI 3 [[Link](https://learn.microsoft.com/en-us/windows/apps/winui/winui3/)]
- Explore all the UI controls available with the WinUI 3 Controls Gallery app [[Link](https://www.microsoft.com/store/productId/9P3JFPWWDZRC)]