教學課程：使用 C 建立簡單的 WPF 應用程式#

適用于：Visual StudioVisual Studio for MacVisual Studio Code

藉由完成這個教學課程，讓自己更熟悉許多可在使用 Visual Studio 開發應用程式時運用的工具、對話方塊和設計工具。 當您在學習如何使用整合式開發環境 (IDE) 時，您會建立簡單的 "Hello, World" 應用程式、設計 UI、新增程式碼，以及進行偵錯。

必要條件

• 如果您尚未安裝 Visual Studio，請前往 Visual Studio 下載頁面免費進行安裝。
• 請確定已安裝 .NET 桌面開發 工作負載。 您可以在Visual Studio 安裝程式中確認這一點。
• 您可以在本教學課程中使用 .NET Framework 或 .NET Core。 .NET Core 是較新的新式架構。 .NET Core 需要 Visual Studio 2019 16.3 版或更新版本。

什麼是 WPF？

WPF 或Windows Presentation Foundation是建立桌面用戶端應用程式的 UI (使用者介面) 架構。 WPF 開發平台支援一組廣泛的應用程式開發功能，包含應用程式模型、資源、控制項、圖形、版面配置、資料繫結、文件和安全性。

WPF 是 .NET 的一部分，因此如果您先前已使用 ASP.NET 或 Windows Forms 來建置 .NET 的應用程式，則程式設計體驗應該很熟悉。 WPF 會使用可延伸的應用程式標記語言 XAML ，為應用程式程式設計提供宣告式模型。 如需詳細資訊，請參閱 WPF .NET 概觀。

設定 IDE

當您啟動 Visual Studio 時，會先開啟 [開始] 視窗。 選取 [不使用程式碼繼續] 以開啟開發環境。 您會看到工具視窗、功能表和工具列，以及主視窗空間。 工具視窗停駐在應用程式視窗的左側和右側。 搜尋方塊、功能表列和標準工具列位於頂端。 當您載入方案或專案時，編輯器和設計工具會出現在應用程式視窗的中央區域。 在開發應用程式時，您大部分時間都會在此中央區域工作。

建立專案

當您在 Visual Studio 中建立應用程式時，您需要先建立一個專案和一個方案。 在這個範例中，您將建立 Windows Presentation Foundation (WPF) 專案。

1. 開啟 Visual Studio。

2. 在開始視窗中，選擇 [建立新專案]。

   

3. 在 [ 建立新專案 ] 畫面上，搜尋 [WPF]，選擇 [ WPF 應用程式]，然後選擇 [ 下一步]。

   

4. 在下一個畫面中，為專案指定名稱 HelloWPFApp，然後選擇 [ 下一步]。

   

5. 在 [其他資訊] 視窗中，應該已為您的目標架構選取 .NET 6.0 (長期支援) 。 如果沒有，請選取 .NET 6.0 (長期支援) 。 接著，選擇 [建立]。

   

Visual Studio 會建立 HelloWPFApp 專案和方案，而且方案總管會顯示各種不同檔案。 WPF 設計工具會在分割檢視中顯示 MainWindow.xaml 的設計檢視和 XAML 檢視。 您可以滑動分隔器來增加或減少顯示任一檢視。 您可以選擇只查看視覺檢視，或只查看 XAML 檢視。

注意

如需 XAML (eXtensible Application Markup Language) 的詳細資訊，請參閱 WPF 的 XAML 概觀頁面。

建立專案之後，您可以進行自訂。 若要這麼做，請選擇 [檢視] 功能表中的 [屬性] 視窗，或按 F4。 然後，您可以顯示和變更應用程式中專案項目、控制項及其他項目的選項。

設計使用者介面 (UI)

如果未開啟設計工具，請選取MainWindow.xaml，然後按Shift+F7以開啟設計工具。

我們會將三種類型的控制項新增至這個應用程式：一個 TextBlock 控制項、兩個 RadioButton 控制項和一個 Button 控制項。

新增 TextBlock 控制項

1. 按Ctrl+Q以啟動搜尋方塊，然後輸入[工具箱]。 從結果清單中選擇 [ 檢視 > 工具箱 ]。

2. 在 [工具箱] 中展開 [通用 WPF 控制項] 節點以查看 TextBlock 控制項。

   

3. 選擇 TextBlock 項目並將它拖曳至設計介面上的視窗，即可將 TextBlock 控制項加入設計介面。 將控制項置中靠近視窗頂端。 您可以使用指導方針將控制項置中。

   您的視窗應該類似下圖：

   

   XAML 標記應該看起來與下列範例相似：

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

自訂文字區塊中的文字

1. 在 XAML 檢視中，找出 TextBlock 的標記並將 Text 屬性從 TextBox 變更為 Select a message option and then choose the Display button.

   XAML 標記應該看起來與下列範例相似：

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. 視需要再次將 TextBlock 置中，然後按 Ctrl+S 或使用 [檔案] 功能表項目來儲存您的變更。

接下來，您會將兩個 RadioButton 控制項新增至表單。

新增選項按鈕

1. 在 [工具箱] 中，尋找 RadioButton 控制項。

   

2. 選擇 RadioButton 項目並將它拖曳至設計介面的視窗，即可將兩個 RadioButton 控制項新增至設計介面。 移動按鈕 (選取它們並使用方向鍵)，讓按鈕並排顯示於 TextBlock 控制項下。 您可以使用指導方針來對齊控制項。

   您的視窗應該會像這樣：

   

3. 在左側 RadioButton 控制項的 [ 屬性 ] 視窗中，將 [ 名稱 ] 屬性 (在 [ 屬性 ] 視窗頂端的屬性) 變更為 HelloButton。

   

4. 在右邊 RadioButton 控制項的 [屬性] 視窗中，將 [名稱] 屬性變更為 GoodbyeButton，然後儲存您的變更。

接下來，您將會為每個 RadioButton 控制項加入顯示文字。 下列步驟會更新 RadioButton 控制項的 [ 內容 ] 屬性。

為每個選項按鈕新增顯示的文字

1. 將 和 GoodbyeButton 的內容 HelloButton屬性更新為 "Hello" XAML 中的 和 "Goodbye" 。 XAML 標記現在看起來應該會類似下列範例：

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

設定預設勾選的選項按鈕

在此步驟中，我們會設定預設勾選 HelloButton，這樣就一律會選取兩個選項按鈕的其中一個。

1. 在 XAML 檢視中，找出 HelloButton 的標記。

2. 加入 IsChecked 屬性，並將它設定為 True。 具體而言，請新增 IsChecked="True"。

   XAML 標記現在看起來應該會類似下列範例：

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

您將新增的最後一個 UI 元素是 Button 控制項。

新增按鈕控制項

1. 在 [工具箱] 中尋找 Button 控制項，然後將它拖曳至設計檢視中的表單，將它新增至設計介面的 RadioButton 控制項底下。 指導方針可協助您將控制項置中。

2. 在 XAML 檢視中，將 Button 控制項的 [內容] 值從 Content="Button" 變更為 Content="Display"，然後儲存變更。

   您的視窗應該類似下列螢幕擷取畫面。

   

   XAML 標記現在看起來應該會類似下列範例：

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

將程式碼新增至顯示按鈕

此應用程式執行時，會在使用者選擇選項按鈕並選擇 [顯示] 按鈕之後顯示訊息方塊。 一個訊息方塊會顯示 Hello，而另外一個會顯示 Goodbye。 若要建立此行為，您會將程式碼新增至 Button_ClickMainWindow.xaml.cs中的事件。

1. 在設計介面上，按兩下 [ 顯示 ] 按鈕。

   MainWindow.xaml.cs 會在 事件中 Button_Click 開啟游標。

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

2. 輸入下列程式碼：

   if (HelloButton.IsChecked == true)
   {
        MessageBox.Show("Hello.");
   }
   else if (GoodbyeButton.IsChecked == true)
   {
       MessageBox.Show("Goodbye.");
   }
   

3. 儲存應用程式。

偵錯和測試應用程式

接下來，您會偵錯應用程式以尋找錯誤，並測試兩個訊息方塊是否都正確出現。 下列指示會告訴您如何建置和啟動偵錯工具，不過您稍後也可閱讀 建置 WPF 應用程式 (WPF) 和對 WPF 進行偵錯以取得詳細資訊。

變更 MainWindow.xaml 的名稱

讓我們給 MainWindow 一個更具體的名稱。 在方案總管中，以滑鼠右鍵按一下MainWindow.xaml，然後選擇[重新命名]。 將檔案重新命名為 Greetings.xaml。

尋找和修正錯誤

在此步驟中，您將發現我們稍早變更 MainWindow.xaml 檔案的名稱所造成的錯誤。

開始偵錯並找出錯誤

1. 按 F5 或依序選取 [偵錯] 和 [開始偵錯]，來啟動偵錯工具。

   [中斷模式] 視窗隨即出現，而 [輸出] 視窗會指出發生了 IOException：找不到資源 'mainwindow.xaml'。

   

2. 選擇[> 偵錯停止偵錯] 來停止偵錯工具。

我們已在這個教學課程開始時，將 MainWindow.xaml 重新命名為 Greetings.xaml，但程式碼仍會參考 MainWindow.xaml 作為應用程式的啟動 URI，因此專案無法啟動。

指定 Greetings.xaml 作為啟動 URI

1. 在 [方案總管]中，開啟 App.xaml 檔。

2. 變更 StartupUri="MainWindow.xaml" 為 StartupUri="Greetings.xaml" ，並儲存變更。

作為選擇性步驟，將避免混淆，以變更應用程式視窗的標題以符合這個新名稱。

1. 在方案總管中，開啟您剛才重新命名的 Greetings.xaml檔案。

2. 將 Window.Title 屬性的值從 Title="MainWindow" 變更為 Title="Greetings" ，然後儲存變更。

再次啟動偵錯工具 (按 F5)。 您現在應該會看到應用程式的 [問候語 ] 視窗。

立即關閉應用程式視窗停止偵錯。

使用中斷點進行偵錯

新增一些中斷點，即可在偵錯時測試程式碼。 您可以選擇 [偵> 錯切換中斷點] 來新增中斷點，方法是按一下您要發生中斷的程式程式碼旁的編輯器左邊界，或按F9鍵。

新增中斷點

1. 開啟 Greetings.xaml.cs，然後選取下列這一行： MessageBox.Show("Hello.")

2. 依序選取 [ 偵錯] 和 [ 切換中斷點]，以新增中斷點。

   在編輯器視窗最左緣、程式碼行的旁邊會出現一個紅色圓圈。

3. 請選取下列程式碼行： MessageBox.Show("Goodbye.")。

4. 按 F9 鍵新增中斷點，然後按 F5 開始偵錯。

5. 在 [ Greetings ] 視窗中，選擇 [ Hello ] 選項按鈕，然後選擇 [ 顯示 ] 按鈕。

   程式碼行 MessageBox.Show("Hello.") 會以黃色反白顯示。 在 IDE 底部，[自動變數]、[區域變數] 和 [監看式] 視窗會一起停駐在左邊，而 [呼叫堆疊]、[中斷點]、[例外狀況設定]、[命令]、[即時運算] 和 [輸出] 視窗會一起停駐在右邊。

   

6. 在功能表列上，選擇 [偵>錯跳出]。

   應用程式會繼續執行，而且會顯示含有文字 "Hello" 的訊息方塊。

7. 選擇訊息方塊上的 [ 確定 ] 按鈕將它關閉。

8. 在 [ Greetings ] 視窗中，選擇 [ Goodbye ] 選項按鈕，然後選擇 [ 顯示 ] 按鈕。

   程式碼行 MessageBox.Show("Goodbye.") 會以黃色反白顯示。

9. 選擇 F5 鍵繼續偵錯。 當訊息方塊出現時，選擇訊息方塊中的 [ 確定 ] 按鈕關閉它。

10. 關閉應用程式視窗停止偵錯。

11. 在功能表列上，選擇 [>偵錯停用所有中斷點]。

檢視 UI 元素的標記法

在執行中的應用程式中，您應該會看到出現在視窗頂端的小工具。 小工具是執行時間協助程式，可讓您快速存取一些實用的偵錯功能。 選取第一個按鈕， 移至 [即時視覺化樹狀結構]。 您應該會看到包含頁面所有視覺元素的樹狀結構視窗。 展開節點以尋找您新增的按鈕。

建置應用程式的發行版本

既然已經驗證應用程式的運作一切正常，您就可以準備其發行組建。

1. 在主功能表上，選取 [建>置清除方案]，以刪除在先前組建期間建立的中繼檔案和輸出檔案。 不需要此步驟，但會清除偵錯組建輸出。

2. 使用工具列上的下拉式控制項，將 HelloWPFApp 的組建組態從 [ 偵 錯] 變更為 [ 發行 ]， (顯示目前) 的 [偵錯]。

3. 選擇 [建置建置方案] 來建> 置方案。

恭喜您完成此教學課程！ 您可以在方案與專案目錄底下找到建置 的 .exe， (...\HelloWPFApp\HelloWPFApp\bin\Release) 。

下一步

恭喜您完成此教學課程！ 若要更深入了解，請繼續下列教學課程。

繼續進行其他 WPF 教學課程

另請參閱

• 生產力祕訣