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

在這個教學中，你會使用 Visual Studio 整合開發環境（IDE）中的 Visual Basic 建立應用程式。您的程式將使用 Windows Presentation Foundation（WPF）的 UI 框架。利用這個教學，熟悉許多你可以在 Visual Studio 中使用的工具、對話框和設計器。

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

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

什麼是 WPF？

WPF，或稱 Windows Presentation Foundation，是一個用於建立桌面用戶端應用程式的使用者介面（UI）框架。 WPF 開發平台支援廣泛的應用程式開發功能，包括：

應用模型
資源
控制項
Graphics
版面配置
數據系結
Documents
安全性

WPF 是 .NET 的一部分。如果你之前用 ASP.NET 或 Windows Forms 建立過 .NET 應用程式，程式設計體驗應該很熟悉。 WPF 使用可擴充應用程式標記語言XAML來提供一種宣告式應用程式設計模型。欲了解更多資訊，請參閱 WPF .NET 概述。

先決條件

你需要用 Visual Studio 才能完成這個教學。免費版本請參見 Visual Studio downloads。

建立專案

當你在 Visual Studio 建立應用程式時，首先要建立一個專案。在這個教學中，建立一個 Windows Presentation Foundation 專案。

打開 Visual Studio。
在 [開始] 視窗中，選擇 [建立新專案]。
在 Create a new project 視窗中，搜尋 WPF，並在 All Languages 列表中選擇 Visual Basic。選擇 WPF應用程式（.NET 框架），然後選擇 Next。
為專案命名 HelloWPFApp，然後選取 [ 建立]。

Visual Studio 會建立 HelloWPFApp 專案與解決方案。 方案總管 會顯示各種檔案。

WPF Designer 以分割視圖顯示設計視圖與 MainWindow.xaml 的 XAML 視圖。

打開 Visual Studio。
在 [開始] 視窗中，選擇 [建立新專案]。
在 Create a new project 視窗中，搜尋 WPF，並在 All Languages 列表中選擇 Visual Basic。選擇 WPF應用程式（.NET 框架），然後選擇 Next。
為專案命名 HelloWPFApp，然後選取 [ 建立]。

Visual Studio 會建立 HelloWPFApp 專案與解決方案。 方案總管 會顯示各種檔案。

WPF Designer 以分割視圖顯示設計視圖和MainWindow.xaml 的 XAML 視圖。

備註

欲了解更多關於可擴充應用程式標記語言（XAML）的資訊，請參閱 XAML WPF 概述。

設定視窗並新增文字

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

在 方案總管，開啟 MainWindow.xaml。
在 XAML 檢視中，將 Window.Title 屬性的值從 Title=“MainWindow” 變更為 Title=“Greetings”。
在Visual Studio IDE左側，選擇 Toolbox 分頁。如果看不到，請從選單列選擇 View>Toolbox 或Ctrl+Alt+X。
請展開 Common WPF Controls，或在搜尋欄輸入 Text，即可找到 TextBlock。

截圖顯示 2022 Visual Studio 工具箱視窗，TextBlock 控制項在常見WPF控制項列表中被高亮顯示。
選取 TextBlock 專案，並將其拖曳至設計介面上的視窗。您可以拖曳 TextBlock 控件來移動它。使用指導方針來安置控制元件。

此螢幕快照顯示位於 Greetings 窗體上且顯示指導方針的 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 CtrlShiftS。最好早早地節省成本。

新增按鈕和程序代碼

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

在 [ 工具箱] 中，尋找 RadioButton。
選取 RadioButton 專案並將它拖曳至設計介面，將兩個 RadioButton 控件新增至設計介面。選取按鈕並使用箭頭鍵來移動按鈕。將按鈕並排放置在 TextBlock 控制項之下。

顯示具有 TextBlock 控制項和兩個單選按鈕之 Greetings 表單的螢幕快照。
在左側 RadioButton 控件的 [屬性] 視窗中，將 [屬性] 視窗頂端的 Name 屬性變更為 HelloButton。
在右側 RadioButton 控件的 [ 屬性] 視窗中，將 Name 屬性變更為 GoodbyeButton。

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

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

顯示 Greetings 窗體的螢幕快照，其中 TextBlock、RadioButtons 標示為 'Hello' 和 'Goodbye'，以及標示為 'Display' 的按鈕控件全都位於窗體上。
在設計介面上，按兩下 [ 顯示 ] 按鈕。

MainWindow.xaml.vb 開啟，且游標位於事件中。
```
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，選擇 Rename。將檔案重新命名為 Greetings.xaml。
按 F5 或選取 [偵錯]，然後選取 [開始偵錯] 以啟動偵錯工具。

會跳出一個中斷模式視窗，輸出視窗則顯示異常發生。

顯示 [例外狀況未處理] 視窗的螢幕快照，其中包含一則 System.IO.Exception 訊息，其內容為「找不到資源 mainwindow.xaml'。
選擇 [偵錯] 以停止偵錯。

您在本節開頭將 MainWindow.xaml 重新命名為 Greetings.xaml 。程式代碼仍會將 MainWindow.xaml 視為應用程式的啟動URI，因此專案無法啟動。
在 方案總管 中，開啟 Application.xaml 檔案。
將變更為。
再次啟動調試程式（按 F5）。您現在應該會看到應用程式的 [問候語 ] 視窗。

[問候語] 視窗的螢幕快照，其中顯示 TextBlock、RadioButtons 和 Button 控件。已選取 [Hello] 單選按鈕。
選取 [Hello ] 和 [ 顯示] 按鈕，然後選取 [ 再見 ] 和 [ 顯示] 按鈕。使用右上角的關閉圖示來停止偵錯。

欲了解更多資訊，請參閱 Compile a WPF Application 及 Debug WPF。

使用斷點進行偵錯

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

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

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

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

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

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

建置發行版本

在確認一切正常後，你可以準備應用程式的發行版本。

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

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

下一個步驟

請繼續閱讀下一篇文章，了解如何使用 Visual Studio 使用 Visual Basic 建立 Windows Forms 應用程式。

建立一個Windows Forms應用程式

欲了解更多 Visual Studio 資訊，請參閱：

生產力秘訣

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-03-06