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
andApp.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 calledMainWindow.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 forMainWindow.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 aStackPanel
(we'll talk aboutPanels
later). - The
Button
has ax:Name
property andmyButton
as its value and aClick
event handler and its value asmyButton_Click
and it'sContent
property set toClick Me
. - And in the Code-Behind, we defined a method for
Click
event handler namedmyButton_Click
where it is triggered, it'll change theContent
property of theButton
toClicked
. 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'sContent
has been changed toClicked
as we defined in theMainWindow.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 whenIncrementButton
is clicked and it increments thecount
value and sets the count value in theDisplayTextBlock
. The same applies forDecrementButton
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 👋.
Top comments (2)
Why to choose win ui 3 instrad or maui? Are there any pros / cons?
One of the major drawback of using MAUI is the lack or restriction of using UI controls.
If you see the Sample Gallery App (the link is at the end of the blog), you'll notice that the WinUI 3 has more UI controls than MAUI offers.
Also, Win UI has access to all of the Windows API's (win32). But MAUI restricts majority of those coz due to the nature of being cross platform.
Also MAUI restricts the usage of Community libraries like "Windows Community Toolkit"
At the end of the day, it's totally up to you whether to choose MAUI or winui.