Windows App SDK & WinUI

Getting Started with WinUI

Welcome to WinUI, the native UI platform for building modern Windows applications. This guide will walk you through setting up your development environment and creating your first WinUI application.

Prerequisites

Before you begin, ensure you have the following installed:

• Visual Studio 2022: Version 17.x or later.
• .NET 6 SDK: Or a later version.
• Windows 10 (version 1903 or later) or Windows 11.

Installing the Necessary Workloads

Open Visual Studio Installer and modify your existing installation. Under the "Individual components" tab, make sure the following are selected:

• .NET desktop development workload.
• Universal Windows Platform development workload.

If you're creating a desktop application using the Windows App SDK, ensure the following are checked under the "Workloads" tab:

• Desktop development with C++ (if you plan to use C++).

Restart Visual Studio after installation.

Creating Your First WinUI Application

Using the Windows App SDK (Recommended for new development]

The Windows App SDK provides a unified set of APIs and tools for building modern Windows apps. It's the recommended approach for new WinUI development.

1. Open Visual Studio and create a new project.
2. Search for and select the "Blank App, Packaged (WinUI 3 in Desktop)" template.
3. Give your project a name (e.g., MyFirstWinUIApp) and choose a location.
4. Click "Create".

Visual Studio will generate a basic WinUI 3 application structure. You'll find your main application file (e.g., App.xaml and App.xaml.cs) and your main window (e.g., MainWindow.xaml and MainWindow.xaml.cs).

Running Your Application

Press F5 or click the "Start" button in Visual Studio to build and run your application. You should see a blank window.

Adding Your First Control

Open MainWindow.xaml and replace its content with the following simple layout:

<!-- MainWindow.xaml -->
<Window
    x:Class="MyFirstWinUIApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyFirstWinUIApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="My First WinUI App" Height="450" Width="800">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="20">
        <TextBlock FontSize="30" FontWeight="SemiBold">Hello, WinUI!</TextBlock>
        <Button Content="Click Me" Click="MyButton_Click"/>
    </StackPanel>
</Window>

Now, open MainWindow.xaml.cs and add the event handler for the button:

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;

namespace MyFirstWinUIApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void MyButton_Click(object sender, RoutedEventArgs e)
        {
            var messageDialog = new ContentDialog()
            {
                Title = "Button Clicked",
                Content = "You clicked the button!",
                CloseButtonText = "OK",
                XamlRoot = this.Content.XamlRoot,
            };
            messageDialog.ShowAsync();
        }
    }
}

Run your application again (F5). You should now see a "Hello, WinUI!" text and a button. Clicking the button will display a dialog box.

Next Steps

Congratulations on creating your first WinUI application! Here are some suggested next steps:

• Explore the WinUI Controls documentation to learn about available UI elements.
• Follow the Tutorials for guided examples of common tasks.
• Check out the Sample Applications to see WinUI in action.