共用方式為

教學課程：使用 XAML 和 C 在 Visual Studio 中建立您的第一個通用 Windows 平台應用程式#

  • 發行項

在本教學課程中，您將建立可在任何 Windows 10 或更新版本裝置上執行的 「Hello World」 應用程式，作為 Visual Studio 集成開發環境 （IDE） 的簡介。 若要這樣做，您可以使用通用 Windows 平臺 （UWP） 專案範本、Extensible Application Markup Language （XAML），以及 C# 程式設計語言。

注意

如果您滿意通用 Windows 平臺 （UWP） 中的目前功能，則不需要將專案類型移轉至 Windows App SDK。 WinUI 2.x 和 Windows SDK 支援 UWP 項目類型。 如果您要開始使用 WinUI 3 和 Windows App SDK，您可以遵循 Windows App SDK 教學課程中的步驟，。

在本教學課程中，您會：

  • 建立專案
  • 建立應用程式
  • 執行應用程式

先決條件

您需要 Visual Studio 才能完成本教學課程。 如需免費版本，請流覽 Visual Studio 下載頁面。

注意

本教學課程需要 空白應用程式（通用 Windows） 專案範本。 在安裝期間，選取 通用 Windows 平台開發 工作負載：

Visual Studio 安裝程式的螢幕快照，其中顯示通用 Windows 平台開發工作負載。

如果您已安裝 Visual Studio 且需要新增它，請從功能表中選取 [工具]>[取得工具和功能]，或在 [建立新專案] 視窗中，選取 [安裝更多工具和功能 連結。

[建立新專案] 視窗的螢幕快照，其中顯示 [安裝更多工具和功能] 連結。

建立專案

首先，建立通用 Windows 平台專案。 專案類型附帶您所需的所有範本檔案，這是在您進行任何添加之前就已經具備的。

  1. 開啟 Visual Studio，然後在 [開始] 視窗中，選擇 [[建立新專案]。

  2. 在 [建立新專案] 畫面上，於搜尋方塊中輸入 通用 Windows，選擇 [空白應用程式 (通用 Windows)] 的 C# 範本，然後選擇 [下一步]。

    [建立新專案] 對話框的螢幕快照，其中已於搜尋方塊中輸入 [Universal Windows]，並醒目提示 [空白應用程式（Universal Windows）] 專案範本。

  3. 為專案指定名稱，HelloWorld，然後選擇「建立」。

    [設定新專案] 對話框的螢幕快照，其中已於 [項目名稱] 欄位中輸入 'HelloWorld'。

  4. 接受 [新增通用 Windows 平台專案 ] 對話框中的預設 目標版本 和 最低版本 設定。

    [新增通用 Windows 平台專案] 對話框的螢幕快照，其中顯示預設 [目標版本] 和 [最低版本設定]。

    注意

    如果這是您第一次使用 Visual Studio 建立 UWP 應用程式，則可能會出現 設定 對話方塊。 選擇 開發人員模式，然後選擇 是。

    顯示 [UWP 設定] 對話框的螢幕快照，其中包含啟用開發人員模式的選項。

    Visual Studio 會為您安裝額外的開發人員模式套件。 當套件安裝完成時，請關閉 [設定] 對話框。

  1. 開啟 Visual Studio，然後在 [開始] 視窗中，選擇 [[建立新專案]。

  2. 在 [建立新專案] 畫面上，在搜尋框中輸入 通用 Windows，選擇 [空白應用程式 (通用 Windows)] 的 C# 範本，然後選擇 [下一步]。

    [建立新專案] 對話框的螢幕快照，其中已於搜尋方塊中輸入 [通用 Windows]，並醒目提示 [空白應用程式（通用 Windows）] 專案範本。

  3. 為專案指定名稱，HelloWorld，然後選擇 建立。

    [設定新專案] 對話框的螢幕快照，其中已於 [項目名稱] 欄位中輸入 'HelloWorld'。

  4. 接受 [新增通用 Windows 平台專案 ] 對話框中的預設 目標版本 和 最低版本 設定。

    [新增通用 Windows 平台專案] 對話框的螢幕快照，其中顯示預設 [目標版本] 和 [最低版本設定]。

    注意

    如果這是您第一次使用 Visual Studio 建立 UWP 應用程式，則會出現 [為 Windows 啟用開發人員模式] 對話框。 選擇 開發人員設定，以開啟 [設定] 。 開啟開發人員模式，然後選擇 [是] 。

    顯示 [UWP 設定] 對話框的螢幕快照，其中包含啟用開發人員模式的選項。

    Visual Studio 會為您安裝額外的開發人員模式套件。 套件安裝完成時，請關閉 設定 對話框。

建立應用程式

是時候開始開發了。 新增按鈕控制項、將動作新增至按鈕，然後啟動 「Hello World」 應用程式以查看其外觀。

將按鈕新增至設計畫布

  1. 在 [方案總管]中，雙擊 MainPage.xaml 開啟分割檢視。

    [方案總管] 視窗的螢幕快照，其中顯示 HelloWorld 專案中已選取 MainPage.xaml 檔案的屬性、參考、資產和檔案。

    有兩個窗格：XAML 設計工具，其中包含設計畫布，以及 XAML 編輯器，您可以在其中新增或變更程式代碼。

    顯示 Visual Studio IDE 中開啟 MainPage.xaml 的螢幕快照，而 [XAML 設計工具] 窗格會顯示空白的設計介面，而 [XAML 編輯器] 窗格會顯示一些 XAML 程式代碼。

  2. 選擇 [工具箱] 開啟 [工具箱] 彈出視窗。

    螢幕快照顯示 XAML 設計工具窗格左側的 [工具箱] 展開視窗索引標籤被反白顯示。

    如果您沒有看到 [工具箱] 選項，您可以從功能表列開啟它。 若要這樣做，請選擇 [檢視]>[工具列]。 或者，按 Ctrl+Alt+X。

  3. 選取 釘選 圖示，以固定 [工具箱] 視窗。

    工具箱視窗頂端列中，醒目顯示釘選圖示的螢幕截圖。

  4. 選取 按鈕 控制項，然後將它拖曳到設計畫布上。

    螢幕快照，其中顯示 [工具箱] 視窗中醒目提示的 [按鈕] 和設計畫布上的 [按鈕] 控件。

    如果您在 XAML 編輯器中查看程式代碼，您會看到 按鈕 也會出現在那裡：

    螢幕快照，其中顯示 XAML 編輯器中醒目提示新新增按鈕的程式代碼。

  1. 在 [方案總管]中，雙擊 MainPage.xaml 開啟分割檢視。

    [方案總管] 視窗的螢幕快照，其中顯示 HelloWorld 專案中的屬性、參考、資產和檔案。已選取MainPage.xaml檔案。

    有兩個窗格：XAML 設計工具，其中包含設計畫布，以及 XAML 編輯器，您可以在其中新增或變更程式代碼。

    顯示Visual Studio IDE 中開啟MainPage.xaml的螢幕快照。[XAML 設計工具] 窗格會顯示空白的設計介面，而 [XAML 編輯器] 窗格會顯示一些 XAML 程式代碼。

  2. 選擇 [工具箱] 來開啟 [工具箱] 飛出視窗。

    螢幕快照，顯示 XAML 設計工具窗格左側突顯顯示的 [工具箱] 快顯視窗索引標籤。

    如果您沒有看到 [工具箱] 選項，您可以從功能表列開啟它。 若要這樣做，請選擇 [檢視]>[工具列]。 或者，按 ctrl+Alt+X。

  3. 選取 釘選 圖示，以固定 [工具箱] 視窗。

    螢幕快照，其中顯示 [工具箱] 視窗頂端列中醒目提示的釘選圖示。

  4. 選取 按鈕 控制，然後將它拖曳到設計畫布上。

    螢幕快照，其中顯示 [工具箱] 視窗中醒目提示的 [按鈕] 和設計畫布上的 [按鈕] 控件。

    如果您在 XAML 編輯器中查看程式代碼，也會看到 [按鈕] 也會出現在那裡：

    螢幕快照，其中顯示 XAML 編輯器中醒目提示新新增按鈕的程式代碼。

將標籤新增至按鈕

  1. 在 XAML 編輯器中，將 Button Content 值從 Button 變更為 Hello World！

    顯示 XAML 編輯器中 Button XAML 程式代碼的螢幕快照，其中 Content 屬性已變更為 Hello World！

  2. 請注意，XAML 設計工具中的按鈕也會 變更。

    顯示 XAML 設計工具畫布上按鈕控件的螢幕快照，其中按鈕的標籤已變更為 Hello World！

  1. 在 XAML 編輯器中，將 Button Content 值從 Button 變更為 Hello World！

    顯示 XAML 編輯器中 Button 的 XAML 程式代碼螢幕快照，其中 Content 屬性的值已變更為 『Hello World！』。

  2. 請注意，XAML 設計器中的按鈕也會 變更。

    顯示 XAML 設計工具畫布上按鈕控件的螢幕快照，其中按鈕的標籤已變更為 Hello World！

新增事件處理程式

事件處理程式 聽起來很複雜，但這隻是事件發生時所呼叫之程式代碼的另一個名稱。 在此情況下，它會將動作新增到 Hello World！ 按鈕上。

  1. 按兩下設計畫布上的按鈕控制件。

  2. 在 MainPage.xaml.cs中編輯事件處理程式碼，也就是程式碼後置頁面。

    以下是事情變得有趣的地方。 預設事件處理程式看起來像這樣：

    顯示預設Button_Click事件處理程式 C# 程式代碼的螢幕快照。

    變更它，使其看起來像這樣：

    顯示新異步Button_Click事件處理程式 C# 程式代碼的螢幕快照。

    以下是要複製並貼上的程式碼：

    private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement 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();
}

  1. 按兩下設計畫布上的按鈕控制件。

  2. 在 MainPage.xaml.cs中編輯事件處理程式程式代碼，也就是程式代碼後置頁面。

    以下是事情變得有趣的地方。 預設事件處理程式看起來像這樣：

    顯示預設Button_Click事件處理程式 C# 程式代碼的螢幕快照。

    變更它，使其看起來像這樣：

    顯示新異步Button_Click事件處理程式 C# 程式代碼的螢幕快照。

    以下是要複製並貼上的程式碼：

    private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement 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();
}

我們剛剛做了什麼？

程序代碼會使用一些 Windows API 來建立語音合成物件，然後提供一些文字來表示。 如需使用 SpeechSynthesis的詳細資訊，請參閱 System.Speech.Synthesis。

執行應用程式

是時候建置、部署並啟動 「Hello World」 UWP 應用程式，以查看其外觀和聽起來。 以下是做法。

  1. 使用 [播放] 按鈕在本機計算機上啟動應用程式。 文字 本機電腦。

    螢幕快照，顯示 [播放] 按鈕旁的下拉式方塊，其中已選取 [本機計算機]。

    或者，您也可以從功能表欄選擇 [偵錯]>[開始偵錯]，或按 F5 來啟動您的應用程式。

  2. 檢視您的應用程式，其會在啟動顯示畫面消失后不久出現。 應用程式看起來應該類似下圖：

    顯示執行中UWP'Hello World' 應用程式的螢幕快照。

  3. 選取 [Hello World] 按鈕。

    您的 Windows 10 或更新版本裝置字面上說：「Hello，World！

  4. 若要關閉應用程式，請選取工具列中的 [停止偵錯 ] 按鈕。 或者，從功能表欄選擇 [偵錯]>[停止偵錯]，或按 Shift+F5。

是時候建置、部署並啟動 「Hello World」 UWP 應用程式，以查看其外觀和聽起來。 以下是做法。

  1. 使用 [播放] 按鈕（其文字為 本地電腦），在本地電腦上啟動應用程式。

    螢幕快照，顯示 [播放] 按鈕旁的下拉式方塊，其中已選取 [本機計算機]。

    或者，您也可以從功能表欄選擇 [偵錯]>[開始偵錯]，或按 F5 來啟動您的應用程式。

  2. 檢視您的應用程式，其會在啟動顯示畫面消失后不久出現。 應用程式看起來應該類似下圖：

    顯示執行中UWP'Hello World' 應用程式的螢幕快照。

  3. 選取 [Hello World] 按鈕。

    您的 Windows 10 或更新版本裝置字面上說：「Hello，World！

  4. 若要關閉應用程式，請選取工具列中的 [停止偵錯 ] 按鈕。 或者，從功能表列選擇 [偵錯]>[停止偵錯]，或按 Shift+F5。

相關內容

下一步

恭喜您完成本教學課程！ 我們希望您已瞭解UWP和Visual Studio IDE的一些基本概念。 若要深入瞭解，請繼續進行下列教學課程：

建立使用者介面