在本教程中,将在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 中创建应用程序时,首先创建一个项目。 在本教程中,创建Windows Presentation Foundation项目。
打开Visual Studio。
在“开始”窗口上,选择创建新项目。
在 创建一个新项目窗口中,搜索 WPF 并在 all languages 列表中选择 Visual Basic。 选择WPF应用(.NET Framework),然后选择Next。
为项目命名 HelloWPFApp,然后选择“ 创建”。
Visual Studio创建 HelloWPFApp 项目和解决方案。 解决方案资源管理器显示各种文件。
WPF Designer在拆分视图中显示设计视图和MainWindow.xaml 的 XAML 视图。
打开Visual Studio。
在“开始”窗口上,选择创建新项目。
在 创建一个新项目窗口中,搜索 WPF 并在 all languages 列表中选择 Visual Basic。 选择WPF应用(.NET Framework),然后选择Next。
为项目命名 HelloWPFApp,然后选择“ 创建”。
Visual Studio创建 HelloWPFApp 项目和解决方案。 解决方案资源管理器显示各种文件。
WPF Designer在拆分视图中显示设计视图和MainWindow.xaml 的 XAML 视图。
注释
有关可扩展应用程序标记语言(XAML)的详细信息,请参阅 XAML 概述(适用于 WPF)。
配置窗口并添加文本
使用 “属性” 窗口,可以显示和更改项目项、控件和其他项的选项。
在 解决方案资源管理器 中,打开 MainWindow.xaml。
在 XAML 视图中,将 Window.Title 属性的值从 Title=“MainWindow”更改为 Title=“Greetings”。
在 Visual Studio IDE 左侧,选择 Toolbox 选项卡。如果没有看到,请从菜单栏选择 View>Toolbox,或使用快捷键 Ctrl+Alt+X。
展开 Common WPF Controls 或在搜索栏中输入 Text,以查找 TextBlock。
截图显示工具箱窗口,其中 TextBlock 控件在常用 WPF 控件列表中被突出显示。
选择 TextBlock 项并将其拖动到设计图面上的窗口。 可以通过拖动 TextBlock 控件来移动它。 根据指南放置控件。
显示位于 Greetings 窗体上的 TextBlock 控件和参考线的屏幕截图。
XAML 标记应如以下示例所示:
<TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>在 XAML 视图中,找到 TextBlock 的标记并更改 Text 属性:
Text="Select a message option and then choose the Display button."如有必要,重新将 TextBlock 居中。
通过选择“ 全部保存 ”工具栏按钮保存应用。 或者,要保存应用,请从菜单栏中选择“文件”“全部保存”(或按 CtrlShiftS)。 最佳做法是尽早且经常保存。
添加按钮和代码
应用程序使用两个单选按钮和一个按钮。 请按照以下步骤添加它们。 还可以将Visual Basic代码添加到按钮。 该代码引用单选按钮选择。
在 工具箱中,找到 RadioButton。
截图显示在 Visual Studio 2022 中的“工具箱”窗口,其中在“Common WPF 控件”列表中选择了 RadioButton 控件。 通过选择 RadioButton 项并将其拖动到设计图面,将两个 RadioButton 控件添加到设计图面。 通过选择按钮并使用箭头键移动按钮。 将按钮并排放置在 TextBlock 控件下。
显示包含 TextBlock 控件和两个单选按钮的“问候”窗体的屏幕截图。
在左侧 RadioButton 控件的“属性”窗口中,将“属性”窗口顶部的 Name 属性更改为 HelloButton。
截图显示 Visual Studio 2022 中解决方案资源管理器的“HelloButton”RadioButton 的属性窗口。 在右侧 RadioButton 控件的 “属性” 窗口中,将 Name 属性更改为 GoodbyeButton。
更新 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>在 XAML 视图中,找到 HelloButton 的标记并添加 IsChecked 属性:
IsChecked="True"值为 True 的 IsChecked 属性表示默认情况下检查 HelloButton。 此设置意味着始终选择单选按钮,即使程序启动时也是如此。
在 工具箱中,找到 按钮 控件。 然后将按钮拖到 RadioButton 控件下的设计界面。
在 XAML 视图中,将 Button 控件 的内容 值从 更改为 。
<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>窗口应如下图所示。
显示具有 TextBlock、标记为“Hello”和“Goodbye”的 RadioButtons 以及标记为“Display”的按钮控件的 Greetings 窗体的屏幕截图。
在设计图面上,双击 “显示” 按钮。
此时,MainWindow.xaml.vb 会打开,光标位于 事件上。
Private Sub Button_Click(sender As Object, e As RoutedEventArgs) End Sub添加以下代码:
If HelloButton.IsChecked = True Then MessageBox.Show("Hello.") ElseIf GoodbyeButton.IsChecked = True Then MessageBox.Show("Goodbye.") End If
调试和测试应用程序
接下来,调试应用程序以查找错误并测试这两个消息框是否正确显示。 若要查看此过程的工作原理,第一步会故意将错误引入程序。
在 解决方案资源管理器 中,右键单击 MainWindow.xaml并选择 Rename。 将文件重命名为 Greetings.xaml。
按 F5 或选择 “调试”启动调试器,然后 启动调试。
此时会显示 “中断模式” 窗口,“ 输出 ”窗口指示发生了异常。
显示“异常未处理”窗口的屏幕截图,其中包含一条 System.IO.Exception 消息,内容为“无法定位资源 mainwindow.xaml”。
依次选择“调试”“停止调试”,停止调试器。
在本部分开始时,已将 MainWindow.xaml 重命名为 Greetings.xaml 。 该代码仍将 MainWindow.xaml 称为应用程序的启动 URI,因此项目无法启动。
在 解决方案资源管理器 中,打开 Application.xaml 文件。
将 更改为 。
再次启动调试器(按 F5)。 现在应会看到应用程序的 问候语 窗口。
Greetings 窗口的屏幕截图,其中显示了 TextBlock、RadioButtons 和按钮控件,并选择了“Hello”单选按钮。
选择 “Hello ”和“ 显示 ”按钮,然后选择“ 再见 ”和“ 显示 ”按钮。 使用右上角的关闭图标停止调试。
有关详细信息,请参阅 Compile a WPF Application 和 Debug WPF。
使用断点进行调试
可以通过添加一些断点在调试期间测试代码。
打开 Greetings.xaml.vb,然后选择以下行:
通过按 F9 或选择 “调试”添加断点,然后 切换断点。
编辑器窗口左边距代码行旁边会显示一个红色圆圈。
选择以下行:
按 F9 键添加断点,然后按 F5 开始调试。
在 “问候语 ”窗口中,选择“ Hello ”按钮,然后选择“ 显示”。
行 将用黄色突出显示。 在 IDE 底部,“自动”、“局部变量”和“监视”窗口一起停靠在左侧。 “调用堆栈”、“断点”、“异常设置”、“命令”、“立即”和“输出”窗口一起停靠在右侧。
此截图显示在 Visual Studio 中的调试会话,其中“代码”、“诊断”、“自动”和“调用堆栈”窗口已打开。执行在 Greetings.xaml.vb 的断点处停止。 在菜单栏上,选择“调试”“跳出”。
应用程序再次启动。 此时会显示一个对话框,其中包含“Hello”一词。
选择 “确定 ”按钮关闭对话框。
在 “Greetings” 窗口中,选择 “Goodbye” 单选按钮,然后选择 “显示” 按钮。
行 将用黄色突出显示。
选择 F5 键以继续调试。 出现对话框时,选择 “确定” 关闭对话框。
关闭应用程序窗口以停止调试。
在菜单栏上,选择“调试”“禁用所有断点”。
生成发布版本
验证一切是否正常工作后,可以准备应用程序的发布版本。
选择 构建清理解决方案 以删除在之前构建过程中创建的中间文件和输出文件。
使用工具栏上的下拉列表控件,将 HelloWPFApp 的生成配置从 Debug 更改为 Release。
选择“生成”“生成解决方案”。
祝贺你完成本教程! 可以在解决方案和项目目录(...\HelloWPFApp\bin\Release)下找到生成的 .exe。
后续步骤
转到下一篇文章,了解如何使用 Visual Basic 在Visual Studio中创建Windows 窗体应用。
有关Visual Studio的详细信息,请参阅:
- 生产力提示