Share via

教程：使用 Visual Basic 创建 WPF 应用程序

  • 项目

在本教程中，你将在 Visual Studio 集成开发环境 (IDE) 中使用 Visual Basic 创建应用程序。 程序将使用 Windows Presentation Foundation (WPF) UI 框架。 使用本教程熟悉可在 Visual Studio 中使用的许多工具、对话框和设计器。

在本教程中，你将了解如何执行以下操作：

  • 创建项目
  • 配置窗口并添加文本
  • 添加按钮和代码
  • 调试并测试应用程序
  • 使用断点进行调试
  • 生成发布版本

什么是 WPF？

Windows Presentation Foundation (WPF) 是一个可创建桌面客户端应用程序的 UI（用户界面）框架。 WPF 开发平台支持广泛的应用开发功能，包括应用模型、资源、控件、图形、布局、数据绑定、文档和安全性。

WPF 是 .NET 的一部分，因此，如果你曾经使用 ASP.NET 或 Windows 窗体通过 .NET 构建应用程序，应该会熟悉此编程体验。 WPF 使用 Extensible Application Markup Language (XAML) 为应用程序编程提供声明性模型。 有关详细信息，请参阅 WPF .NET 概述。

先决条件

若要完成本教程，必须具有 Visual Studio。 请访问 Visual Studio 下载页获取免费版本。

若要完成本教程，必须具有 Visual Studio。 请访问 Visual Studio 下载页获取免费版本。

创建项目

在 Visual Studio 中创建应用程序时，应首先创建项目。 在本教程中，创建 Windows Presentation Foundation 项目。

  1. 打开 Visual Studio。

  2. 在“创建新项目”屏幕上，搜索“WPF”，选择“WPF 应用 (.NET Framework)”。 选择“下一页”。

    Screenshot of the Create a new project dialog with W P F entered in the search box and the W P F App (.NET Framework) project template selected.

  3. 为项目命名 HelloWPFApp，然后选择“创建”。

    Visual Studio 将创建 HelloWPFApp 项目和解决方案。 “解决方案资源管理器”显示各种文件。

    Screenshot shows Solution Explorer with Hello W P F App files.

“WPF 设计器”在拆分视图中显示 MainWindow.xaml 的设计视图和 XAML 视图。

  1. 打开 Visual Studio。

  2. 在“开始”窗口上，选择“创建新项目” 。

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

  3. 在“创建新项目”窗口上，搜索“WPF”，然后在“所有语言”下拉列表中选择“Visual Basic”。 选择“WPF 应用(.NET Framework)”，然后选择“下一步” 。

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, 'Visual Basic' selected in the languages list, and the 'WPF App (.NET Framework)' project template highlighted.

  4. 为项目命名 HelloWPFApp，然后选择“创建”。

    Visual Studio 将创建 HelloWPFApp 项目和解决方案。 “解决方案资源管理器”显示各种文件。

    Screenshot showing the files in the HelloWPFApp project and solution in the Solution Explorer.

“WPF 设计器”在拆分视图中显示 MainWindow.xaml 的设计视图和 XAML 视图。

注意

有关 Extensible Application Markup Language (XAML) 的详细信息，请参阅 WPF 的 XAML 概述。

配置窗口并添加文本

通过使用“属性”窗口，可以显示和更改项目项、控件和其他项的选项。

  1. 在“解决方案资源管理器”中，打开 MainWindow.xaml。

  2. 在 XAML 视图中，将 Window.Title 属性的值从 Title="MainWindow" 更改为 Title="Greetings"。

  3. 在 Visual Studio IDE 的左侧，选择“工具箱”选项卡。如果没有看到，则从菜单栏中选择“查看”>“工具箱”或者按 Ctrl+Alt+X 键 。

  4. 展开“通用 WPF 控件”或在搜索栏中输入“文本”以查找 TextBlock。

    Screenshot showing the Toolbox window with the TextBlock control highlighted in the list of Common WPF Controls.

  5. 选择 TextBlock 项并将其拖动到设计图面上的窗口。 可以通过拖动来移动 TextBlock 控件。 使用指南放置控件。

    Screenshot showing the TextBlock control positioned on the Greetings form with the guidelines visible.

    XAML 标记应如下面的示例所示：

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. 在 XAML 视图中，找到 TextBlock 的标记并更改“文本”属性：

    Text="Select a message option and then choose the Display button."

    如有必要，再次将 TextBlock 居中

  7. 通过选择“全部保存”工具栏按钮来保存应用。 或者，要保存应用，请从菜单栏中选择“文件”>“全部保存”（或按 Ctrl+Shift+S 键 ）。 最佳做法是尽早且经常保存。

添加按钮和代码

应用程序使用两个单选按钮和一个按钮。 使用这些步骤添加它们。 你将向按钮添加 Visual Basic 代码。 该代码引用单选按钮选择。

  1. 在“工具箱”中，查找“RadioButton”。

    Screenshot showing the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  2. 通过选择“RadioButton”项并将其拖到设计图面中，将两个 RadioButton 控件添加到设计图面。 通过选择按钮并使用箭头键来移动按钮。 将按钮并排放置在 TextBlock 控件下。

    Screenshot showing the Greetings form with a TextBlock control and two radio buttons.

  3. 在左侧 RadioButton 控件的“属性”窗口中，将“名称”属性（位于“属性”窗口顶部）更改为“HelloButton”。

    Screenshot showing the Solution Explorer Properties window for the 'HelloButton' RadioButton.

  4. 在右侧 RadioButton 控件的“属性”窗口中，将“名称”属性更改为“GoodbyeButton”。

  5. 在 XAML 中将 HelloButton 和 GoodbyeButton 的“内容”属性更新为 "Hello" 和 "Goodbye"。

    <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>

  6. 在 XAML 视图中，找到 HelloButton 的标记并添加“IsChecked”属性：

    IsChecked="True"

    值为 True 的 IsChecked 属性表示默认情况下选中 HelloButton。 此设置意味着始终选择单选按钮，即使程序启动时也是如此。

  7. 在“工具箱”中，查找“按钮”控件，并将按钮拖到设计图面中 RadioButton 控件的下方。

  8. 在 XAML 视图中，将“按钮”控件的“内容”值从 Content="Button" 更改为 Content="Display"。

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    你的窗口应类似于下图。

    Screenshot showing the Greetings form with the TextBlock, RadioButtons labeled 'Hello' and 'Goodbye', and the Button control labeled 'Display' all positioned on the form.

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

    此时，MainWindow.xaml.vb 会打开，光标位于 Button_Click 事件上。

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub

  10. 添加以下代码：

    If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

调试并测试应用程序

接下来将调试应用程序，查找错误并测试两个消息框是否正确显示。 若要查看此过程的工作原理，第一步故意将错误引入到程序中。

  1. 在“解决方案资源管理器”中，右键单击“MainWindow.xaml”，然后选择“重命名”。 将该文件重命名为“Greetings.xaml”。

  2. 通过按 F5或选择“调试”，然后选择“启动调试”，启动调试程序。

    将出现“中断模式”窗口，“输出”窗口指示发生异常。

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

  3. 依次选择“调试”>“停止调试”，停止调试程序。

    在本部分开头，你已将 MainWindow.xaml 重命名为 Greetings.xaml。 该代码仍然引用 MainWindow.xaml 作为应用程序的启动 URI，因此该项目无法启动。

  4. 在“解决方案资源管理器”中，打开“Application.xaml”文件。

  5. 将 StartupUri="MainWindow.xaml" 更改为 StartupUri="Greetings.xaml"

  6. 再次启动调试程序 （按“F5”）。 你现在应该可以看到应用程序的 Greetings 窗口。

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

  7. 选择“Hello”和“显示”按钮，然后选择“Goodbye”和“显示”按钮。 使用右上角的关闭图标停止调试。

有关详细信息，请参阅生成 WPF 应用程序 (WPF) 和调试 WPF。

使用断点进行调试

可通过添加一些断点，在调试期间测试代码。

  1. 打开“Greetings.xaml.vb”，并选择以下行：MessageBox.Show("Hello.")

  2. 通过按 F9 或选择“调试”，然后选择“切换断点”添加断点。

    编辑器窗口左侧边距中该代码行附近将显示一个红圈。

  3. 选择以下行： MessageBox.Show("Goodbye.")。

  4. 按“F9”键添加断点，然后按“F5”启动调试。

  5. 在“Greetings”窗口中，选择“Hello”按钮，然后选择“显示”。

    行 MessageBox.Show("Hello.") 将用黄色突出显示。 在 IDE 底部，“自动”、“局部变量”和“监视”窗口一起停靠在左侧。 “调用堆栈”、“断点”、“异常设置”、“命令”、“立即”和“输出”窗口一起停靠在右侧。

    Screenshot showing a debug session in Visual Studio with the Code, Diagnostics. Autos, and Call Stack windows open. Execution is stopped at a breakpoint in Greetings.xaml.vb.

  6. 在菜单栏上，选择“调试”>“跳出”。

    应用程序再次启动。 此时会显示一个带有单词“Hello”的对话框。

  7. 选择“确定”按钮关闭对话框。

  8. 在 “Greetings” 窗口中，选择 “Goodbye” 单选按钮，然后选择 “显示” 按钮。

    行 MessageBox.Show("Goodbye.") 将用黄色突出显示。

  9. 按“F5”键继续调试。 出现对话框时，选择“确定”关闭对话框。

  10. 关闭应用程序窗口，停止调试。

  11. 在菜单栏上，选择“调试”>“禁用所有断点”。

生成发布版本

确认一切就绪后，可以准备该应用程序的发布版本。

  1. 选择“生成”>“清理解决方案”，删除上一生成过程中创建的中间文件和输出文件。

  2. 使用工具栏上的下拉列表控件把 HelloWPFApp 的生成配置从“调试”更改为“发布”。

  3. 选择“生成”>“生成解决方案” 。

恭喜你完成本教程！ 可在解决方案和项目目录 (...\HelloWPFApp\bin\Release) 下找到生成的 .exe 文件。

后续步骤

继续阅读下一篇文章，了解如何在 Visual Studio 中使用 Visual Basic 创建 Windows 窗体应用。

创建 Windows 窗体应用程序

有关 Visual Studio 的详细信息，请参阅以下资源：