教學課程:使用 C 建立簡單的 WPF 應用程式#
適用于:Visual Studio
Visual Studio for Mac
Visual 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) 專案。
開啟 Visual Studio。
在開始視窗中,選擇 [建立新專案]。
檢視
在 [ 建立新專案 ] 畫面上,搜尋 [WPF],選擇 [ WPF 應用程式],然後選擇 [ 下一步]。
在下一個畫面中,為專案指定名稱 HelloWPFApp,然後選擇 [ 下一步]。
在 [其他資訊] 視窗中,應該已為您的目標架構選取 .NET Core 3.1 。 如果沒有,請選取 [.NET Core 3.1]。 接著,選擇 [建立]。
Visual Studio 會建立 HelloWPFApp 專案和方案,而且方案總管會顯示各種不同檔案。 WPF 設計工具會在分割檢視中顯示 MainWindow.xaml 的設計檢視和 XAML 檢視。 您可以滑動分隔器來增加或減少顯示任一檢視。 您可以選擇只查看視覺檢視,或只查看 XAML 檢視。
在
注意
如需 XAML (eXtensible Application Markup Language) 的詳細資訊,請參閱 WPF 的 XAML 概觀頁面。
建立專案之後,您可以進行自訂。 若要這麼做,請選擇 [檢視] 功能表中的 [屬性] 視窗,或按 F4。 然後,您可以顯示和變更應用程式中專案項目、控制項及其他項目的選項。
顯示
開啟 Visual Studio。
在開始視窗中,選擇 [建立新專案]。
在 [ 建立新專案 ] 畫面上,搜尋 [WPF],選擇 [ WPF 應用程式],然後選擇 [ 下一步]。
在下一個畫面中,為專案指定名稱 HelloWPFApp,然後選擇 [ 下一步]。
在 [其他資訊] 視窗中,應該已為您的目標架構選取 .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 控制項
按Ctrl+Q以啟動搜尋方塊,然後輸入[工具箱]。 從結果清單中選擇 [ 檢視 > 工具箱 ]。
在 [工具箱] 中展開 [通用 WPF 控制項] 節點以查看 TextBlock 控制項。
[工具箱] 視窗的 [TextBlock] 控制項醒目提示 [
選擇 TextBlock 項目並將它拖曳至設計介面上的視窗,即可將 TextBlock 控制項加入設計介面。 將控制項置中靠近視窗頂端。 在 Visual Studio 2019 和更新版本中,您可以使用紅色指導方針將控制項置中。
您的視窗應該會和下圖類似:
XAML 標記應該看起來與下列範例相似:
<Grid> <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/> </Grid>
按Ctrl+Q以啟動搜尋方塊,然後輸入[工具箱]。 從結果清單中選擇 [ 檢視 > 工具箱 ]。
在 [工具箱] 中展開 [通用 WPF 控制項] 節點以查看 TextBlock 控制項。
選擇 TextBlock 項目並將它拖曳至設計介面上的視窗,即可將 TextBlock 控制項加入設計介面。 將控制項置中靠近視窗頂端。 您可以使用指導方針將控制項置中。
您的視窗應該類似下圖:
XAML 標記應該看起來與下列範例相似:
<Grid> <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/> </Grid>
自訂文字區塊中的文字
在 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>
視需要再次將 TextBlock 置中,然後按 Ctrl+S 或使用 [檔案] 功能表項目來儲存您的變更。
接下來,您會將兩個 RadioButton 控制項新增至表單。
新增選項按鈕
在 [工具箱] 中,尋找 RadioButton 控制項。
的 [工具箱] 視窗的螢幕擷取畫面,
選擇 RadioButton 項目並將它拖曳至設計介面的視窗,即可將兩個 RadioButton 控制項新增至設計介面。 移動按鈕 (選取它們並使用方向鍵),讓按鈕並排顯示於 TextBlock 控制項下。 使用紅色指導方針來對齊控制項。
您的視窗應該會像這樣:
在左側 RadioButton 控制項的 [ 屬性 ] 視窗中,將 [ 名稱 ] 屬性 (在 [ 屬性 ] 視窗頂端的屬性) 變更為
HelloButton
。在右邊 RadioButton 控制項的 [屬性] 視窗中,將 [名稱] 屬性變更為
GoodbyeButton
,然後儲存您的變更。
接下來,您將會為每個 RadioButton 控制項加入顯示文字。 下列步驟會更新 RadioButton 控制項的 [ 內容 ] 屬性。
在 [工具箱] 中,尋找 RadioButton 控制項。
選擇 RadioButton 項目並將它拖曳至設計介面的視窗,即可將兩個 RadioButton 控制項新增至設計介面。 移動按鈕 (選取它們並使用方向鍵),讓按鈕並排顯示於 TextBlock 控制項下。 您可以使用指導方針來對齊控制項。
您的視窗應該會像這樣:
在左側 RadioButton 控制項的 [ 屬性 ] 視窗中,將 [ 名稱 ] 屬性 (在 [ 屬性 ] 視窗頂端的屬性) 變更為
HelloButton
。在右邊 RadioButton 控制項的 [屬性] 視窗中,將 [名稱] 屬性變更為
GoodbyeButton
,然後儲存您的變更。
接下來,您將會為每個 RadioButton 控制項加入顯示文字。 下列步驟會更新 RadioButton 控制項的 [ 內容 ] 屬性。
為每個選項按鈕新增顯示的文字
將 和
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,這樣就一律會選取兩個選項按鈕的其中一個。
在 XAML 檢視中,找出 HelloButton 的標記。
加入 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 控制項。
新增按鈕控制項
在 [工具箱] 中尋找 Button 控制項,然後將它拖曳至設計檢視中的表單,將它新增至設計介面的 RadioButton 控制項底下。 如果您使用 Visual Studio 2019 或更新版本,紅色線條可協助您置中控制項。
在 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>
在 [工具箱] 中尋找 Button 控制項,然後將它拖曳至設計檢視中的表單,將它新增至設計介面的 RadioButton 控制項底下。 指導方針可協助您將控制項置中。
在 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_Click
MainWindow.xaml.cs中的事件。
在設計介面上,按兩下 [ 顯示 ] 按鈕。
MainWindow.xaml.cs 會在 事件中
Button_Click
開啟游標。private void Button_Click(object sender, RoutedEventArgs e) { }
輸入下列程式碼:
if (HelloButton.IsChecked == true) { MessageBox.Show("Hello."); } else if (GoodbyeButton.IsChecked == true) { MessageBox.Show("Goodbye."); }
儲存應用程式。
此應用程式執行時,會在使用者選擇選項按鈕並選擇 [顯示] 按鈕之後顯示訊息方塊。 一個訊息方塊會顯示 Hello,而另外一個會顯示 Goodbye。 若要建立此行為,您會將程式碼新增至 Button_Click
MainWindow.xaml.cs中的事件。
在設計介面上,按兩下 [ 顯示 ] 按鈕。
MainWindow.xaml.cs 會在 事件中
Button_Click
開啟游標。private void Button_Click(object sender, RoutedEventArgs e) { }
輸入下列程式碼:
if (HelloButton.IsChecked == true) { MessageBox.Show("Hello."); } else if (GoodbyeButton.IsChecked == true) { MessageBox.Show("Goodbye."); }
儲存應用程式。
偵錯和測試應用程式
接下來,您會偵錯應用程式以尋找錯誤,並測試兩個訊息方塊是否都正確出現。 下列指示會告訴您如何建置和啟動偵錯工具,不過您稍後也可閱讀 建置 WPF 應用程式 (WPF) 和對 WPF 進行偵錯以取得詳細資訊。
變更 MainWindow.xaml 的名稱
讓我們給 MainWindow 一個更具體的名稱。 在方案總管中,以滑鼠右鍵按一下MainWindow.xaml,然後選擇[重新命名]。 將檔案重新命名為 Greetings.xaml。
尋找和修正錯誤
在此步驟中,您將發現我們稍早變更 MainWindow.xaml 檔案的名稱所造成的錯誤。
開始偵錯並找出錯誤
按 F5 或依序選取 [偵錯] 和 [開始偵錯],來啟動偵錯工具。
[中斷模式] 視窗隨即出現,而 [輸出] 視窗會指出發生了 IOException:找不到資源 'mainwindow.xaml'。
[
選擇[> 偵錯停止偵錯] 來停止偵錯工具。
我們已將 MainWindow.xaml 重新命名為 Greetings.xaml,但程式碼仍會將 MainWindow.xaml 稱為應用程式的啟動 URI,因此專案無法啟動。
按 F5 或依序選取 [偵錯] 和 [開始偵錯],來啟動偵錯工具。
[中斷模式] 視窗隨即出現,而 [輸出] 視窗會指出發生了 IOException:找不到資源 'mainwindow.xaml'。
選擇[> 偵錯停止偵錯] 來停止偵錯工具。
我們已在這個教學課程開始時,將 MainWindow.xaml 重新命名為 Greetings.xaml,但程式碼仍會參考 MainWindow.xaml 作為應用程式的啟動 URI,因此專案無法啟動。
指定 Greetings.xaml 作為啟動 URI
在 [方案總管]中,開啟 App.xaml 檔。
變更
StartupUri="MainWindow.xaml"
為StartupUri="Greetings.xaml"
,並儲存變更。
作為選擇性步驟,將避免混淆,以變更應用程式視窗的標題以符合這個新名稱。
在方案總管中,開啟您剛才重新命名的 Greetings.xaml檔案。
將 Window.Title 屬性的值從
Title="MainWindow"
變更為Title="Greetings"
,然後儲存變更。
再次啟動偵錯工具 (按 F5)。 您現在應該會看到應用程式的 [問候語 ] 視窗。
快照
立即關閉應用程式視窗停止偵錯。
使用中斷點進行偵錯
新增一些中斷點,即可在偵錯時測試程式碼。 您可以選擇 [偵> 錯切換中斷點] 來新增中斷點,方法是按一下您要發生中斷的程式程式碼旁的編輯器左邊界,或按F9鍵。
新增中斷點
開啟 Greetings.xaml.cs,然後選取下列這一行:
MessageBox.Show("Hello.")
依序選取 [ 偵錯] 和 [ 切換中斷點],以新增中斷點。
在編輯器視窗最左緣、程式碼行的旁邊會出現一個紅色圓圈。
請選取下列程式碼行:
MessageBox.Show("Goodbye.")
。按 F9 鍵新增中斷點,然後按 F5 開始偵錯。
在 [ Greetings ] 視窗中,選擇 [ Hello ] 選項按鈕,然後選擇 [ 顯示 ] 按鈕。
程式碼行
MessageBox.Show("Hello.")
會以黃色反白顯示。 在 IDE 底部,[自動變數]、[區域變數] 和 [監看式] 視窗會一起停駐在左邊,而 [呼叫堆疊]、[中斷點]、[例外狀況設定]、[命令]、[即時運算] 和 [輸出] 視窗會一起停駐在右邊。在功能表列上,選擇 [偵>錯跳出]。
應用程式會繼續執行,而且會顯示含有文字 "Hello" 的訊息方塊。
選擇訊息方塊上的 [ 確定 ] 按鈕將它關閉。
在 [ Greetings ] 視窗中,選擇 [ Goodbye ] 選項按鈕,然後選擇 [ 顯示 ] 按鈕。
程式碼行
MessageBox.Show("Goodbye.")
會以黃色反白顯示。選擇 F5 鍵繼續偵錯。 當訊息方塊出現時,選擇訊息方塊中的 [ 確定 ] 按鈕關閉它。
關閉應用程式視窗停止偵錯。
在功能表列上,選擇 [>偵錯停用所有中斷點]。
開啟 Greetings.xaml.cs,然後選取下列這一行:
MessageBox.Show("Hello.")
依序選取 [ 偵錯] 和 [ 切換中斷點],以新增中斷點。
在編輯器視窗最左緣、程式碼行的旁邊會出現一個紅色圓圈。
請選取下列程式碼行:
MessageBox.Show("Goodbye.")
。按 F9 鍵新增中斷點,然後按 F5 開始偵錯。
在 [ Greetings ] 視窗中,選擇 [ Hello ] 選項按鈕,然後選擇 [ 顯示 ] 按鈕。
程式碼行
MessageBox.Show("Hello.")
會以黃色反白顯示。 在 IDE 底部,[自動變數]、[區域變數] 和 [監看式] 視窗會一起停駐在左邊,而 [呼叫堆疊]、[中斷點]、[例外狀況設定]、[命令]、[即時運算] 和 [輸出] 視窗會一起停駐在右邊。在功能表列上,選擇 [偵>錯跳出]。
應用程式會繼續執行,而且會顯示含有文字 "Hello" 的訊息方塊。
選擇訊息方塊上的 [ 確定 ] 按鈕將它關閉。
在 [ Greetings ] 視窗中,選擇 [ Goodbye ] 選項按鈕,然後選擇 [ 顯示 ] 按鈕。
程式碼行
MessageBox.Show("Goodbye.")
會以黃色反白顯示。選擇 F5 鍵繼續偵錯。 當訊息方塊出現時,選擇訊息方塊中的 [ 確定 ] 按鈕關閉它。
關閉應用程式視窗停止偵錯。
在功能表列上,選擇 [>偵錯停用所有中斷點]。
檢視 UI 元素的標記法
在執行中的應用程式中,您應該會看到出現在視窗頂端的小工具。 小工具是執行時間協助程式,可讓您快速存取一些實用的偵錯功能。 選取第一個按鈕, 移至 [即時視覺化樹狀結構]。 您應該會看到包含頁面所有視覺元素的樹狀結構視窗。 展開節點以尋找您新增的按鈕。
的螢幕擷取畫面 即時
建置應用程式的發行版本
既然已經驗證應用程式的運作一切正常,您就可以準備其發行組建。
在主功能表上,選取 [建>置清除方案],以刪除在先前組建期間建立的中繼檔案和輸出檔案。 不需要此步驟,但會清除偵錯組建輸出。
使用工具列上的下拉式控制項,將 HelloWPFApp 的組建組態從 [ 偵 錯] 變更為 [ 發行 ], (顯示目前) 的 [偵錯]。
選擇 [建置建置方案] 來建> 置方案。
恭喜您完成此教學課程! 您可以在方案與專案目錄底下找到建置 的 .exe, (...\HelloWPFApp\HelloWPFApp\bin\Release) 。
下一步
恭喜您完成此教學課程! 若要更深入了解,請繼續下列教學課程。