Introduction to WinUI 3 Desktop Development

#beginners #programming #dotnet #csharp

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.
After installing, select the "Visual Studio Community" from the list and select the toolchains as shown in the below image to install them.

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,

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

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.

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

Project Structure Breakdown

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.

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.

<!-- 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,

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

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

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.

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

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

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