演练：用 C# 或 Visual Basic 了解 Visual Studio IDE

项目
02/23/2013

通过完成本演练，您将熟悉在使用 Visual Studio 开发应用程序时所使用的许多工具、对话框和设计器。当您更多地了解集成开发环境 (IDE) 中的工作时，将创建一个简单“Hello, World”样式应用程序、设计 UI、添加代码以及调试错误。

本主题包含以下各节：

配置 IDE

创建一个简单应用程序

调试并测试应用程序

备注

本演练基于 Visual Studio 2012 专业版。您的 Visual Studio 副本可能显示用户界面元素的不同名称或位置。您安装的 Visual Studio 版本以及使用的设置决定了这些元素。有关此类设置的更多信息，请参见 Visual Studio 设置。

配置 IDE

首次启动 Visual Studio 时，必须选择将一组预定义的自定义项应用于 IDE 的设置组合。每个设置组合旨在使您更轻松地开发应用程序。

图 1：选择默认环境设置对话框

“选择默认环境设置”对话框

本演练在应用**“常规开发设置”的情况下编写，对 IDE 应用最少量的自定义项。您可以通过使用“导入和导出设置向导”**更改您的设置组合。有关更多信息，请参见如何：更改选择设置。

在您打开 Visual Studio 后，可识别工具窗口、菜单和工具栏，以及主窗口空间。工具窗口停靠在应用程序窗口的左侧和右侧，其顶部有**“快速启动”、菜单栏和标准工具栏。应用程序窗口的中心是“起始页”**。加载解决方案或项目时，此空间将显示编辑器和设计器。开发应用程序时，大部分时间都将用在此中心区域。

图 2：Visual Studio IDE

应用了常规设置的 IDE

您可以通过使用**“选项”对话框对 Visual Studio 进行其他自定义操作，如更改编辑器中文本的字体和字号，或者更改 IDE 的主题颜色。根据您采用的设置组合，在该对话框中的一些项可能不会自动出现。您可以通过选中“显示全部设置”**复选框确保显示所有可能的选项。

图 3：选项对话框

具有“显示所有设置”选项的“选项”对话框

在此示例中，将 IDE 的颜色主题从亮色更改至暗色。

若要更改 IDE 的颜色主题

打开**“选项”**对话框。
将**“配色方案”更改为“深”，然后单击“确定”**。

Visual Studio 的颜色应与下图相匹配：

应用了深色主题的 IDE

本演练剩余部分使用的颜色主题是浅色主题。有关自定义 IDE 的更多信息，请参见自定义开发环境。

创建一个简单应用程序

创建项目

当在 Visual Studio 中创建应用程序时，应首先创建项目和解决方案。在此示例中，您将创建一个 Windows Presentation Foundation 解决方案。

创建 WPF 项目

创建新项目。在菜单栏上，选择**“文件”，“新建**、“项目”。

您还可以在**“快速启动”**框中键入新项目完成相同的工作。
选择 Visual Basic 或 Visual C# WPF 应用程序模板，然后将项目命名为 HelloWPFApp。

OR

HelloWPFApp 项目和解决方案已创建，且不同文件出现在**“解决方案资源管理器”**中。 WPF 设计器在拆分视图中显示设计视图和 MainWindow.xaml 的 XAML 视图。有关更多信息，请参见面向 Windows 窗体开发人员的 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 控件。
添加两个单选按钮控件到设计图面上，将其移动使之并排显示在 TextBlock 控件下。

您的窗口应如下所示：

图 8：问候窗口中的 RadioButton。
在左侧 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：最终问候 UI

包含控制标签的 Greetings 窗体

将代码添加到显示按钮

此应用程序运行时，用户首先选择单选按钮并选择**“显示”**按钮之后，会显示一个消息框。一个消息框将显示为 Hello，另一个将为 Goodbye。要创建此行为，需将代码添加至 Greetings.xaml.vb 或 Greetings.xaml.cs 中的 Button_Click 事件。

添加代码到显示消息框

在设计图面上，双击**“显示”**按钮。

Greetings.xaml.vb 或 Greetings.xaml.cs 打开，光标位于 Button_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

在**“解决方案资源管理器”**中，打开 XAML 视图中的 App.xaml 文件（在 C# 项目中）或 Application.xaml 文件（在 Visual Basic 项目中）（在设计视图中不能打开）。
将 StartupUri="MainWindow.xaml" 更改为 StartupUri="Greetings.xaml"，然后保存更改。

再次启动调试器。您应看到应用程序的“问候”窗口。

要使用断点进行调试

通过添加一些断点，可以在调试期间测试代码。可以通过在菜单栏中选择**“调试”、“切换断点”**，或者通过在编辑器中想要中端的代码行旁边的右边距中进行单击添加断点。

若要添加断点

打开 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 键，停止调试。
在菜单栏上，选择**“调试”、“禁用所有断点”**。