Windows App SDK UI Guide

Introduction

The Windows App SDK provides modern UI APIs that enable you to build fluent, high‑performance Windows applications using WinUI 3, XAML, and the latest design language.

Getting Started with WinUI 3

To add WinUI 3 to your project, include the Microsoft.WindowsAppSDK NuGet package and initialize the SDK in App.xaml.cs:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Navigation;

public sealed partial class App : Application
{
    public App()
    {
        this.InitializeComponent();
        Microsoft.WindowsAppSDK.WinUI.AppInstance.Start(this);
    }

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        m_window = new MainWindow();
        m_window.Activate();
    }

    private Window m_window;
}

Common UI Patterns

Sample: Responsive Layout

This sample demonstrates a responsive UI that adapts to window width using AdaptiveTrigger and VisualStateManager:

<Window
    x:Class="ResponsiveApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ResponsiveApp">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="NavPane.ColumnSpan" Value="2"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="NavPane.ColumnSpan" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <StackPanel x:Name="NavPane" Grid.Column="0" Background="{ThemeResource SystemControlBackgroundAccentBrush}" Width="200">
            <Button Content="Home" Click="OnHomeClicked"/>
            <Button Content="Settings" Click="OnSettingsClicked"/>
        </StackPanel>

        <Frame x:Name="ContentFrame" Grid.Column="1"/>
    </Grid>
</Window>