共用方式為


建立 WinUI 應用程式

本教學課程系列示範如何使用 XAML 和 C# 建立 WinUI 3 應用程式。 您將建立的應用程式是記事應用程式,用戶可以在其中建立、儲存及載入多個筆記。 您可以從 GitHub 存放庫下載或檢視本教學課程的程式代碼。

在本教學課程中,您將瞭解如何:

  • 使用 XAML 標記來定義應用程式的使用者介面。
  • 透過 C# 程式代碼與 XAML 元素互動。
  • 從本機檔系統儲存和載入檔案。
  • 建立檢視並將其系結至數據。
  • 使用導覽在應用程式中的頁面來回移動。
  • 使用檔與範例應用程式等資源來建立您自己的應用程式。

您將使用 Visual Studio 2022 來建立應用程式,讓您可用來輸入筆記,並將它儲存至本機應用程式記憶體。 您可以在這裡找到此應用程式的原始碼。 應用程式會有兩個頁面:

  • NotePage - 用於編輯單一筆記的頁面。
  • AllNotesPage - 顯示所有已儲存筆記的頁面。

最終的應用程式如下所示:

所有筆記頁面

記事應用程式的最終螢幕快照,其中顯示三個儲存筆記。

筆記頁面

記事應用程式的最終螢幕快照,其中顯示新的空白附註。

建立 Visual Studio 專案

若要開始本教學課程,您必須使用 Blank App, Packaged (WinUI 3 in Desktop) C# 專案範本在 Visual Studio 中建立 WinUI 3 應用程式專案。 建立專案時,請使用下列設定:

  • 專案名稱

    這必須設定為 WinUINotes。 如果項目的名稱不同,您從本教學課程複製並貼上的程式代碼可能會導致建置錯誤。 這是因為 Visual Studio 會使用專案名稱作為應用程式程式代碼的預設 命名空間

  • Windows 應用程式 SDK

    本教學課程使用 Windows App SDK 1.7 新功能。 您必須確定 Windows App SDK NuGet 套件已更新為 1.7 版或更新版本。

這很重要

如果您之前尚未建立 WinUI 3 專案,請遵循 開始開發 Windows 應用程式 中的步驟,確定您的開發環境和 Visual Studio 專案已正確設定。

當您執行空白應用程式專案時(如 開始開發 Windows 應用程式中所述),您應該會看到如下所示的空白視窗:

具有標題列和空白內容區域的附註應用程式視窗。

小提示

建置 Windows 應用程式時,您經常會參考 API 參考檔和概念檔。 在本教學課程中,您將會看到文字中的內嵌連結,以及標示為「深入了解檔:」的群組。 這些連結是選擇性的;您不需要遵循它們來完成本教學課程。 如果您想要記下當您開始建立自己的應用程式時所需的資訊的位置,則會提供它們。