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:
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:
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>
Let's analyze this program:
- XML Version
- Make a window
- Boilerplate
- - 9. Schemas
- Set the title
- Blank line, does nothing
- Makes a new "Stack", that holds elements on the center of the screen, and aligns elements in a row
- Makes a button with the name
myButton
, that activates themyButton_click
method (declared on theMainAppWindow.xaml.cs
file) - - 15. Close tags
You can try other elements (Like TextBox
])
Here is the full list of elements, if you want
Top comments (0)