【.Net開發】之使用 C# 創建簡單WPF應用

前言

以下內容翻譯自微軟官方文檔

鏈接:https://docs.microsoft.com/zh-cn/visualstudio/get-started/csharp/tutorial-wpf?toc=%2Fdotnet%2Fdesktop-wpf%2Ftoc.json&bc=%2Fdotnet%2Fbreadcrumb%2Ftoc.json&view=vs-2019

通過完成本教程,你將熟悉在使用 Visual Studio 開發應用程序時可使用的許多工具、對話框和設計器。你將創建“Hello, World”應用程序、設計 UI、添加代碼並調試錯誤。在此期間,你將瞭解如何使用集成開發環境 (IDE)。

前提條件

  • 如果尚未安裝 Visual Studio,請轉到 Visual Studio 下載頁免費安裝。
  • 在本教程中,可以使用 .NET Framework 或 .NET Core。 .NET Core 是較新的、更新式的框架。 .NET Core 需要 Visual Studio 2019 16.3 或更高版本。

配置 IDE

啓動 Visual Studio 時,“啓動”窗口首先打開。 選擇“繼續但無需代碼”打開開發環境。 將看到工具窗口、菜單和工具欄,以及主窗口空間。 “工具”窗口停靠在“應用程序”窗口左右兩側,其頂部有搜索框、菜單欄和標準工具欄。 加載解決方案或項目時,編輯器和設計器顯示在應用程序窗口中間。 開發應用程序時,大部分時間都將用在此中心區域。

創建項目

在 Visual Studio 中創建應用程序時,應首先創建項目和解決方案。 此示例將創建一個 Windows Presentation Foundation (WPF) 項目。

  1. 打開 Visual Studio 2019。
  2. 在“開始”窗口上,選擇“創建新項目”。

查看“創建新項目”窗口

3. 在“創建新項目”屏幕上,搜索“WPF”,選擇“WPF 應用(.NET Core)”,然後選擇“下一步”。

“創建新項目”對話框中的 WPF 應用模板

 備註:你可能會發現兩個 WPF 桌面模板,一個用於 .NET Framework,另一個用於 .NET Core。 .NET Core 模板在 Visual Studio 2019 16.3 及更高版本中可用。 你可以在本教程中使用任何一個,但建議使用 .NET Core 進行新的開發。

4.在下一個屏幕中,爲項目指定名稱“HelloWPFApp”,然後選擇“創建”。

將項目命名爲“HelloWPFApp”

Visual Studio 將創建 HelloWPFApp 項目和解決方案,“解決方案資源管理器”將顯示各種文件。 “WPF 設計器”在拆分視圖中顯示 MainWindow.xaml 的設計視圖和 XAML 視圖。 您可以滑動拆分器,以顯示任一視圖的更多或更少部分。 您可以選擇只查看可視化視圖或 XAML 視圖。

IDE 中的 WPF 項目和解決方案

 備註:若要詳細瞭解 XAML (eXtensible Application Markup Language),請參閱 WPF 的 XAML 概述頁。

你可以在創建項目後進行自定義。 若要執行此操作,請從“視圖”菜單中選擇“屬性窗口”或按 F4。 然後可顯示和更改應用程序中的項目項、控件和其他項的選項。

屬性窗口

更改 MainWindow.xaml 的名稱

爲 MainWindow 指定更具體的名稱。 在“解決方案資源管理器”中,右鍵單擊“MainWindow.xaml”,然後選擇“重命名”。 將該文件重命名爲“Greetings.xaml”。

設計用戶界面 (UI)

如果設計器未打開,請選擇“Greetings.xaml”,然後按“Shift+F7”打開設計器。

我們會將三種類型的控件添加到此應用程序:一個 TextBlock 控件、兩個 RadioButton 控件和一個 Button 控件。

添加 TextBlock 控件

  1. 按“Ctrl+Q”激活搜索框,然後鍵入“工具箱”。 從結果列表中選擇“查看”>“工具箱”。

  2. 在“工具箱”中,展開“公共 WPF 控件”節點以查看 TextBlock 控件。

    突出顯示 TextBlock 控件的工具箱

  3. 通過選擇“TextBlock”項並將其拖到設計圖面的窗口中,將 TextBlock 控件添加到設計圖面中。 把控件居中到窗口的頂部附近。 在 Visual Studio 2019 和更高版本中,可以使用紅色參考線來使控件居中。

    你的窗口應與下圖類似:

    Greetings 窗體上的 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 控件下。 使用紅色參考線來對齊控件。

你的窗口應如下所示:

  1.                           包含 TextBlock 和兩個單選按鈕的“Greetings”窗體

     

  2. 3. 在左側 RadioButton 控件的 “屬性” 窗口中,將 “名稱” 屬性(位於 “屬性” 窗口頂部)更改爲 HelloButton

                                              RadioButton 屬性窗口

  3. 4. 在右側 RadioButton 控件的“屬性”窗口中,將“名稱”屬性更改爲 GoodbyeButton,然後保存更改。

接下來,將爲每個 RadioButton 控件添加顯示文本。 以下程序將更新 RadioButton 控件的 “內容” 屬性。

添加每個單選按鈕的顯示文本

  1. 在 XAML 中將HelloButton 和 GoodbyeButton 的“內容”屬性更新爲 "Hello" 和 "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. 在“工具箱”中,找到“按鈕”控件,然後通過將控件拖到設計視圖的窗體中,將其添加到 RadioButton 控件下方的設計界面中。 如果使用的是 Visual Studio 2019 或更高版本,則會出現一條紅線,幫助你使控件居中。
  2. 在 XAML 視圖中,將 Button 控件的“內容”值從 Content="Button" 更改爲 Content="Display",然後保存更改。

你的窗口應與下圖類似。

                        包含控制標籤的 Greetings 窗體

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 將顯示另一個。 若要創建此行爲,請將代碼添加到 Greetings.xaml.vb 中的 Button_Click 事件。

  1. 在設計圖面上,雙擊 “顯示” 按鈕。

此時,“Greetings.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 文件的名稱而引起的錯誤。

開始調試和查找錯誤

  1. 通過按 F5或選擇“調試”,然後選擇“啓動調試”,啓動調試程序。

將出現“中斷模式”窗口,“輸出”窗口指示發生 IOException:“找不到資源 'mainwindow.xaml'”。

IOException 消息

2. 依次選擇“調試” > “停止調試”,停止調試程序。

開始學習本教程時,我們將 MainWindow.xaml 重命名爲 Greetings.xaml,但是該代碼仍然引用 MainWindow.xaml 作爲應用程序的啓動 URI,因此該項目無法啓動。

將 Greetings.xaml 指定爲啓動 URI

  1. 在“解決方案資源管理器”中,打開“App.xaml”文件。
  2. 將 StartupUri="MainWindow.xaml" 更改爲 StartupUri="Greetings.xaml",然後保存更改。

再次啓動調試程序 (按“F5”)。 應可看到應用程序的 Greetings 窗口。

正在運行的應用的屏幕截圖

現在關閉應用程序窗口,停止調試。

使用斷點進行調試

可通過添加一些斷點,在調試期間測試代碼。 可以通過選擇“調試” > “切換斷點”、通過在編輯器中想要添加斷點的代碼行旁邊的左邊距中單擊或按 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”的消息框。

  1. 7. 選擇消息框上的 “確定” 按鈕將其關閉。

  2. 8. 在 “Greetings” 窗口中,選擇 “Goodbye” 單選按鈕,然後選擇 “顯示” 按鈕。行 MessageBox.Show("Goodbye.") 將用黃色突出顯示。

  3. 9. 按“F5”鍵繼續調試。 當消息框出現時,選擇消息框上的 “確定” 按鈕將其關閉。

  4. 10. 關閉應用程序窗口,停止調試。

  5. 11. 在菜單欄上,選擇“調試” > “禁用所有斷點”。

查看 UI 元素的表示形式

在正在運行的應用中,你會看到窗口頂部顯示了一個小組件。 這是一個運行時幫助程序,通過它可以快速訪問一些有用的調試功能。 單擊第一個按鈕“轉到實時可視化樹”。 隨即會看到一個包含一個樹的窗口,樹中包含頁面的所有可視元素。 展開節點,找到你添加的按鈕。

實時可視化樹窗口的屏幕截圖

生成應用程序的發佈版本

確認一切就緒後,可以準備該應用程序的發佈版本。

  1. 在主菜單中,依次選擇“生成” > “清理解決方案”,刪除上一生成過程中創建的中間文件和輸出文件。這不是必需的,但它會清理調試生成輸出。
  2. 使用工具欄(當前顯示“調試”)上的下拉列表控件把 HelloWPFApp 的生成配置從“調試”更改爲“發佈”。
  3. 選擇“生成” > “生成解決方案”來生成解決方案。
  4. 可在解決方案和項目目錄 (...\HelloWPFApp\HelloWPFApp\bin\Release) 下找到生成的 .exe 文件。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章