打造一個 WinUI 3 筆記應用程式

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

等你能建立並執行一個空白專案後,從這裡開始。 這是使用 Visual Studio 逐步介紹 WinUI 3 基礎知識;不需要 AI 編碼助理或 MVVM 工具包。

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

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

你會建立一個應用程式,用來輸入筆記並儲存到本地應用程式儲存空間。 應用程式會有兩個頁面:

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

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

所有筆記頁面

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

筆記頁面

記事應用程式的最終螢幕截圖,顯示新的空白筆記。

建立 Visual Studio 專案

請依照 Visual Studio 快速入門的路徑:建立並執行 WinUI 3 專案,進行工具安裝與專案建立。 使用包含以下教學專用設定的 C# 套件:

  • 專案名稱

    這必須設定為 WinUINotes。 如果 project 名稱不同,你從這個教學複製貼上的程式碼可能會導致建置錯誤。 這是因為 Visual Studio 使用 project 名稱作為你應用程式程式碼的預設 namespace。

  • Windows 應用程式 SDK

    本教學使用了 Windows 應用程式 SDK 1.7 及更新版本中可用的功能。 請確保 Windows 應用程式 SDK NuGet 套件已更新至 1.7 或更新版本。

先建置並啟動空白 WinUINotes 專案再繼續。 你應該會看到一個空視窗,長這樣:

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

小提示

建置 Windows 應用程式時,您經常會參考 API 參考檔和概念檔。 在本教學課程中,您將會看到文字中的內嵌連結,以及標示為「文件中詳細介紹:」的群組。 這些連結是選擇性的;您不需要遵循它們來完成本教學課程。 它們是為了讓您在開始建立自己的應用程式時知道從哪裡找到所需資訊而提供的,以便您能記下。