注意
此版本不是本文的最新版本。 有关当前版本，请参阅 本文的 .NET 10 版本。
警告
此版本的 ASP.NET Core 不再受支持。 有关详细信息，请参阅 .NET 和 .NET Core 支持策略。 有关当前版本，请参阅本文的 .NET 9 版本。
本教程介绍如何生成和运行 Windows 窗体 Blazor 应用。 学习如何：
- 创建 Windows 窗体 Blazor 应用项目
- 在 Windows 上运行应用
先决条件
- 支持的平台（Windows 窗体文档）
- 具有“.NET 桌面开发”工作负载的 Visual Studio 2022
Visual Studio 工作负载
如果未安装“.NET 桌面开发”工作负载，请使用 Visual Studio 安装程序安装工作负载。 有关详细信息，请参阅修改 Visual Studio 工作负载、组件和语言包。
创建 Windows 窗体 Blazor 项目
启动 Visual Studio。 在“开始”窗口中，选择“创建新项目”：
在“创建新项目”对话框中，将“项目类型”下拉列表筛选为“桌面”。 选择“Windows 窗体应用”的 C# 项目模板，然后选择“下一步”按钮：
在“配置新项目”对话框中：
- 将“项目名称”设置为 。
- 为项目选择一个合适的位置。
- 选择“下一步”按钮。
在“其他信息”对话框中，使用“框架”下拉列表选择框架版本。 选择“创建”按钮：
使用 NuGet 包管理器安装 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 包：
在“解决方案资源管理器”中，右键单击项目的名称 ，然后选择“编辑项目文件”以打开项目文件 (WinFormsBlazor)。
在项目文件的顶部，将 SDK 更改为 Microsoft.NET.Sdk.Razor：
<Project Sdk="Microsoft.NET.Sdk.Razor">
将更改保存到项目文件 (WinFormsBlazor.csproj)。
使用 _Imports.razor 的 @using 指令将 Microsoft.AspNetCore.Components.Web 文件添加到项目的根目录。
_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.min.css获取 的最新版本。 因为站点上的所有内容都在 URL 中进行了版本控制，所以无法在此处提供直接链接。 因此，请通过导航栏链接访问“文档”>“下载”，以获取 bootstrap.min.css。
将以下 Counter 组件添加到项目的根目录，这是 Counter 项目模板中的默认 Blazor 组件。
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)。
在“解决方案资源管理器”中，双击 文件以打开设计器：
通过选择 Visual Studio 窗口左边缘的“工具箱”按钮，或选择“查看”“工具箱”菜单命令来打开“工具箱”。
在 BlazorWebView 下找到 Microsoft.AspNetCore.Components.WebView.WindowsForms 控件。 将 BlazorWebView 从“工具箱”拖到 设计器中。 请务必小心，勿将 WebView2 控件意外拖动到窗体中。
Visual Studio 将窗体设计器中的 BlazorWebView 控件显示为 WebView2 并自动命名控件 blazorWebView1：
在 Form1 中，单击一下以选择 BlazorWebView (WebView2)。
在 BlazorWebView 的“属性”中，确认控件已命名为 。 如果名称不是 blazorWebView1，则从“工具箱”中拖动了错误的控件。 删除 WebView2 中的 Form1 控件，然后将 BlazorWebView 控件拖动到窗体中。
在控件的属性中，将 BlazorWebView 的 Dock 值更改为“填充”：
在 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 方法会在应用生成时自动生成，并添加到调用类的编译对象中。
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 窗体 Blazor 应用项目
- 在 Windows 上运行应用
详细了解 Blazor Hybrid 应用：
