C#实现WPF项目

bobby_developer
914 阅读8分钟

1. 创建项目

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

  1. 打开 Visual Studio。

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

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

  3. 在“创建新项目”屏幕上，搜索“WPF”，选择“WPF 应用程序”，然后选择“下一步” 。

    “创建新项目”对话框的屏幕截图，其中在搜索框中输入了“WPF”，并突出显示了“WPF 应用程序”项目模板。

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

    “配置新项目”对话框的屏幕截图，其中在“项目名称”字段中输入了“HelloWPFApp”。

  5. 在“其他信息”窗口中，应已选择“.NET 6.0 (长期支持)”作为目标框架 。 如果没有，请选择“.NET 6.0 (长期支持)”。 然后，选择“创建” 。

    “其他信息”窗口的屏幕截图，其中在“框架”字段中选择了“.NET 6.0 (长期支持)”。

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

Visual Studio IDE 中 HelloWPFApp 项目和解决方案的屏幕截图，其中打开了解决方案资源管理器，并在 WPF 设计器中打开了“MainWindow.xaml”的 XAML 和设计器视图。

备注

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

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

“属性”窗口的屏幕截图，其中显示了 HelloWPFApp 项目的“解决方案属性”的“其他”部分。

2. 设计用户界面 (UI)

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

2.1 添加 TextBlock 控件

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

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

    “工具箱”窗口的屏幕截图，其中在“常用 WPF 控件”列表中选择了 TextBlock 控件。

  3. 通过选择“TextBlock”项并将其拖到设计图面的窗口中，将 TextBlock 控件添加到设计图面中。 把控件居中到窗口的顶部附近。 可以使用参考线将控件居中。

    你的窗口应类似于下图：

    设计图面上的 TextBlock 控件的屏幕截图。显示了用于设定控件位置和调整控件大小的参考线。

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

    XAML复制

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

2.2 自定义文本块中的文本

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

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

    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 控件。

2.3 添加单选按钮

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

    “工具箱”窗口的屏幕截图，其中在“常用 WPF 控件”列表中选择了 RadioButton 控件。

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

    你的窗口应如下所示：

    Greetings.xaml 的“设计”窗口的屏幕截图，其中显示了位于设计图面上的一个 TextBlock 控件和两个 RadioButton 控件。

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

    RadioButton 控件的“属性”窗口的屏幕截图。Name 属性的值已更改为“HelloButton”。

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

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

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

  1. 在 XAML 中将HelloButton 和 GoodbyeButton 的“内容”属性更新为 "Hello" 和 "Goodbye"。 XAML 标记现在应类似于以下示例：

    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>

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

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

  1. 在 XAML 视图中，找到 HelloButton 的标记。

  2. 添加 IsChecked 属性，并将其设置为“True”。 具体而言，添加 IsChecked="True"。

    XAML 标记现在应类似于以下示例：

    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 控件。

2.6 添加按钮控件

  1. 在“工具箱”中，找到“按钮”控件，然后通过将控件拖到设计视图的窗体中，将其添加到 RadioButton 控件下方的设计界面中。 这些参考线可以帮助你将控件居中。

  2. 在 XAML 视图中，将 Button 控件的“内容”值从 Content="Button" 更改为 Content="Display"，然后保存更改。

    你的窗口应类似于以下屏幕截图。

    Greetings.xaml 的“设计”窗口的屏幕截图，其中显示了一个 TextBlock 控件、两个标有“Hello”和“Greeting”的 RadioButton 控件，以及一个标有“Display”的按钮。

    XAML 标记现在应类似于以下示例：

    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>

2.7 向显示按钮添加代码

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

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

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

    C#复制

    private void Button_Click(object sender, RoutedEventArgs e)
{
​
}

  2. 输入以下代码：

    C#复制

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

  3. 保存应用程序。

3. 调试并测试应用程序

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

3.1 更改 MainWindow.xaml 的名称

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

3.1.1 查找并修复错误

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

3.1.2 开始调试和查找错误

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

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

    “输出”窗口的屏幕截图，其中显示了 System.IO.IOException 和消息“找不到资源 mainwindow.xaml”。

  2. 选择“调试”>“停止调试”以停止调试器 。

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

3.1.3 将 Greetings.xaml 指定为启动 URI

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

作为一个可选步骤，将应用程序窗口标题更改为匹配此新名称可以避免混淆。

  1. 在“解决方案资源管理器”中，打开刚刚重命名的 Greetings.xaml 文件。
  2. 将 Window.Title 属性的值从 Title="MainWindow" 更改为 Title="Greetings"，然后保存更改。

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

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

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

3.1.4 使用断点进行调试

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

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

  2. 通过选择 “调试” -> “切换断点” ，从菜单中添加断点。

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

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

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

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

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

    Visual Studio 中调试会话的屏幕截图。Greetings.xaml.cs 的代码窗口通过一根以黄色突出显示的线条显示执行已在断点处停止。

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

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

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

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

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

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

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

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

3.1.5查看 UI 元素的表示形式

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

“实时可视化树”窗口的屏幕截图，其中显示了正在运行的 HelloWPFApp.exe 中的可视化元素树。

3.1.6 生成应用程序的发布版本

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

  1. 在主菜单中，依次选择“生成” > “清理解决方案”，删除上一生成过程中创建的中间文件和输出文件。 此步骤不是必需的，但它可以清理调试生成输出。
  2. 使用工具栏（当前显示“调试”）上的下拉列表控件把 HelloWPFApp 的生成配置从“调试”更改为“发布” 。
  3. 选择“生成” > “生成解决方案”来生成解决方案 。
avatar
文章
阅读
粉丝