生成 WinUI 3 笔记应用

本教程系列演示如何使用 XAML 和 C# 创建 WinUI 应用。 你将创建的应用是一个便笺应用,用户可以在其中创建、保存和加载多个笔记。 可以从 GitHub 存储库下载或查看本教程的代码。

可以在生成并运行空白项目后从此处开始。 这是使用 Visual Studio 的 WinUI 3 基础知识的分步介绍;无需 AI 编码助手或 MVVM 工具包。

本教程中,您将学习如何:

  • 使用 XAML 标记定义应用的用户界面。
  • 通过 C# 代码与 XAML 元素交互。
  • 保存并加载本地文件系统中的文件。
  • 创建视图并将其绑定到数据。
  • 使用导航在应用程序中浏览各个页面。
  • 使用文档和示例应用等资源创建自己的应用。

你将创建一个应用,该应用可用于输入笔记并将其保存到本地应用存储。 该应用将有两个页面:

  • NotePage - 用于编辑单个笔记的页面。
  • AllNotesPage - 显示所有已保存笔记的页面。

最终的应用程序如下所示:

AllNotesPage

备注应用的最终屏幕截图,其中显示了三个保存笔记。

NotePage

备注应用的最终屏幕截图,其中显示了新的空白笔记。

创建 Visual Studio 项目

按照快速入门中的Visual Studio路径操作:创建并运行 WinUI 3 项目进行工具安装和项目创建。 使用带有以下本教程专用设置的打包好的 C# 项目:

  • Project 名称

    此属性必须设置为 WinUINotes。 如果project的名称不同,则从本教程复制和粘贴的代码可能会导致生成错误。 这是因为Visual Studio将project名称用作应用代码的默认 namespace。

  • Windows 应用 SDK

    本教程使用 Windows 应用 SDK 1.7 及更高版本中提供的功能。 确保 Windows 应用 SDK NuGet 包已更新到版本 1.7 或更高版本。

继续之前,请先构建并启动空白 WinUINotes 项目。 应会看到如下所示的空窗口:

带有标题栏和空内容区域的备注应用窗口。

小窍门

生成 Windows 应用时,经常引用 API 参考文档和概念文档。 在本教程中,您会看到文本中的内联链接,以及标有“在文档中了解更多:”的链接组。 这些链接是可选的;无需遵循它们即可完成本教程。 它们已经提供,以便您在开始创建自己的应用程序时记下需要的信息出处。