教學課程：使用 Visual Basic 建立 WPF 應用程式

在本教學課程中，您將在 Visual Studio 集成開發環境（IDE）中使用 Visual Basic 建立應用程式。您的程式將使用 Windows Presentation Foundation （WPF） UI 架構。使用本教學課程熟悉您可以在 Visual Studio 中使用的許多工具、對話框和設計工具。

在本教學課程中，您將瞭解如何：

建立專案
設定視窗並新增文字
新增按鈕和程序代碼
偵錯及測試應用程式
使用斷點進行偵錯
建置發行版本

什麼是 WPF？

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

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

先決條件

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

建立專案

當您在 Visual Studio 中建立應用程式時，會先建立專案。在本教學課程中，建立 Windows Presentation Foundation 專案。

開啟 Visual Studio。
在 [建立新專案] 畫面上，搜尋 “WPF”，然後選取 [WPF 應用程式] [.NET Framework]。 選取 下一步。
為專案命名 HelloWPFApp，然後選取 [ 建立]。

Visual Studio 會建立 HelloWPFApp 項目和解決方案。 方案總管 會顯示各種檔案。

WPF 設計工具會在分割檢視中顯示 MainWindow.xaml 的設計檢視和 XAML 檢視。

開啟 Visual Studio。
在 [開始] 視窗中，選擇 [建立新專案]。
在 [建立新專案] 視窗中，搜尋 “WPF”，然後在 [所有語言] 下拉式清單中選取 [Visual Basic]。選擇 [WPF 應用程式][.NET Framework]，然後選擇 [ 下一步]。
為專案命名 HelloWPFApp，然後選取 [ 建立]。

Visual Studio 會建立 HelloWPFApp 項目和解決方案。 方案總管 會顯示各種檔案。

WPF 設計工具會在分割檢視中顯示 MainWindow.xaml 的設計檢視和 XAML 檢視。

備註

如需 eXtensible Application Markup Language （XAML）的詳細資訊，請參閱 WPF 的 XAML 概觀。

設定視窗並新增文字

使用 [ 屬性 ] 視窗，您可以顯示和變更項目專案、控件和其他項目的選項。

在 [方案總管] 中，開啟 MainWindow.xaml。
在 XAML 檢視中，將 Window.Title 屬性的值從 Title=“MainWindow” 變更為 Title=“Greetings”。
在 Visual Studio IDE 的左側，選取 [工具箱] 索引標籤。如果您沒有看到，請從功能表欄選取 [檢視>工具箱]，或從功能表欄選取 [Ctrl+Alt+X]。
展開 [通用 WPF 控件 ]，或在搜尋列中輸入文字以尋找 TextBlock。
選取 TextBlock 專案，並將其拖曳至設計介面上的視窗。您可以拖曳 TextBlock 控件來移動它。使用指導方針來安置控制元件。

XAML 標記看起來應該像下列範例：
```
<TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
```
在 XAML 檢視中，找出 TextBlock 的標記，並變更 Text 屬性：
```
Text="Select a message option and then choose the Display button."
```
如有必要，請再次將 TextBlock 置中
選擇 [ 全部儲存 ] 工具列按鈕來儲存您的應用程式。或者，若要儲存您的應用程式，請從功能表欄選擇 [[檔案]>[全部儲存]，或按 ctrl Ctrl+Shift+S。最好早早地節省成本。

新增按鈕和程序代碼

您的應用程式使用兩個單選鈕和一個按鈕。使用這些步驟來新增它們。您將將 Visual Basic 程式代碼新增至按鈕。該程式代碼指的是單選按鈕的選取。

在 [ 工具箱] 中，尋找 RadioButton。
選取 RadioButton 專案並將它拖曳至設計介面，將兩個 RadioButton 控件新增至設計介面。選取按鈕並使用箭頭鍵來移動按鈕。將按鈕並排放置在 TextBlock 控制項之下。
在左側 RadioButton 控件的 [屬性] 視窗中，將 [屬性] 視窗頂端的 Name 屬性變更為 HelloButton。
在右側 RadioButton 控件的 [ 屬性] 視窗中，將 Name 屬性變更為 GoodbyeButton。

在 XAML 中將和 HelloButton 的 GoodbyeButton屬性更新為 "Hello" 和 "Goodbye"。

<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>

在 XAML 檢視中，找出 HelloButton 的標記，並新增 IsChecked 屬性：
```
IsChecked="True"
```
值為 True 的 IsChecked 屬性表示預設會檢查 HelloButton。此設定表示即使在程式啟動時，選項按鈕仍然會總是被選取。
在 [ 工具箱] 中，尋找 [按鈕 ] 控件，然後將按鈕拖曳至 RadioButton 控件下的設計介面。
在 XAML 檢視中，將 Button 控制項的內容值 從 Content="Button" 變更為 Content="Display"。
```
<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
```
您的視窗應該類似下圖。
在設計介面上，按兩下 [ 顯示 ] 按鈕。

MainWindow.xaml.vb 開啟，且游標位於 Button_Click 事件中。
```
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

新增下列程式碼：

If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

偵錯及測試應用程式

接下來，您將對應用程式進行偵錯，以尋找錯誤，並測試這兩個消息框都正確顯示。若要查看此程序的運作方式，第一個步驟會刻意將錯誤引入程式。

在 [方案總管] 中，以滑鼠右鍵按兩下 MainWindow.xaml ，然後選擇 [ 重新命名]。將檔案重新命名為 Greetings.xaml。
按 F5 或選取 [偵錯]，然後選取 [開始偵錯] 以啟動偵錯工具。

[ 中斷模式 ] 視窗隨即出現，而 [ 輸出 ] 視窗表示已發生例外狀況。
選擇 [偵錯>] 以停止偵錯。

您在本節開頭將 MainWindow.xaml 重新命名為 Greetings.xaml 。程式代碼仍會將 MainWindow.xaml 視為應用程式的啟動URI，因此專案無法啟動。
在 [方案總管] 中，開啟 Application.xaml 檔案。
變更 StartupUri="MainWindow.xaml" 為 StartupUri="Greetings.xaml"
再次啟動調試程式（按 F5）。您現在應該會看到應用程式的 [問候語 ] 視窗。
選取 [Hello ] 和 [ 顯示] 按鈕，然後選取 [ 再見 ] 和 [ 顯示] 按鈕。使用右上角的關閉圖示來停止偵錯。

如需詳細資訊，請參閱建置 WPF 應用程式（WPF）和偵錯 WPF。

使用斷點進行偵錯

您可以在偵錯過程中測試程式碼，方法是新增一些斷點。

開啟 Greetings.xaml.vb，然後選取下列這一行： MessageBox.Show("Hello.")
按 F9 或選取偵錯，然後點選 切換斷點。

在編輯器視窗左邊界的程式代碼行旁邊會出現紅色圓圈。
選取下列這一行： MessageBox.Show("Goodbye.")。
按 F9 鍵以新增斷點，然後按 F5 開始偵錯。
在 [ 問候語] 視窗中，選取 [Hello ] 按鈕，然後選取 [ 顯示]。

MessageBox.Show("Hello.")線條以黃色高亮顯示。 IDE 底部的 [自動變數、局部變數 和監看] 視窗固定在左側。 呼叫堆疊、斷點、例外狀況設定、命令、即時視窗 和 輸出視窗會固定在右側。
在功能表欄上，選擇偵錯>跳出。

應用程式會再次啟動。出現「Hello」一字的對話框。
選擇 [確定] 按鈕以關閉對話方塊。
在 [ 問候語] 視窗中，選擇 [ 再見] 單選按鈕，然後選擇 [ 顯示 ] 按鈕。

MessageBox.Show("Goodbye.")線條以黃色高亮顯示。
選擇 F5 鍵以繼續偵錯。當對話框出現時，選擇 [ 確定 ] 關閉對話框。
關閉應用程式視窗以停止偵錯。
在功能表欄上，選擇偵錯>停用所有中斷點。

建置發行版本

既然您已確認一切正常運作，您可以準備應用程式的發行組建。

選取 [建置>清除] 方案 ，以刪除在先前組建期間建立的中繼檔案和輸出檔案。
使用工具列上的下拉式控件，將 HelloWPFApp 的組建組態從偵錯變更為發行。
選取 [建置>解決方案]。

恭喜您完成本教學課程！您可以在方案和專案目錄（...\HelloWPFApp\bin\Release）下找到您建置的 .exe。

後續步驟

前進到下一篇文章，瞭解如何使用 Visual Basic 在 Visual Studio 中建立 Windows Forms 應用程式。

建立 Windows Forms 應用程式

如需 Visual Studio 的詳細資訊，請參閱下列資源：

Visual Studio 2019 的新功能
生產力秘訣

生產力秘訣

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-08-07