Framework

WinUI 3

Overview

WinUI 3 is a modern UI framework for Windows developed by Microsoft. Provided as part of the Windows App SDK, it enables building native desktop applications for Windows 10 and Windows 11.

Details

WinUI 3 is the native user interface platform for Windows and serves as a core component of the Windows App SDK. Designed as an independent framework from UWP (Universal Windows Platform), it supports both Win32 and UWP application models. Built on the Fluent Design System foundation, it provides modern UI controls that fully support the latest Windows 11 design language. Development is possible with C# or C++, and XAML enables declarative UI definition for highly productive development. AOT (Ahead-of-Time) compilation support achieves reduced startup times and memory usage. Enhanced features like improved tab tear-out functionality in TabView controls support the latest desktop UX patterns. It runs on Windows 10 version 1809 and later, and supports distribution through Microsoft Store. WinUI 3 represents Microsoft's future direction for Windows native application development, decoupling UI platform from the OS to provide modern, flexible, and high-performance application development experience.

Advantages and Disadvantages

Advantages

• Modern UI: Fluent Design System and Windows 11 native design
• High Performance: Native code and AOT compilation support
• Rich Controls: Latest Windows UI controls and patterns
• Flexible Distribution: Microsoft Store or sideloading distribution
• OS Decoupling: Independent framework not dependent on Windows SDK
• Dual App Models: Supports both Win32 and UWP applications
• Microsoft Official Support: Continuous development and long-term support

Disadvantages

• Windows Only: Limited to Windows 10/11, no cross-platform support
• Learning Curve: Requires knowledge of XAML, C#, and Windows-specific concepts
• New Technology: Need to understand migration from UWP or differences from WPF
• Platform Limitation: Cannot deploy to mobile or web platforms
• Development Environment: Requires Visual Studio 2022 or later

Key Links

• WinUI 3 Official Site
• Windows App SDK
• WinUI 3 Documentation
• GitHub - microsoft/WindowsAppSDK
• WinUI 3 Project Templates
• WinUI Community Toolkit

Code Examples

Hello World Application

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

namespace HelloWinUI3
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello WinUI 3";
        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Clicked";
        }
    }
}

XAML UI Layout

<!-- MainWindow.xaml -->
<Window x:Class="HelloWinUI3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel Orientation="Vertical" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center">
            <TextBlock Text="Hello, WinUI 3!" 
                      FontSize="24" 
                      HorizontalAlignment="Center" 
                      Margin="0,0,0,20"/>
            
            <Button x:Name="myButton" 
                   Content="Click Me" 
                   Click="myButton_Click"
                   HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Window>

Data Binding (MVVM)

// ViewModels/MainViewModel.cs
using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.Input;
using System.Collections.ObjectModel;

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string title = "WinUI 3 App";

    [ObservableProperty]
    private string message = "Welcome to WinUI 3!";

    [ObservableProperty]
    private int clickCount = 0;

    public ObservableCollection<string> Items { get; } = new();

    [RelayCommand]
    private void IncreaseCounter()
    {
        ClickCount++;
        Message = $"Button clicked {ClickCount} times";
        Items.Add($"Click #{ClickCount} at {DateTime.Now:HH:mm:ss}");
    }

    [RelayCommand]
    private void ClearItems()
    {
        Items.Clear();
        ClickCount = 0;
        Message = "Items cleared!";
    }
}

Advanced UI Controls

<!-- TabView and NavigationView Example -->
<Grid>
    <NavigationView x:Name="NavigationViewControl" 
                   Header="WinUI 3 Demo App"
                   IsTabStop="False"
                   SelectionChanged="NavigationViewControl_SelectionChanged">
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Home" Content="Home" Tag="home" />
            <NavigationViewItem Icon="Document" Content="Documents" Tag="documents" />
            <NavigationViewItem Icon="Download" Content="Downloads" Tag="downloads" />
        </NavigationView.MenuItems>

        <TabView x:Name="MainTabView" 
                TabWidthMode="Equal"
                CanTearOutTabs="True"
                AddTabButtonClick="MainTabView_AddTabButtonClick"
                TabCloseRequested="MainTabView_TabCloseRequested">
            <TabView.TabItems>
                <TabViewItem Header="Tab 1">
                    <Grid Background="LightBlue">
                        <TextBlock Text="Content of Tab 1" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"/>
                    </Grid>
                </TabViewItem>
                <TabViewItem Header="Tab 2">
                    <Grid Background="LightGreen">
                        <TextBlock Text="Content of Tab 2" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"/>
                    </Grid>
                </TabViewItem>
            </TabView.TabItems>
        </TabView>
    </NavigationView>
</Grid>

Animations and Visual Effects

// Animated Button
private void AnimateButton()
{
    var scaleAnimation = ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("buttonScale", myButton);
    
    // Scale Animation
    var compositor = ElementCompositionPreview.GetElementVisual(myButton).Compositor;
    var scaleVector3 = compositor.CreateVector3KeyFrameAnimation();
    scaleVector3.InsertKeyFrame(0f, new Vector3(1.0f));
    scaleVector3.InsertKeyFrame(0.5f, new Vector3(1.1f));
    scaleVector3.InsertKeyFrame(1f, new Vector3(1.0f));
    scaleVector3.Duration = TimeSpan.FromMilliseconds(300);

    var visual = ElementCompositionPreview.GetElementVisual(myButton);
    visual.StartAnimation("Scale", scaleVector3);
}

File Operations and Storage

// File Selection and Access
private async void OpenFileButton_Click(object sender, RoutedEventArgs e)
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    
    // In WinUI 3, need to set window handle for picker
    var hWnd = WindowNative.GetWindowHandle(this);
    InitializeWithWindow.Initialize(openPicker, hWnd);
    
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".png");
    openPicker.FileTypeFilter.Add(".bmp");

    var file = await openPicker.PickSingleFileAsync();
    if (file != null)
    {
        var fileContent = await FileIO.ReadTextAsync(file);
        ContentTextBlock.Text = $"Opened: {file.Name}\nPath: {file.Path}";
    }
}

// Application Data Storage
private async void SaveData()
{
    var localSettings = ApplicationData.Current.LocalSettings;
    localSettings.Values["LastSavedTime"] = DateTime.Now.ToString();
    
    var localFolder = ApplicationData.Current.LocalFolder;
    var dataFile = await localFolder.CreateFileAsync("data.txt", 
        CreationCollisionOption.ReplaceExisting);
    
    await FileIO.WriteTextAsync(dataFile, "Hello from WinUI 3!");
}

Resources and Themes

<!-- App.xaml Resource Definitions -->
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </ResourceDictionary.MergedDictionaries>
        
        <!-- Custom Styles -->
        <Style x:Key="CustomButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource AccentButtonBackground}"/>
            <Setter Property="Foreground" Value="{ThemeResource AccentButtonForeground}"/>
            <Setter Property="CornerRadius" Value="8"/>
            <Setter Property="Padding" Value="16,8"/>
        </Style>
        
        <!-- Custom Colors -->
        <SolidColorBrush x:Key="CustomAccentBrush" Color="#007ACC"/>
    </ResourceDictionary>
</Application.Resources>