逐步解說：使用 C# 或 Visual Basic 探索 Visual Studio IDE

發行項
02/28/2013

藉由完成這個逐步解說，讓自己更熟悉許多可在使用 Visual Studio 開發應用程式時的運用工具、對話方塊和設計工具。當您了解更多關於整合開發環境 (IDE) 的運作時，您將會建立簡單的 "Hello, World" 樣式應用程式、設計 UI、加入程式碼，以及進行偵錯。

此主題包括下列章節：

設定 IDE。

建立簡單應用程式

偵錯和測試應用程式

注意事項
本逐步解說所根據的是 Visual Studio 2012 的 Professional 版。在下列指示的中，您的電腦可能會顯示不同的名稱或位置：對於某些使用者介面項目，您的 Visual Studio 版本可能會顯示不同的名稱或位置。您所擁有的 Visual Studio 版本和使用的設定決定了這些項目。如需這些設定的詳細資訊，請參閱Visual Studio 設定。

本逐步解說所根據的是 Visual Studio 2012 的 Professional 版。在下列指示的中，您的電腦可能會顯示不同的名稱或位置：對於某些使用者介面項目，您的 Visual Studio 版本可能會顯示不同的名稱或位置。您所擁有的 Visual Studio 版本和使用的設定決定了這些項目。如需這些設定的詳細資訊，請參閱Visual Studio 設定。

設定 IDE。

當您初次啟動 Visual Studio 時，您必須指定一組設定作為預定義的 IDE 自訂設定。每個設定組合都是為了讓您更輕鬆地開發應用程式而精心設計的。

圖 1：[選擇預設環境設定] 對話方塊

[選擇預設環境設定] 對話方塊

這個逐步解說會使用 [一般開發設定] 來說明，這組設定使用最少的 IDE 自訂設定。您可以使用 [匯入和匯出設定精靈] 變更設定組合。如需詳細資訊，請參閱HOW TO：變更選取設定。

開啟 Visual Studio 之後，您可以看到工具視窗、功能表和工具列，以及主視窗空間。工具視窗停駐在應用程式視窗的左右端，同時 [快速啟動]、功能表列和標準工具列在視窗的上方。在應用程式視窗中央的是 [起始頁]。載入方案或專案時，編輯器和設計工具會在此空間中出現。在開發應用程式時，您大部分時間都會在此中央區域工作。

圖 2：Visual Studio IDE

已套用一般設定的 IDE

您可以使用 [選項] 對話方塊，對 Visual Studio 進行其他自訂，例如變更編輯器內文字的字體和大小，或 IDE 的色彩佈景主題。根據您套用的設定，某些對話方塊中的項目可能不會自動出現。您可以選取 [顯示所有設定] 核取方塊以確保所有可能的選項都會出現。

圖 3：[選項] 對話方塊

包含 [顯示所有設定] 選項的 [選項] 對話方塊

在此範例中，您會將 IDE 的色彩佈景主題由亮轉暗。

若要變更 IDE 的色彩佈景主題

開啟 [選項] 對話方塊。
將 [色彩佈景主題。] 變更為 [深色]，然後按一下 [確定]。

在 Visual Studio 顯示的色彩應該像下面的影像：

套用暗色調佈景主題的 IDE

本逐步解說其餘部分中使用的色彩佈景主題是亮色調佈景主題。如需自訂 IDE 的詳細資訊，請參閱自訂開發環境。

建立簡單應用程式

建立專案

當您在 Visual Studio 中建立應用程式時，您需先建立一個專案和一個方案。在這個範例中，您將建立 Windows Presentation Foundation 方案。

若要建立 WPF 專案

建立新的專案。在功能表列上，選擇 [檔案]、[新增]、[專案]。

您也可以 [快速啟動] 方塊中輸入 New Project，執行相同的動作。
選擇 Visual Basic 或 Visual C# WPF 應用程式範本，然後將專案命名為 HelloWPFApp。

OR

HelloWPFApp 方案和專案會建立，而 [方案總管] 中會出現不同的檔案。WPF Designer 會在分割檢視中顯示 MainWindow.xaml 的設計檢視和 XAML 檢視。(如需詳細資訊，請參閱適用於 Windows Form 開發人員的 WPF 設計工具)。下列項目會在 [方案總管] 中出現：

圖 5：專案項目

已載入 HelloWPFApp 檔案的 [方案總管]

建立專案之後，您可以進行自訂。您可以使用 [屬性] 視窗，在應用程式中顯示和變更專案項目、控制項及其他項目的選項。您可以使用專案屬性或屬性頁，顯示並變更專案和方案的選項。

若要變更 MainWindow.xaml 的名稱

在下列程序中，您將會賦予 MainWindow 一個更為特定的名稱。在 [方案總管] 中，選取 MainWindow.xaml。您應該會在視窗下方看到該檔案的 [屬性] 視窗。如果您沒有看到 [屬性] 視窗，請在 [方案總管] 中選取 MainWindow.xaml，開啟捷徑功能表 (以滑鼠右鍵按一下) 並選取 [屬性]。將 [檔案名稱] 屬性變更為 Greetings.xaml。

[方案總管] 會顯示檔案現在的名稱是 Greetings.xaml，以及 MainWindow.xaml.vb 或 MainWindow.xaml.cs 現在的名稱是 Greetings.xaml.vb 或 Greetings.xaml.cs。
在 [方案總管] 中，於 [設計工具] 檢視中開啟 Greetings.xaml，並選取視窗的標題列。
在 [內容] 視窗中，將 [標題] 屬性的值變更為 Greetings。

警告

這項變更會導致錯誤，您將在稍後步驟中學習如何加以偵錯和修正。

警告
這項變更會導致錯誤，您將在稍後步驟中學習如何加以偵錯和修正。

MainWindow.xaml 的標題列顯示的文字現在變成 Greetings。

設計使用者介面 (UI)

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

若要加入 TextBlock 控制項

開啟 [工具箱] 視窗。在 [設計工具] 視窗左側，您應該可以找到它。您也可以從 [檢視] 功能表，或藉由按 CTRL+ALT+X 鍵來開啟它。
在 [工具箱] 中，搜尋 TextBlock 控制項。
將 TextBlock 控制項加入至設計介面，並將視窗頂端附近的控制項置中。

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

圖 7：具有 TextBlock 控制項的 Greetings 視窗

問候表單上的 [TextBlock] 控制項

XAML 標記應該看起來與下列程式碼範例相似：

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

若要自訂文字方塊中顯示的文字

在 XAML 檢視中，找出 TextBlock 的標記並變更 Text 屬性：Text=”Select a message option and then choose the Display button.”
如果 TextBlock 未展開到符合 [設計] 檢視的大小，請放大 TextBlock 控制項，以顯示所有文字。
儲存您所作的變更。

接下來，您會將兩個 RadioButton 控制項加入至表單。

若要加入選項按鈕

在 [工具箱] 中，搜尋 RadioButton 控制項。
將兩個 RadioButton 控制項加入至設計介面，並移動使之並排顯示於 TextBlock 控制項下方。

您的視窗應該會像這樣：

圖 8：Greetings 視窗中的 RadioButtons。
在左側 RadioButton 控制項的 [屬性] 視窗中，將 [名稱] 屬性 (在 [屬性] 視窗頂端的屬性) 變更為 RadioButton1。
在右邊 RadioButton 控制項的 [內容] 視窗中，將 [名稱] 屬性變更為 RadioButton2，然後儲存您的變更。

您現在可以為每個 RadioButton 控制項加入顯示的文字。下列步驟會更新 RadioButton 控制項的 [內容] 屬性。

若要為每個選項按鈕加入顯示的文字

在設計介面上，開啟 RadioButton1 的捷徑功能表，選擇 [編輯文字]，然後輸入 Hello。
開啟 RadioButton2 的捷徑功能表，選擇 [編輯文字]，然後輸入 Goodbye。

最後一個要加入的 UI 項目是 Button 控制項。

若要加入按鈕控制項

在 [工具箱] 中，搜尋 [按鈕] 控制項，然後在設計介面中將其加入至 RadioButton 控制項底下。
在 XAML 檢視中，將 Button 控制項的 [內容] 的值由 Content=”Button” 變更為 Content=”Display”，然後儲存變更。

這個標記應類似於下列範例：<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

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

圖 9：最後的 Greetings UI

具有控制項標籤的問候表單

將程式碼加入至 Display Button

此應用程式執行時，訊息方塊會在使用者選擇選項按鈕並選擇 [顯示] 按鈕之後出現。一個訊息方塊會顯示 Hello，而另外一個會顯示 Goodbye。若要建立這個行為，您必須將程式碼加入至 Greetings.xaml.vb 或 Greetings.xaml.cs 中的 Button_Click 事件。

加入程式碼以顯示訊息方塊

在設計介面上，按兩下 [顯示] 按鈕。

Greetings.xaml.vb 或 Greetings.xaml.cs 隨即開啟，並將游標置於 Button_Click 事件中。您也可以加入 Click 事件處理常式，如下所示：

在 Visual Basic 中，事件處理常式如下所示：
```
Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)

End Sub
```
在 Visual C# 中，事件處理常式如下所示：
```
private void Button_Click_1(object sender, RoutedEventArgs e)
{

}
```

對於 Visual Basic，請輸入下列程式碼：

If RadioButton1.IsChecked = True Then
    MessageBox.Show("Hello.")
Else RadioButton2.IsChecked = True
    MessageBox.Show("Goodbye.")
End If

對於 Visual C# 中，請輸入下列程式碼：

if (RadioButton1.IsChecked == true)
{
    MessageBox.Show("Hello.");
}
else
{
    RadioButton2.IsChecked = true;
    MessageBox.Show("Goodbye.");
}

儲存應用程式。

偵錯和測試應用程式

接下來，您會偵錯應用程式尋找錯誤，並測試是否兩個訊息方塊都正確出現。如需詳細資訊，請參閱建置 WPF 應用程式 (WPF)與偵錯 WPF。

尋找和修正錯誤。

在這個步驟中，您將會發現我們先前變更主視窗 XAML 檔案名稱所產生的錯誤。

若要開始偵錯並找出錯誤

依序選取 [偵錯] 和 [開始偵錯]，以啟動偵錯工具。

對話方塊會出現，表示發生 IOException：找不到資源 'mainwindow.xaml'。
選擇 [確定] 按鈕，然後停止偵錯工具。

我們在這個逐步解說開始時將 MainWindow.xaml 重新命名為 Greetings.xaml，但是方案仍然指向 MainWindow.xaml 做為應用程式的啟動 URI，因此專案無法啟動。

若要指定 Greetings.xaml 做為啟動 URI

在 [方案總管] 中，將 App.xaml 檔案 (在 C# 專案中) 或 Application.xaml 檔案 (在 Visual Basic 專案中) 開啟於 XAML 檢視中 (無法在 [設計] 檢視中開啟)。
將 StartupUri="MainWindow.xaml" 變更為 StartupUri="Greetings.xaml"，然後儲存變更。

重新啟動偵錯工具。您應該會看到應用程式的 Greetings 視窗。

若要使用中斷點進行偵錯

藉由加入一些中斷點，您就可以在偵錯時測試程式碼。您可以選擇功能表列上的 [除錯]、[切換中斷點]，或是在您要設定中斷點的那行程式碼旁邊，按一下編輯器的左邊界來加入中斷點。

若要加入中斷點

開啟 Greetings.xaml.vb 或 Greetings.xaml.cs，然後選取下列程式碼行：MessageBox.Show("Hello.")
依序選取 [偵錯] 和 [切換中斷點]，以新增中斷點。

紅色圓圈會在編輯器視窗最左緣、程式碼行的旁邊出現。
選取下列程式碼行：MessageBox.Show("Goodbye.")。
選擇 F9 鍵加入中斷點，然後選擇 F5 鍵開始偵錯。
在 [Greetings] 視窗中，選擇 [Hello] 選項按鈕，然後選擇 [顯示] 按鈕。

程式碼行 MessageBox.Show("Hello.") 會以黃色反白顯示。在 IDE 底部，[自動變數]、[區域變數] 和 [監看式] 視窗會一起停駐在左邊，而 [呼叫堆疊]、[中斷點]、[命令]、[即時運算] 和 [輸出] 視窗會一起停駐在右邊。
在功能表列上，選擇 [偵錯]、[跳離函式]。

應用程式會繼續執行，而且含有文字 "Hello" 的訊息方塊會出現。
選擇訊息方塊上的 [確定] 按鈕將它關閉。
在 [Greetings] 視窗中，選擇 [Goodbye] 選項按鈕，然後選擇 [顯示] 按鈕。

程式碼行 MessageBox.Show("Goodbye.") 會以黃色反白顯示。
選擇 F5 鍵繼續偵錯。當訊息方塊出現時，選擇訊息方塊中的 [確定] 按鈕關閉它。
選擇 SHIFT + F5 鍵以停止偵錯。
在功能表列上，選擇 [偵錯]、[停用所有中斷點]。