Create Your First Windows App with WinUI

Introduction

Welcome to the Windows App SDK! This guide will walk you through the process of creating your very first application using WinUI 3, Microsoft's modern UI platform for Windows. We'll cover project setup, basic UI elements, and how to run your app.

The Windows App SDK provides a unified set of APIs and tools for building modern Windows applications. WinUI 3 is the latest iteration of Microsoft's native UI framework, offering a rich set of controls and a flexible styling system.

Prerequisites

• Windows 10, version 1903 (build 18362) or later.
• Visual Studio 2022 version 17.0 or later.
• Windows App SDK prerequisites installed.

Step 1: Create a New Project

Step 2: Explore the Project Structure

Once the project is created, you'll see a typical Visual Studio project structure. Key files include:

• App.xaml: Defines the application's startup and global resources.
• App.xaml.cs: The code-behind for App.xaml, handling application lifecycle events.
• MainWindow.xaml: Defines the UI for your main window.
• MainWindow.xaml.cs: The code-behind for MainWindow.xaml.
• Package.appxmanifest: The application's manifest file, containing metadata.

Step 3: Design Your UI (MainWindow.xaml)

Open MainWindow.xaml. This file uses XAML (Extensible Application Markup Language) to define the user interface. By default, it contains a simple layout with a header and a content area.

Let's add a button and a text block to our main window. Replace the existing content within the <Grid> element with the following:

<Grid>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Hello, WinUI!" FontSize="32" Margin="0,0,0,20" />
        <Button x:Name="MyButton" Content="Click Me" Click="MyButton_Click" />
    </StackPanel>
</Grid>

Step 4: Add Event Handling (MainWindow.xaml.cs)

Now, let's add the code to handle the button click. Open MainWindow.xaml.cs and add the following method to the MainWindow class:

private void MyButton_Click(object sender, RoutedEventArgs e)
{
    // Change the text of the TextBlock when the button is clicked
    var textBlock = (TextBlock)FindName("MyTextBlock"); // Assuming you named the TextBlock, or access it differently
    if (textBlock != null)
    {
        textBlock.Text = "Button Clicked!";
    }
    else
    {
        // If the TextBlock wasn't found, create a new one or log an error
        // For simplicity, we'll just update the TextBlock directly if it exists in the XAML.
        // In the XAML above, we don't have a TextBlock named "MyTextBlock", so let's add one there.
    }
}

<Grid>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="MyTextBlock" Text="Hello, WinUI!" FontSize="32" Margin="0,0,0,20" />
        <Button x:Name="MyButton" Content="Click Me" Click="MyButton_Click" />
    </StackPanel>
</Grid>

Step 5: Run Your Application

To run your application:

1. Set your project as the startup project.
2. Select the desired target framework (e.g., "x64" or "x86").
3. Click the "Start" button (or press F5).

Your application window should appear with the text "Hello, WinUI!" and a "Click Me" button. Clicking the button will change the text to "Button Clicked!".