Getting Started with WinUI

Welcome to the Windows UI Library (WinUI)! This guide will help you set up your development environment and build your first WinUI application.

What is WinUI?

WinUI is the native platform UI framework for building modern, beautiful, and performant Windows applications. It's designed to provide a consistent and rich user experience across all Windows devices.

Prerequisites

Before you begin, ensure you have the following installed:

Visual Studio 2022 (version 17.0 or later) with the ".NET Desktop Development" workload.
Windows 10, version 1903 (Build 18362) or later or Windows 11.
Windows SDK (version 10.0.18362.0 or later).

Setting Up Your Development Environment

The easiest way to get started is by using Visual Studio. Follow these steps:

Install Visual Studio: If you haven't already, download and install Visual Studio 2022 from the official Microsoft website.
Install the WinUI Extension: Open Visual Studio Installer, click "Modify" on your Visual Studio installation, and ensure the ".NET Desktop Development" workload is selected. Then, go to the "Individual components" tab and search for "Windows App SDK" or "WinUI". Install the latest version available.
Create a New Project: In Visual Studio, go to File > New > Project.... Search for "Blank App, Packaged (WinUI 3)". Select it and click "Next".
Configure Your Project: Give your project a name (e.g., "MyFirstWinUIApp") and choose a location. Click "Create".

Your First WinUI Application

Once your project is created, you'll see a basic structure. The main entry point for your app is typically in App.xaml and App.xaml.cs, and the main window content is in MainWindow.xaml and MainWindow.xaml.cs.

Let's add a simple button to MainWindow.xaml:

<!-- MainWindow.xaml -->
<Window ...>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="10">
        <TextBlock Text="Hello, WinUI!" FontSize="24" HorizontalAlignment="Center"/>
        <Button Content="Click Me!" Click="Button_Click"/>
    </StackPanel>
</Window>

Now, let's handle the button click in MainWindow.xaml.cs:

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

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

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // Display a simple message dialog
        var dialog = new ContentDialog()
        {
            Title = "Button Clicked",
            Content = "You clicked the button!",
            CloseButtonText = "OK",
            XamlRoot = this.Content.XamlRoot, // Required for ContentDialog
        };
        dialog.ShowAsync();
    }
}

Press F5 or click the "Start" button in Visual Studio to build and run your application. You should see a window with text and a button. Clicking the button will display a message dialog.

Key Concepts

XAML: A declarative markup language used for defining the user interface.
C# Code-Behind: C# code that handles events and application logic.
Controls: Reusable UI elements like Buttons, TextBlocks, and Layout Panels.
Packaged Apps: WinUI apps are typically packaged using MSIX for modern deployment.

Next Steps

Explore the rich set of WinUI controls, learn about data binding, styling, and how to deploy your application. Visit the official WinUI documentation for in-depth guides and API references.

Explore WinUI Controls