共用方式為


建立 WinUI 應用程式

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

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

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

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

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

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

所有筆記頁面

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

筆記頁面

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

建立 Visual Studio 專案

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

  • 專案名稱

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

  • Windows 應用程式 SDK

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

這很重要

如果你之前沒建立過 WinUI 專案,請依照 「開始開發 Windows 應用程式 」中的步驟,確保你的開發環境和 Visual Studio 專案設定正確。

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

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

小提示

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