【.Net开发】之使用 C# 创建简单WPF应用

前言

以下内容翻译自微软官方文档

链接:https://docs.microsoft.com/zh-cn/visualstudio/get-started/csharp/tutorial-wpf?toc=%2Fdotnet%2Fdesktop-wpf%2Ftoc.json&bc=%2Fdotnet%2Fbreadcrumb%2Ftoc.json&view=vs-2019

通过完成本教程,你将熟悉在使用 Visual Studio 开发应用程序时可使用的许多工具、对话框和设计器。你将创建“Hello, World”应用程序、设计 UI、添加代码并调试错误。在此期间,你将了解如何使用集成开发环境 (IDE)。

前提条件

  • 如果尚未安装 Visual Studio,请转到 Visual Studio 下载页免费安装。
  • 在本教程中,可以使用 .NET Framework 或 .NET Core。 .NET Core 是较新的、更新式的框架。 .NET Core 需要 Visual Studio 2019 16.3 或更高版本。

配置 IDE

启动 Visual Studio 时,“启动”窗口首先打开。 选择“继续但无需代码”打开开发环境。 将看到工具窗口、菜单和工具栏,以及主窗口空间。 “工具”窗口停靠在“应用程序”窗口左右两侧,其顶部有搜索框、菜单栏和标准工具栏。 加载解决方案或项目时,编辑器和设计器显示在应用程序窗口中间。 开发应用程序时,大部分时间都将用在此中心区域。

创建项目

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

  1. 打开 Visual Studio 2019。
  2. 在“开始”窗口上,选择“创建新项目”。

查看“创建新项目”窗口

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

“创建新项目”对话框中的 WPF 应用模板

 备注:你可能会发现两个 WPF 桌面模板,一个用于 .NET Framework,另一个用于 .NET Core。 .NET Core 模板在 Visual Studio 2019 16.3 及更高版本中可用。 你可以在本教程中使用任何一个,但建议使用 .NET Core 进行新的开发。

4.在下一个屏幕中,为项目指定名称“HelloWPFApp”,然后选择“创建”。

将项目命名为“HelloWPFApp”

Visual Studio 将创建 HelloWPFApp 项目和解决方案,“解决方案资源管理器”将显示各种文件。 “WPF 设计器”在拆分视图中显示 MainWindow.xaml 的设计视图和 XAML 视图。 您可以滑动拆分器,以显示任一视图的更多或更少部分。 您可以选择只查看可视化视图或 XAML 视图。

IDE 中的 WPF 项目和解决方案

 备注:若要详细了解 XAML (eXtensible Application Markup Language),请参阅 WPF 的 XAML 概述页。

你可以在创建项目后进行自定义。 若要执行此操作,请从“视图”菜单中选择“属性窗口”或按 F4。 然后可显示和更改应用程序中的项目项、控件和其他项的选项。

属性窗口

更改 MainWindow.xaml 的名称

为 MainWindow 指定更具体的名称。 在“解决方案资源管理器”中,右键单击“MainWindow.xaml”,然后选择“重命名”。 将该文件重命名为“Greetings.xaml”。

设计用户界面 (UI)

如果设计器未打开,请选择“Greetings.xaml”,然后按“Shift+F7”打开设计器。

我们会将三种类型的控件添加到此应用程序:一个 TextBlock 控件、两个 RadioButton 控件和一个 Button 控件。

添加 TextBlock 控件

  1. 按“Ctrl+Q”激活搜索框,然后键入“工具箱”。 从结果列表中选择“查看”>“工具箱”。

  2. 在“工具箱”中,展开“公共 WPF 控件”节点以查看 TextBlock 控件。

    突出显示 TextBlock 控件的工具箱

  3. 通过选择“TextBlock”项并将其拖到设计图面的窗口中,将 TextBlock 控件添加到设计图面中。 把控件居中到窗口的顶部附近。 在 Visual Studio 2019 和更高版本中,可以使用红色参考线来使控件居中。

    你的窗口应与下图类似:

    Greetings 窗体上的 TextBlock 控件

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

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    

自定义文本块中的文本

  1. 在 XAML 视图中,找到 TextBlock 的标记并将 Text 属性从 TextBox 更改为 Select a message option and then choose the Display button.

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

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
    </Grid>
    
  2. 如果愿意,再次使 TextBlock 居中,然后通过按 Ctrl+S 或使用“文件”菜单项保存更改。

接下来,向窗体添加两个 RadioButton 控件。

添加单选按钮

  1. 在“工具箱”中,查找“RadioButton”控件。                 

                    选定 RadioButton 控件的“工具箱”窗口

2. 通过选择“RadioButton”项并将其拖到设计图面的窗口中,将两个 RadioButton 控件添加到设计图面中。 移动按钮(通过选择它们并使用箭头键),以便按钮并排显示在 TextBlock 控件下。 使用红色参考线来对齐控件。

你的窗口应如下所示:

  1.                           包含 TextBlock 和两个单选按钮的“Greetings”窗体

     

  2. 3. 在左侧 RadioButton 控件的 “属性” 窗口中,将 “名称” 属性(位于 “属性” 窗口顶部)更改为 HelloButton

                                              RadioButton 属性窗口

  3. 4. 在右侧 RadioButton 控件的“属性”窗口中,将“名称”属性更改为 GoodbyeButton,然后保存更改。

接下来,将为每个 RadioButton 控件添加显示文本。 以下程序将更新 RadioButton 控件的 “内容” 属性。

添加每个单选按钮的显示文本

  1. 在 XAML 中将HelloButton 和 GoodbyeButton 的“内容”属性更新为 "Hello" 和 "Goodbye"。 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>

设置要默认选中的单选按钮

这一步将设置要默认选中的 HelloButton,这样两个单选按钮中始终有一个处于选中状态。

  1. 在 XAML 视图中,找到 HelloButton 的标记。
  2. 添加 IsChecked 属性,并将其设置为“True”。 具体而言,添加 IsChecked="True"

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" IsChecked="True" 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>

最后添加的 UI 元素是 Button 控件。

添加按钮控件

  1. 在“工具箱”中,找到“按钮”控件,然后通过将控件拖到设计视图的窗体中,将其添加到 RadioButton 控件下方的设计界面中。 如果使用的是 Visual Studio 2019 或更高版本,则会出现一条红线,帮助你使控件居中。
  2. 在 XAML 视图中,将 Button 控件的“内容”值从 Content="Button" 更改为 Content="Display",然后保存更改。

你的窗口应与下图类似。

                        包含控制标签的 Greetings 窗体

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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
     <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

向显示按钮添加代码

此应用程序运行时,用户选择单选按钮,再选择“显示” 按钮之后,会显示一个消息框。 选择 Hello 将显示一个消息框,选择 Goodbye 将显示另一个。 若要创建此行为,请将代码添加到 Greetings.xaml.vb 中的 Button_Click 事件。

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

此时,“Greetings.xaml.cs”打开,光标位于 Button_Click 事件上。

private void Button_Click(object sender, RoutedEventArgs e)
{

}

2. 输入以下代码:

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

3. 保存应用程序。

调试并测试应用程序

接下来将调试应用程序,查找错误并测试两个消息框是否正确显示。 下面的说明介绍如何生成和启动调试器,但以后可以阅读生成 WPF 应用程序 (WPF) 和调试 WPF 获取有关详细信息。

查找并修复错误

在此步骤中,将遇到之前因更改 MainWindow.xaml 文件的名称而引起的错误。

开始调试和查找错误

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

将出现“中断模式”窗口,“输出”窗口指示发生 IOException:“找不到资源 'mainwindow.xaml'”。

IOException 消息

2. 依次选择“调试” > “停止调试”,停止调试程序。

开始学习本教程时,我们将 MainWindow.xaml 重命名为 Greetings.xaml,但是该代码仍然引用 MainWindow.xaml 作为应用程序的启动 URI,因此该项目无法启动。

将 Greetings.xaml 指定为启动 URI

  1. 在“解决方案资源管理器”中,打开“App.xaml”文件。
  2. 将 StartupUri="MainWindow.xaml" 更改为 StartupUri="Greetings.xaml",然后保存更改。

再次启动调试程序 (按“F5”)。 应可看到应用程序的 Greetings 窗口。

正在运行的应用的屏幕截图

现在关闭应用程序窗口,停止调试。

使用断点进行调试

可通过添加一些断点,在调试期间测试代码。 可以通过选择“调试” > “切换断点”、通过在编辑器中想要添加断点的代码行旁边的左边距中单击或按 F9 来添加断点。

添加断点

  1. 打开“Greetings.xaml.cs”,并选择以下行:MessageBox.Show("Hello.")
  2. 通过选择 “调试”-> “切换断点”,从菜单中添加断点。编辑器窗口最左侧边距中该代码行附近将显示一个红圈。
  3. 选择以下行: MessageBox.Show("Goodbye.")
  4. 按“F9”键添加断点,然后按“F5”启动调试。
  5. 在 “Greetings” 窗口中,选择 “Hello” 单选按钮,然后选择 “显示” 按钮。 MessageBox.Show("Hello.") 行将用黄色突出显示。 在 IDE 底部,“自动”、“本地”和“监视”窗口一起停靠在左侧,而“调用堆栈”、“断点”、“异常设置”、“命令”、“即时”和“输出”窗口一起停靠在右侧。

调试程序中的断点

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

应用程序继续执行,并将显示出带有“Hello”的消息框。

  1. 7. 选择消息框上的 “确定” 按钮将其关闭。

  2. 8. 在 “Greetings” 窗口中,选择 “Goodbye” 单选按钮,然后选择 “显示” 按钮。行 MessageBox.Show("Goodbye.") 将用黄色突出显示。

  3. 9. 按“F5”键继续调试。 当消息框出现时,选择消息框上的 “确定” 按钮将其关闭。

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

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

查看 UI 元素的表示形式

在正在运行的应用中,你会看到窗口顶部显示了一个小组件。 这是一个运行时帮助程序,通过它可以快速访问一些有用的调试功能。 单击第一个按钮“转到实时可视化树”。 随即会看到一个包含一个树的窗口,树中包含页面的所有可视元素。 展开节点,找到你添加的按钮。

实时可视化树窗口的屏幕截图

生成应用程序的发布版本

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

  1. 在主菜单中,依次选择“生成” > “清理解决方案”,删除上一生成过程中创建的中间文件和输出文件。这不是必需的,但它会清理调试生成输出。
  2. 使用工具栏(当前显示“调试”)上的下拉列表控件把 HelloWPFApp 的生成配置从“调试”更改为“发布”。
  3. 选择“生成” > “生成解决方案”来生成解决方案。
  4. 可在解决方案和项目目录 (...\HelloWPFApp\HelloWPFApp\bin\Release) 下找到生成的 .exe 文件。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章