WinUI 3 现代 Windows 应用开发

WinUI 3 是微软最新的原生 Windows UI 开发框架，它是 Windows UI Library 的第三个版本，为 Windows 10 和 Windows 11 提供现代化的用户界面控件和样式。

核心特性

现代化 UI：提供符合 Fluent Design 设计语言的现代化控件
跨平台兼容：支持 Windows 10 1809 及以上版本
高性能：基于 DirectX 渲染，提供流畅的用户体验
XAML 支持：使用声明式 XAML 语法构建用户界面
C# 开发：支持 C# 和 .NET 生态系统
热重载：支持 XAML 热重载，提升开发效率

系统要求

Windows 10 版本 1809 (内部版本 17763) 或更高版本
Visual Studio 2019 16.10 或更高版本
Windows 10 SDK 10.0.19041.0 或更高版本
.NET 5 或更高版本

安装与配置

安装 Visual Studio 扩展

打开 Visual Studio Installer
修改 Visual Studio 2019/2022
选择”单个组件”选项卡
搜索并安装以下组件：
- Windows UI Library 3
- Windows 10 SDK (10.0.19041.0 或更高版本)
- C++ (v143) Universal Windows Platform tools

创建 WinUI 3 项目


# 使用 Visual Studio 创建项目
# 1. 文件 -> 新建 -> 项目
# 2. 选择 "WinUI 3 应用" 模板
# 3. 配置项目名称和位置

项目结构


MyWinUIApp/
├── App.xaml                 # 应用程序定义
├── App.xaml.cs              # 应用程序代码
├── MainWindow.xaml          # 主窗口 UI
├── MainWindow.xaml.cs       # 主窗口代码
├── Package.appxmanifest     # 应用清单
├── Properties/
│   └── PublishProfiles/     # 发布配置
└── Assets/                  # 应用资源
    ├── LockScreenLogo.scale-200.png
    ├── SplashScreen.scale-200.png
    └── Square150x150Logo.scale-200.png

基础使用

创建主窗口


<!-- MainWindow.xaml -->
<Window
    x:Class="MyWinUIApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyWinUIApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="Hello, WinUI 3!" 
                       Style="{StaticResource TitleTextBlockStyle}"
                       HorizontalAlignment="Center"/>
            <Button x:Name="myButton" 
                    Click="myButton_Click"
                    Content="Click me"/>
        </StackPanel>
    </Grid>
</Window>


// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
 
namespace MyWinUIApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }
 
        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Clicked!";
        }
    }
}

应用程序入口


// App.xaml.cs
using Microsoft.UI.Xaml;
 
namespace MyWinUIApp
{
    public partial class App : Application
    {
        private Window m_window;
 
        public App()
        {
            this.InitializeComponent();
        }
 
        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }
    }
}

UI 控件

基础控件


<!-- 按钮 -->
<Button Content="Primary Button" 
        Style="{StaticResource AccentButtonStyle}"/>
 
<!-- 文本框 -->
<TextBox PlaceholderText="Enter text here"/>
 
<!-- 复选框 -->
<CheckBox Content="I agree to the terms"/>
 
<!-- 单选按钮 -->
<RadioButton Content="Option 1" GroupName="Options"/>
<RadioButton Content="Option 2" GroupName="Options"/>
 
<!-- 滑块 -->
<Slider Minimum="0" Maximum="100" Value="50"/>

布局控件


<!-- 网格布局 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Top Left"/>
    <TextBlock Grid.Row="0" Grid.Column="1" Text="Top Right"/>
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Bottom Left"/>
    <TextBlock Grid.Row="1" Grid.Column="1" Text="Bottom Right"/>
</Grid>
 
<!-- 堆叠面板 -->
<StackPanel Orientation="Vertical" Spacing="10">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

导航控件


<!-- 导航视图 -->
<NavigationView x:Name="NavView" 
                PaneDisplayMode="Left"
                IsSettingsVisible="True">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="Home" Tag="home"/>
        <NavigationViewItem Icon="Document" Content="Documents" Tag="documents"/>
        <NavigationViewItem Icon="People" Content="People" Tag="people"/>
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame"/>
</NavigationView>

数据绑定

简单绑定


<StackPanel>
    <TextBox x:Name="InputTextBox" 
             Text="{x:Bind ViewModel.InputText, Mode=TwoWay}"/>
    <TextBlock Text="{x:Bind ViewModel.InputText, Mode=OneWay}"/>
</StackPanel>


public class MainViewModel : INotifyPropertyChanged
{
    private string _inputText;
    
    public string InputText
    {
        get => _inputText;
        set
        {
            _inputText = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(InputText)));
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
}

集合绑定


<ListView ItemsSource="{x:Bind ViewModel.Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Description}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

样式和主题

定义样式


<Page.Resources>
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource SystemAccentColor}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Padding" Value="20,10"/>
        <Setter Property="CornerRadius" Value="5"/>
    </Style>
</Page.Resources>

使用主题资源


<Button Style="{StaticResource CustomButtonStyle}" 
        Content="Custom Button"/>

异步编程


private async void LoadDataAsync()
{
    try
    {
        // 显示加载指示器
        LoadingIndicator.IsActive = true;
        
        // 异步加载数据
        var data = await LoadDataFromServiceAsync();
        
        // 更新 UI
        DataListView.ItemsSource = data;
    }
    catch (Exception ex)
    {
        // 显示错误信息
        var dialog = new ContentDialog
        {
            Title = "Error",
            Content = ex.Message,
            CloseButtonText = "OK"
        };
        await dialog.ShowAsync();
    }
    finally
    {
        LoadingIndicator.IsActive = false;
    }
}

应用生命周期


public partial class App : Application
{
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        // 应用启动
    }
    
    protected override void OnSuspending(object sender, SuspendingEventArgs e)
    {
        // 应用挂起
    }
    
    protected override void OnResuming(object sender, object e)
    {
        // 应用恢复
    }
}

打包和部署

创建应用包

右键点击项目 -> 发布 -> 创建应用包
选择发布方法（Microsoft Store 或旁加载）
配置证书和版本信息
生成应用包

旁加载安装


# 使用 PowerShell 安装应用包
Add-AppxPackage -Path "MyApp.msix"

最佳实践

性能优化

虚拟化列表：使用 ListView 和 GridView 的虚拟化功能
延迟加载：使用 x:DeferLoadStrategy="Lazy" 延迟加载 UI 元素
异步操作：避免在 UI 线程上执行耗时操作
内存管理：及时释放不需要的资源

设计原则

遵循 Fluent Design：使用微软的设计语言和指导原则
响应式设计：适配不同的屏幕尺寸和方向
无障碍访问：确保应用对所有用户都可访问
本地化：支持多语言和区域设置

常见问题

Q: WinUI 3 与 UWP 有什么区别？

A: WinUI 3 是 UWP 的现代化版本，提供了更好的性能和更丰富的控件。

Q: 如何调试 WinUI 3 应用？

A: 使用 Visual Studio 的调试工具，支持断点、变量监视等功能。

Q: 如何发布到 Microsoft Store？

A: 需要注册开发者账户，创建应用包并提交审核。