生成 Windows 窗体 Blazor 应用

项目
04/11/2024

注意

此版本不是本文的最新版本。对于当前版本，请参阅此文的 .NET 8 版本。

重要

此信息与预发布产品相关，相应产品在商业发布之前可能会进行重大修改。 Microsoft 对此处提供的信息不提供任何明示或暗示的保证。

对于当前版本，请参阅此文的 .NET 8 版本。

本教程介绍如何生成和运行 Windows 窗体 Blazor 应用。学习如何：

创建 Windows 窗体 Blazor 应用项目
在 Windows 上运行应用

先决条件

支持的平台（Windows 窗体文档）
具有“.NET 桌面开发”工作负载的 Visual Studio 2022

Visual Studio 工作负载

如果未安装“.NET 桌面开发”工作负载，请使用 Visual Studio 安装程序安装工作负载。有关详细信息，请参阅修改 Visual Studio 工作负载、组件和语言包。

Visual Studio 安装程序 .NET 桌面开发工作负载选择。

创建 Windows 窗体 Blazor 项目

启动 Visual Studio。在“开始”窗口中，选择“创建新项目”：

在 Visual Studio 中创建新解决方案。

在“创建新项目”对话框中，将“项目类型”下拉列表筛选为“桌面”。选择“Windows 窗体应用”的 C# 项目模板，然后选择“下一步”按钮：

在 Visual Studio 中创建新项目。

在“配置新项目”对话框中：

将“项目名称”设置为 WinFormsBlazor。
为项目选择一个合适的位置。
选择“下一步”按钮。

配置项目。

在“其他信息”对话框中，使用“框架”下拉列表选择框架版本。选择“创建”按钮：

“其他信息”对话框。

使用 NuGet 包管理器安装 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 包：

使用 Visual Studio 中的 Nuget 包管理器安装 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 包。

在“解决方案资源管理器”中，右键单击项目的名称 WinFormsBlazor，然后选择“编辑项目文件”以打开项目文件 (WinFormsBlazor.csproj)。

在项目文件的顶部，将 SDK 更改为 Microsoft.NET.Sdk.Razor：

<Project Sdk="Microsoft.NET.Sdk.Razor">

将更改保存到项目文件 (WinFormsBlazor.csproj)。

使用 Microsoft.AspNetCore.Components.Web 的 @using 指令将 _Imports.razor 文件添加到项目的根目录。

_Imports.razor：

@using Microsoft.AspNetCore.Components.Web

保存 _Imports.razor 文件。

将 wwwroot 文件夹添加到该项目。

将具有以下标记的 index.html 文件添加到 wwwroot 文件夹。

wwwroot/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>

</html>

在 wwwroot 文件夹中，创建一个 css 文件夹来保存样式表。

将具有以下内容的 app.css 样式表添加到 wwwroot/css 文件夹中。

wwwroot/css/app.css：

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

在 wwwroot/css 文件夹中，创建一个 bootstrap 文件夹。在 bootstrap 文件夹中，放置一个 bootstrap.min.css 的副本。可以从 Bootstrap 网站获取 bootstrap.min.css 的最新版本。遵循导航栏链接找到“文档”>“下载”。无法在此处提供直接链接，因为站点上的所有内容都在 URL 中进行了版本控制。

将以下 Counter 组件添加到项目的根目录，这是 Blazor 项目模板中的默认 Counter 组件。

Counter.razor：

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

保存 Counter 组件 (Counter.razor)。

在“解决方案资源管理器”中，双击 Form1.cs 文件以打开设计器：

“解决方案资源管理器”中的 Form1.cs 文件。

通过选择 Visual Studio 窗口左边缘的“工具箱”按钮，或选择“查看”>“工具箱”菜单命令来打开“工具箱”。

在 Microsoft.AspNetCore.Components.WebView.WindowsForms 下找到 BlazorWebView 控件。将 BlazorWebView 从“工具箱”拖到 Form1 设计器中。请务必小心，勿将 WebView2 控件意外拖动到窗体中。

Blazor工具箱中的 WebView。

Visual Studio 将窗体设计器中的 BlazorWebView 控件显示为 WebView2 并自动命名控件 blazorWebView1：

BlazorForm1 设计器中的 WebView。

在 Form1 中，单击一下以选择 BlazorWebView (WebView2)。

在 BlazorWebView 的“属性”中，确认控件已命名为 blazorWebView1。如果名称不是 blazorWebView1，则从“工具箱”中拖动了错误的控件。删除 Form1 中的 WebView2 控件，然后将 BlazorWebView 控件拖动到窗体中。

BlazorWebView 由 Visual Studio 自动命名为“blazorWebView1”。

在控件的属性中，将 BlazorWebView 的 Dock 值更改为“填充”：

BlazorDock 设置为“填充”的 WebView 属性。

在 Form1 设计器中，右键单击 Form1，然后选择“查看代码”。

将 Microsoft.AspNetCore.Components.WebView.WindowsForms 和 Microsoft.Extensions.DependencyInjection 的命名空间添加到 Form1.cs 文件的顶部：

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

在 Form1 构造函数中的 InitializeComponent 方法调用后面，添加以下代码：

var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");

注意

InitializeComponent 方法会在应用生成时自动生成，并添加到调用类的编译对象中。

具有文件范围的命名空间的 Form1.cs 的最终完整 C# 代码：

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace WinFormsBlazor;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        blazorWebView1.HostPage = "wwwroot\\index.html";
        blazorWebView1.Services = services.BuildServiceProvider();
        blazorWebView1.RootComponents.Add<Counter>("#app");
    }
}

运行应用

在 Visual Studio 工具栏中选择开始按钮：

在 Windows 上运行的应用：

在 Windows 上运行的应用。

后续步骤

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

创建 Windows 窗体 Blazor 应用项目
在 Windows 上运行应用

详细了解 Blazor Hybrid 应用：

ASP.NET Core Blazor Hybrid

通过