通过

教程：使用 GitHub Copilot 生成 Windows 应用

在本教程中，在代理模式下使用 GitHub Copilot 生成完整的 WinUI 3 应用— 一个包含备注列表的简单 笔记应用 、添加和删除条目的功能以及设置页面。 你将准确看到每个步骤中需要使用哪些指令，以及 WinUI 3 插件和 Learn MCP 服务器如何在整个过程中始终保持 Copilot 的准确性。

  • 使用 Copilot 搭建 WinUI 3 项目基架
  • 使用 Copilot 生成 XAML UI
  • 使用 Copilot 添加业务逻辑
  • 使用 Learn MCP 服务器添加 Windows 通知
  • 使用 winapp CLI 打包应用

先决条件

第 1 部分：搭建项目基架

创建 WinUI 项目

创建新的 WinUI 3 项目：在 Visual Studio 中，选择 “文件>新建>项目”，按 WinUI 进行筛选，然后选择 “WinUI 空白应用”（打包） C# 模板。 将项目 NotesApp 命名并打开它。

打开 Copilot 代理模式并搭建结构基架

在 Visual Studio 中打开 Copilot 聊天面板并切换到 代理模式。 然后输入：

“我有一个名为 NotesApp 的新空白 WinUI 3 项目。 使用以下结构设置 MVVM 体系结构：具有 NavigationView 的 MainWindow、三页（备注、收藏夹、设置）、具有基本 ViewModel 类和 NotesViewModel 的 ViewModels 文件夹，以及具有 Id、标题、内容和 CreatedAt 属性的 Note 模型的 Models 文件夹。 使用 CommunityToolkit.Mvvm。”

Copilot 将创建文件夹结构，添加 CommunityToolkit.Mvvm NuGet 包引用，生成基类，并连接 NavigationView。 查看输出 - 如果有任何问题，请让 Copilot 在同一聊天会话中更正它。

小窍门

如果 Copilot 生成 Windows.UI.Xaml 命名空间而不是 Microsoft.UI.Xaml，则 WinUI 3 插件的自定义指令应捕获此问题。 如果看到它，提示 ：“修复 Windows.UI.Xaml 的任何实例 — 这是 WinUI 3 项目，因此所有 XAML 命名空间都应使用 Microsoft.UI.Xaml。

第 2 部分：生成 UI

生成“备注”页

“为”备注“页生成 XAML。 它应该有一个 ListView，其中显示标题和内容预览的截断部分，底部有一个用于添加新笔记的文本框和按钮，并且每个项目上都有一个“删除”按钮。 将其绑定到 NotesViewModel。 采用 WinUI 3 控件和 Fluent Design 间距。

Copilot 生成绑定到 ViewModel 的 XAML。 要求它根据需要调整样式或布局 ， 例如：

“使列表项使用带有微妙阴影的卡片样式，类似于 WinUI 库的卡片示例。

生成“设置”页

“生成具有深色/浅色主题切换开关的”设置“页，以及一个带有确认对话框的”清除所有笔记“按钮。 使用 ContentDialog 进行确认 ， 而不是 MessageDialog。

WinUI 3 插件的指令引导 Copilot 使用 ContentDialog（正确的 WinUI 3 方法），远离已弃用的 MessageDialog 方法。

第 3 部分：添加业务逻辑

实现笔记持久性

“使用 System.Text.Json 在 NotesViewModel 中实现笔记持久性，以序列化和反序列化 Notes 集合到 ApplicationData.Current.LocalFolder 中的文件。 在启动时加载笔记，并在集合发生更改时保存。

Copilot 生成加载/保存逻辑。 请求它添加错误处理：

将 try/catch 添加到文件操作，并将错误记录到调试输出中。

实现主题切换

“在 SettingsViewModel 中实现主题切换。 切换发生更改时，使用正确的 WinUI 3 方法更新应用程序主窗口上的 RequestedTheme。

第 4 部分：添加 Windows 通知

Windows 通知需要包标识。 首先，使用 winapp CLI 进行设置：

winapp create-debug-identity --publisher "CN=NotesApp"

现在，请 Copilot 添加在保存笔记时触发的通知：

添加一个 Windows 应用通知，当笔记成功保存到磁盘时，该通知将显示“已保存笔记”的提示信息，并将笔记标题作为副标题显示。 使用 Windows App SDK 的 AppNotificationManager。

连接 Learn MCP 服务器后，Copilot 可以查找当前 AppNotificationBuilder API 并生成正确的通知代码。 它应生成如下内容：

var notification = new AppNotificationBuilder()
    .AddText("Note saved")
    .AddText(note.Title)
    .BuildNotification();
AppNotificationManager.Default.Show(notification);

第 5 部分：打包应用

准备好分发或发布到 Microsoft 应用商店时，请生成正确的 MSIX 包：

winapp pack --output ./publish

这会生成一个已签名的 MSIX 包，可供旁加载或应用商店提交。 请求 Copilot 获取有关更新包清单的帮助：

“向我展示如何更新 Package.appxmanifest 以设置用于应用商店提交的显示名称、说明和发布者。”

总结

你已使用以下技术构建一个完整的 WinUI 3 便笺应用：

  • 用于基架、UI 生成和业务逻辑的 Copilot 代理模式
  • WinUI 3 插件 ，使 Copilot 在整个过程中保持新式、正确的 API
  • 了解 MCP 服务器 以查找 Windows 应用 SDK 通知 API
  • 用于包标识和 MSIX 打包的 winapp CLI

可选：将设备上的 AI 添加到应用

笔记应用功能齐全，但你可以通过添加完全在用户设备上运行的 AI 功能来进一步增强它。 Foundry Local 使这一点变得非常简单：它在本地运行语言模型并公开与 OpenAI 兼容的 API。

安装 Foundry Local 并下载模型

winget install Microsoft.AIFoundry.Local
foundry model run phi-4-mini

模型一启动，它就开始侦听 http://localhost:5272/openai/v1。

添加 NuGet 包

dotnet add package Azure.AI.OpenAI

向“备注”页添加“汇总”按钮

询问 Copilot：

“将”汇总“按钮添加到”备注“页。 单击后，它应使用 Azure.AI.OpenAI 包将所选笔记的内容发送到本地 AI 终结点 http://localhost:5272/openai/v1 ，并在 ContentDialog 中显示摘要。 模型名称为 phi-4-mini。

Copilot 生成 AzureOpenAIClient 调用和对话框 — OpenAI 兼容的 API 意味着代码看起来与云 API 调用完全相同，只是指向本地主机。

var client = new AzureOpenAIClient(
    new Uri("http://localhost:5272/openai/v1"),
    new ApiKeyCredential("foundry-local"));

var completion = await client.GetChatClient("phi-4-mini")
    .CompleteChatAsync($"Summarize this note in 2 sentences: {note.Content}");

用户看到的

不需要 Internet 连接。 无 API 密钥。 该模型在其电脑上运行 - 快速、专用和免费。

小窍门

对于面向 Copilot+ 电脑的应用，可以将 Foundry Local 替换为 Phi 硅，以直接使用 NPU，从而实现更快速的推理。 API 图面不同（Windows AI API 而不是 OpenAI 兼容），但 Copilot 可以帮助你进行切换。

使用 Copilot 现代化或移植 Windows 应用

  • Last updated on