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

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

本教程中,您将学习如何:

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

什么是 WPF?

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

WPF 是 .NET 的一部分,因此,如果你以前使用 ASP.NET 或 Windows 窗体使用 .NET 生成应用程序,则编程体验应该很熟悉。 WPF 使用可扩展应用程序标记语言 XAML 为应用程序编程提供声明性模型。 有关详细信息,请参阅 WPF .NET 概述

先决条件

需要 Visual Studio 才能完成本教程。 请访问 Visual Studio 下载页面,获取免费版本。

需要 Visual Studio 才能完成本教程。 请访问 Visual Studio 下载页面,获取免费版本。

创建项目

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

  1. 打开 Visual Studio。

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

    “创建新项目”对话框的屏幕截图,其中在搜索框中输入了 W P F,并选择了 W P F 应用(.NET Framework)项目模板。

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

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

    屏幕截图显示了包含 Hello W P F 应用文件的解决方案资源管理器。

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

  1. 打开 Visual Studio。

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

    Visual Studio 2022 中开始窗口的屏幕截图,其中突出显示了“创建新项目”选项。

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

    “创建新项目”对话框的屏幕截图,其中在搜索框中输入了“WPF”,在语言列表中选择了“Visual Basic”,并突出显示了“WPF 应用(.NET Framework)”项目模板。

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

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

    显示解决方案资源管理器中 HelloWPFApp 项目和解决方案中的文件的屏幕截图。

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

注释

有关 eXtensible 应用程序标记语言(XAML)的详细信息,请参阅 WPF 的 XAML 概述

配置窗口并添加文本

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

  1. 解决方案资源管理器中,打开 MainWindow.xaml

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

  3. 在 Visual Studio IDE 的左侧,选择 工具箱 选项卡。如果未看到,请从菜单栏中选择 “视图>工具箱”,或者从菜单栏或 Ctrl+Alt+X

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

    显示“工具箱”窗口的屏幕截图,其中突出显示了 Common WPF 控件列表中的 TextBlock 控件。

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

    显示位于 Greetings 窗体上的 TextBlock 控件和参考线的屏幕截图。

    XAML 标记应如以下示例所示:

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    
  6. 在 XAML 视图中,找到 TextBlock 的标记并更改 Text 属性:

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

    如有必要,再次将 TextBlock 居中

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

添加按钮和代码

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

  1. 工具箱中,找到 RadioButton

    显示“工具箱”窗口的屏幕截图,其中选中了 Common WPF 控件列表中的 RadioButton 控件。

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

    显示包含 TextBlock 控件和两个单选按钮的“问候”窗体的屏幕截图。

  3. 在左侧 RadioButton 控件的“属性”窗口中,将“属性”窗口顶部的 Name 属性更改为 HelloButton

    显示“HelloButton”RadioButton 的“解决方案资源管理器属性”窗口的屏幕截图。

  4. 在右侧 RadioButton 控件的 “属性” 窗口中,将 Name 属性更改为 GoodbyeButton

  5. 更新 XAML 中 HelloButtonGoodbyeButton内容 属性为 "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"
    

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

  7. 工具箱中,找到 按钮 控件,然后将按钮拖到 RadioButton 控件下的设计图面。

  8. 在 XAML 视图中,将 Button 控件 的内容 值从 Content="Button" 更改为 Content="Display"

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

    窗口应如下图所示。

    显示具有 TextBlock、标记为“Hello”和“Goodbye”的 RadioButtons 以及标记为“Display”的按钮控件的 Greetings 窗体的屏幕截图。

  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 或选择 “调试”启动调试器,然后 启动调试

    此时会显示 “中断模式” 窗口,“ 输出 ”窗口指示发生了异常。

    显示“异常未处理”窗口的屏幕截图,其中包含一条 System.IO.Exception 消息,内容为“无法定位资源 mainwindow.xaml”。

    显示“异常未处理”窗口的屏幕截图,其中包含一条 System.IO.Exception 消息,内容为“无法定位资源 mainwindow.xaml”。

  3. 依次选择“调试”>“停止调试”,停止调试器。

    在本部分开始时,已将 MainWindow.xaml 重命名为 Greetings.xaml 。 该代码仍将 MainWindow.xaml 称为应用程序的启动 URI,因此项目无法启动。

  4. 解决方案资源管理器中,打开 Application.xaml 文件。

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

  6. 再次启动调试器(按 F5)。 现在应会看到应用程序的 问候语 窗口。

    “欢迎”窗口的屏幕截图,其中显示文本块、单选按钮和按钮控件。选中了“Hello”单选按钮。

    Greetings 窗口的屏幕截图,其中显示了 TextBlock、RadioButtons 和按钮控件,并选择了“Hello”单选按钮。

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

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

使用断点进行调试

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

  1. 打开 Greetings.xaml.vb,然后选择以下行: MessageBox.Show("Hello.")

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

    编辑器窗口左边距代码行旁边会显示一个红色圆圈。

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

  4. F9 键添加断点,然后按 F5 开始调试。

  5. “问候语 ”窗口中,选择“ Hello ”按钮,然后选择“ 显示”。

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

    截屏显示 Visual Studio 中调试会话的界面,其中代码、诊断、自动窗口和调用堆栈窗口均已打开。执行在 Greetings.xaml.vb 文件中的断点处停止。

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

    应用程序再次启动。 此时会显示一个对话框,其中包含“Hello”一词。

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

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

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

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

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

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

生成发布版本

验证一切正常后,可以准备应用程序的发布版本。

  1. 选择 构建>清理解决方案 以删除在之前构建过程中创建的中间文件和输出文件。

  2. 使用工具栏上的下拉列表控件,将 HelloWPFApp 的生成配置从 Debug 更改为 Release

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

祝贺你完成本教程! 可以在解决方案和项目目录(...\HelloWPFApp\bin\Release)下找到生成的 .exe

后续步骤

转到下一篇文章,了解如何使用 Visual Basic 在 Visual Studio 中创建 Windows 窗体应用。

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