建立「Hello, World!」UWP 應用程式 (XAML) 與 .NET 9

2025-05-06

本教學課程會教您如何使用 XAML、C# 和 .NET 9 搭配原生 AOT （預先時間）來建立 Windows 上通用 Windows 平臺（UWP）的簡單 “Hello， World！” 應用程式。在visual Studio Microsoft單一專案中，您可以建置可在所有支援的 Windows 10 和 Windows 11 版本上執行的應用程式。

您將在這裡瞭解如何：

在 Visual Studio 中建立以 .NET 9 為目標的新 UWP 專案。
撰寫 XAML 以變更起始頁面上的 UI。
在 Visual Studio 的本機桌面上執行專案。
當您按下按鈕時，請使用 SpeechSynthesizer 讓應用程式說話。

先決條件

什麼是通用 Windows 應用程式？
下載Visual Studio （和 Windows）。如果您需要幫助，請瞭解如何進行設定。
我們也假設您在 Visual Studio 中使用預設視窗配置。如果您變更預設配置，您可以使用 [重設窗口配置] 命令，在 [視窗] 功能表中重設它。

備註

本教學課程使用Visual Studio 2022。如果您使用不同版本的 Visual Studio，則看起來可能稍有不同。

步驟 1：在 Visual Studio 中建立新專案

啟動 Visual Studio。
從 [ 檔案] 功能表中，選取 [ 新增 > 專案 ] 以開啟 [ 新增專案 ] 對話方塊。
從 [專案類型] 下拉式清單中選擇 C# 和 [項目類型] 下拉式清單中的 UWP，以查看適用於 C# 開發人員的可用 UWP 專案範本清單，以篩選可用的範本清單。

（如果您沒有看到任何 UWP 範本，您可能會遺失用來建立 UWP 應用程式的元件。您可以從 Windows [開始] 選單開啟 Visual Studio 安裝程式 ，以重複安裝程式並新增 UWP 支援。如需詳細資訊，請參閱設定Visual Studio for UWP 開發。
選擇 UWP 空白應用程式 範本。

這很重要

請務必選取 UWP 空白應用程式 範本。如果您選取 UWP 空白應用程式（.NET Native） 範本，它會以 .NET Native 運行時間為目標，而不是 .NET 9。以 .NET Native 為目標的應用程式無法存取最新的 .NET 和 C# 功能或安全性和效能改善。如需這兩個專案類型差異的詳細資訊，請參閱使用適用於 .NET 9 和原生 AOT 的預覽 UWP 支援將 UWP 應用程式現代化。
選取 [下一步]，然後輸入 “HelloWorld” 作為 [項目名稱]。選取 ，創建。

備註

如果這是您第一次使用 Visual Studio，您可能會看到 [設定] 對話方塊，要求您啟用 開發人員模式。開發人員模式是一種特殊設定，可啟用特定功能，例如允許直接執行應用程式，而不只是從應用程式商店執行。如需詳細資訊，請參閱啟用您的裝置以進行開發。若要繼續進行本指南，請選取 [ 開發人員模式]，按兩下 [ 是]，然後關閉對話框。
[目標版本/最低版本] 對話框隨即出現。本教學課程的預設設定很好，因此請選取 [確定 ] 以建立專案。
當您的新項目開啟時，其檔案會顯示在右側的 [方案瀏覽器] 窗格中。您可能需要選擇 方案總管 索引標籤，而不是屬性或 GitHub Copilot 聊天 索引標籤，才能查看您的檔案。

雖然 UWP 空白應用程式 是最基本的範本，但它仍然包含許多檔案。這些檔案對於所有使用 C# 的 UWP 應用程式都很重要。您在 Visual Studio 中建立的每個 UWP 專案都包含這些專案。

檔案中有哪些內容？

若要檢視和編輯專案中的檔案，請按兩下方案總管中的檔案。展開 XAML 檔案，就像資料夾一樣，以查看其相關聯的程式代碼檔案。 XAML 檔案會在顯示設計介面和 XAML 編輯器的分割檢視中開啟。

備註

什麼是 XAML？可延伸應用程式標記語言（XAML）是用來定義應用程式使用者介面的語言。您可以手動輸入它，或使用 Visual Studio 設計工具建立。 .xaml 檔案具有包含邏輯的.xaml.cs程序代碼後置檔案。 XAML 和後置程式碼結合後，會形成一個完整的類別。如需詳細資訊，請參閱 XAML 概觀。

App.xaml 和 App.xaml.cs

App.xaml 是您宣告跨應用程式使用之資源的檔案。
App.xaml.cs是 App.xaml 的程式代碼後置檔案。如同所有程式代碼後置頁面，它包含一個呼叫InitializeComponent方法的建構函式。您不會撰寫 InitializeComponent 方法。它是由 Visual Studio 所產生，其主要目的是初始化 XAML 檔案中宣告的元素。
App.xaml.cs 是應用程式的進入點。
App.xaml.cs 也包含方法來處理應用程式的啟用（）和暫停（）。

「MainPage.xaml」

MainPage.xaml 是您為應用程式定義 UI 的位置。您可以使用 XAML 標記直接新增元素，也可以使用 Visual Studio 所提供的設計工具。
MainPage.xaml.cs是MainPage.xaml的程式代碼後置頁面。這是您新增應用程式邏輯和事件處理程式的位置。
這兩個檔案會一起定義名為 MainPage的新類別，該類別繼承自命名空間中的 HelloWorld。

Package.appxmanifest

描述應用程式的設定檔，包括其名稱、描述、圖塊、起始頁等。
包含應用程式所包含的相依性、資源和檔案清單。

一組標誌影像

資源/Square150x150Logo.scale-200.png 和 Wide310x150Logo.scale-200.png 代表您的應用程式（中型或寬大小）在開始功能表中。
資產/Square44x44Logo.png 代表應用程式在 [開始] 功能表、任務列和任務管理員的應用程式清單中。
資產/StoreLogo.png 代表您在 Microsoft 市集中的應用程式。
資產/SplashScreen.scale-200.png 是您應用程式啟動時出現的開場畫面。
當系統鎖定時，資產/LockScreenLogo.scale-200.png 可用來代表鎖定畫面上的應用程式。

步驟 2：新增按鈕

使用設計視圖

讓我們將按鈕新增至我們的頁面。在本教學課程中，您只需要處理先前所列的幾個檔案：App.xaml、MainPage.xaml 和MainPage.xaml.cs。

按兩下 MainPage.xaml ，在 XAML 編輯器中開啟它。

備註

使用使用 .NET 9 的 UWP 空白應用程式 範本時，不會看到設計檢視。如果您想要使用具有 XAML 設計檢視的 UWP 專案，您可以改用 UWP 空白應用程式（.NET Native） 範本。如先前所述， UWP 空白應用程式（.NET Native） 範本與 UWP 空白應用程式 範本稍有不同，但它具有相同的基本結構。主要差異在於 UWP 空白應用程式（.NET Native） 範本會使用 .NET Native 來編譯您的應用程式。如需了解使用新 .NET 9 範本的優點，請參閱現代化您的 UWP 應用程式，並了解 .NET 9 和原生 AOT 的預覽 UWP 支援。
將下列 XAML 程式碼新增至 MainPage.xaml 中的<Grid>元素。您可以輸入它，或從這裡複製並貼上它：
```
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
此時，您已建立非常簡單的應用程式。這是建置、部署和啟動應用程式的好時機，並查看其外觀。您可以在本機電腦上、模擬器或模擬器或遠端裝置上對應用程式進行偵錯。以下是 Visual Studio 中的目標裝置功能表：

根據預設，應用程式會在本機計算機上執行。目標裝置功能表提供數個選項，可在桌面裝置系列的裝置上對應用程式進行偵錯。
- HelloWorld （這會在本機電腦上執行它）
- WSL
- 下載新的模擬器...
執行應用程式以查看按鈕的運作情形。若要在本機計算機上啟動偵錯，您可以在功能表中選擇偵錯 | 開始偵錯項目，點擊工具列中標有HelloWorld的開始偵錯按鈕，或按 F5 鍵。

應用程式會在視窗中開啟，而預設啟動顯示畫面會先出現。啟動畫面是由影像（SplashScreen.png）和背景色彩定義的（在應用程式的清單檔中指定）。

啟動顯示畫面消失，然後您的應用程式隨即出現。看起來像這樣：
按 Windows 鍵以開啟 [ 開始 ] 功能表，然後選取 [ 全部 ] 以顯示所有應用程式。請注意，在本機部署應用程式會將它新增至 [ 開始 ] 功能表中的程式清單。若要稍後再次執行應用程式（不在偵錯模式中），您可以在 [ 開始 ] 功能表中加以選取。

尚未執行太多動作，但恭喜您，您已建置第一個 UWP 應用程式並將其部署至本機電腦！
若要停止偵錯：

按一下工具列中的 [停止偵錯] 按鈕（）。

–或–

從 [ 偵錯] 功能表中，單擊 [ 停止偵錯]。

–或–

關閉應用程式視窗。
將值從 Content 變更為 Button，以變更Hello, world!按鈕的文字。
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
如果您再次執行應用程式，按鈕會更新以顯示新的文字。

步驟 3：事件處理程式

「事件處理程式」聽起來很複雜，但這只是事件發生時所呼叫之程序代碼的另一個名稱（例如使用者按兩下您的按鈕）。

如果您還未停止應用程式運行，請停用它。
開始在 XAML 編輯器中輸入 Click ，Visual Studio 會顯示可能事件的清單。從清單中選取點擊。
接下來，從清單中選取 <New Event Handler> 。這會在程式碼後置檔案（MainPage.xaml.cs）中建立新的事件處理方法，並將事件 Click 新增至 XAML 程式碼中的 button 元素。

XAML 編輯器會自動在您的 XAML 程式碼中的按鈕元素新增 Click 事件。
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
```
這也會將事件處理程式新增至程式代碼後置檔案（MainPage.xaml.cs）。事件處理程式是按下按鈕時所呼叫的方法。方法名稱是 button_Click，而且它有兩個參數： object sender 和 RoutedEventArgs e。
```
private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}
```
事件 Click 是按鈕的標準事件。當使用者按下按鈕時，會呼叫 button_Click 方法。

在檔案後置程式代碼MainPage.xaml.cs中編輯事件處理程式碼。這是事情變得有趣的地方。我們來改一下，使它看起來像這樣：

private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

請確定方法簽章現在包含 async 關鍵詞，或者當您嘗試執行應用程式時，會收到錯誤。

我們剛剛做了什麼？

此程式代碼會使用一些 Windows API 來建立語音合成物件，然後提供一些文字來表示。（如需使用 SpeechSynthesis的詳細資訊，請參閱 Windows 執行時間（WinRT） API 檔中的 SpeechSynthesis 命名空間。

當您執行應用程式並按下按鈕時，您的電腦（或手機）會字面上說出「Hello， World」。。

總結

恭喜您，您已使用 .NET 9 建立適用於 Windows 的第一個 UWP 應用程式！

若要瞭解如何使用 XAML 來設定應用程式將使用的控件，請嘗試方格教學課程，或直接跳至後續步驟？

共用方式為