教學課程:使用 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) 專案。

  1. 開啟 Visual Studio。

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

    Visual Studio 2019 中 [建立新專案] 視窗的 [建立新專案] 視窗螢幕擷取畫面,其中已醒目提示 [建立新專案] 選項。檢視

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

    [建立新專案] 對話方塊的螢幕擷取畫面,其中已于搜尋方塊中輸入 [WPF],並醒目提示 [WPF 應用程式] 專案範本。

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

    [設定新專案] 對話方塊的螢幕擷取畫面,其中已于 [專案名稱] 欄位中輸入 'HelloWPFApp'。

  5. [其他資訊] 視窗中,應該已為您的目標架構選取 .NET Core 3.1 。 如果沒有,請選取 [.NET Core 3.1]。 接著,選擇 [建立]。

    在 [其他資訊] 視窗中,確定已選取 .NET Core 3.1

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

在 IDE 中的 WPF 專案和方案

注意

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

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

屬性視窗顯示

  1. 開啟 Visual Studio。

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

    Visual Studio 2022 中 [開始] 視窗的螢幕擷取畫面,其中已醒目提示 [建立新專案] 選項。

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

    [建立新專案] 對話方塊的螢幕擷取畫面,其中已于搜尋方塊中輸入 [WPF],並醒目提示 [WPF 應用程式] 專案範本。

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

    [設定新專案] 對話方塊的螢幕擷取畫面,其中已于 [專案名稱] 欄位中輸入 'HelloWPFApp'。

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

    在 [架構] 欄位中選取 [其他資訊] 視窗的 [其他資訊] 視窗螢幕擷取畫面,其中已選取 [.NET 6.0 (長期支援) ]。

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

Visual Studio IDE 中已開啟方案總管的 HelloWPFApp 專案和方案螢幕擷取畫面,而 WPF Designer中開啟 'MainWindow.xaml' 的 XAML 和設計工具檢視。

注意

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

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

屬性視窗螢幕擷取畫面,其中顯示 HelloWPFApp 專案 [解決方案屬性] 的 [Misc] 區段。

設計使用者介面 (UI)

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

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

新增 TextBlock 控制項

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

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

    [工具箱],其中已醒目提示[工具箱] 視窗的 [TextBlock] 控制項醒目提示 [

  3. 選擇 TextBlock 項目並將它拖曳至設計介面上的視窗,即可將 TextBlock 控制項加入設計介面。 將控制項置中靠近視窗頂端。 在 Visual Studio 2019 和更新版本中,您可以使用紅色指導方針將控制項置中。

    您的視窗應該會和下圖類似:

    MainWindow 表單上的 TextBlock 控制項

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

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    
  1. Ctrl+Q以啟動搜尋方塊,然後輸入[工具箱]。 從結果清單中選擇 [ 檢視 > 工具箱 ]。

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

    [工具箱] 視窗的螢幕擷取畫面,其中已選取 [一般 WPF 控制項] 清單中的 TextBlock 控制項。

  3. 選擇 TextBlock 項目並將它拖曳至設計介面上的視窗,即可將 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 控制項。

    已選取 RadioButton 控制項的 [工具箱] 視窗的 [工具箱] 視窗的螢幕擷取畫面,

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

    您的視窗應該會像這樣:

    具有 TextBlock 的 MainWindow 表單和兩個選項按鈕

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

    RadioButton 屬性視窗 RadioButton

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

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

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

    [工具箱] 視窗的螢幕擷取畫面,其中已選取 Common WPF 控制項清單中的 RadioButton 控制項。

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

    您的視窗應該會像這樣:

    Greetings.xaml 的 [設計] 視窗螢幕擷取畫面,其中顯示 TextBlock 控制項和位於設計介面上的兩個 RadioButton 控制項。

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

    RadioButton 控制項屬性視窗螢幕擷取畫面。Name 屬性的值已變更為 '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 控制項底下。 如果您使用 Visual Studio 2019 或更新版本,紅色線條可協助您置中控制項。

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

    您的視窗應該會和下圖類似。

    具有控制項標籤的 MainWindow 表單主控制項的

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

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

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

    Greetings.xaml 的 [設計] 視窗螢幕擷取畫面,其中顯示 TextBlock 控制項、兩個標示為 'Hello' 和 'Goodbye' 的 RadioButton 控制項,以及標示為 '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. 儲存應用程式。

此應用程式執行時,會在使用者選擇選項按鈕並選擇 [顯示] 按鈕之後顯示訊息方塊。 一個訊息方塊會顯示 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'。

    IOException 訊息[

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

我們已將 MainWindow.xaml 重新命名為 Greetings.xaml,但程式碼仍會將 MainWindow.xaml 稱為應用程式的啟動 URI,因此專案無法啟動。

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

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

    [輸出] 視窗的螢幕擷取畫面,其中顯示 System.IO.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)。 您現在應該會看到應用程式的 [問候語 ] 視窗。

執行中應用程式的螢幕快照

[問候語] 視窗的螢幕擷取畫面,其中顯示 TextBlock、RadioButtons 和 Button 控制項。已選取 [Hello] 選項按鈕。

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

使用中斷點進行偵錯

新增一些中斷點,即可在偵錯時測試程式碼。 您可以選擇 [> 錯切換中斷點] 來新增中斷點,方法是按一下您要發生中斷的程式程式碼旁的編輯器左邊界,或按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. 在功能表列上,選擇 [>偵錯停用所有中斷點]。

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

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

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

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

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

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

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

    Visual Studio 中偵錯會話的螢幕擷取畫面。Greetings.xaml.cs 的程式碼視窗會顯示在中斷點停止執行,並醒目提示黃色的行。

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

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

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

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

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

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

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

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

檢視 UI 元素的標記法

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

[即時視覺化樹狀結構] 視窗的螢幕擷取畫面 即時

[即時視覺化樹狀結構] 視窗的螢幕擷取畫面,其中顯示執行時HelloWPFApp.exe視覺元素的樹狀結構。

建置應用程式的發行版本

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

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

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

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

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

下一步

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

另請參閱