生成 Windows Presentation Foundation (WPF) Blazor 应用

Visual Studio 工作负载

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

创建 WPF Blazor 项目

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

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

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

将“项目名称”设置为 WpfBlazor 。

为项目选择一个合适的位置。

选择“下一步”按钮。

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

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

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

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

<Project Sdk="Microsoft.NET.Sdk.Razor">
在项目文件的现有 <PropertyGroup> 中，添加以下标记以设置应用的根命名空间（在本教程中为 WpfBlazor）：
<RootNamespace>WpfBlazor</RootNamespace>
上述有关设置项目的根命名空间的指南是一种临时解决方法。 有关详细信息，请参阅 [Blazor][Wpf] 根命名空间相关问题 (dotnet/maui #5861)。
将更改保存到项目文件 (WpfBlazor.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">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WpfBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WpfBlazor.styles.css" rel="stylesheet" />
</head>
    <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>
    <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)。
如果 MainWindow 设计器未打开，请在“解决方案资源管理器”中双击 MainWindow.xaml 文件将其打开。 在 MainWindow 设计器中，将 XAML 代码替换为以下内容：
<Window x:Class="WpfBlazor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        xmlns:local="clr-namespace:WpfBlazor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>
在“解决方案资源管理器”中，右键单击 ，然后选择“查看代码”：

将命名空间 Microsoft.Extensions.DependencyInjection 添加到 MainWindow.xaml.cs 文件的顶部：
using Microsoft.Extensions.DependencyInjection;
在 MainWindow 构造函数中的 InitializeComponent 方法调用后面，添加以下代码：
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
InitializeComponent 方法在应用生成时自动生成，并添加到调用类的编译对象中。
已删除注释的具有 文件范围的命名空间的 MainWindow.xaml.cs 的最终完整 C# 代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Extensions.DependencyInjection;
namespace WpfBlazor;
public partial class MainWindow : Window
    public MainWindow()
        InitializeComponent();
        var serviceCollection = new ServiceCollection();
        serviceCollection.AddWpfBlazorWebView();
        Resources.Add("services", serviceCollection.BuildServiceProvider());
在 Visual Studio 工具栏中选择开始按钮：
在 Windows 上运行的应用：
在本教程中，你了解了如何执行以下操作：
创建 WPF Blazor 应用项目
向项目添加 Razor 组件
在 Windows 上运行应用
详细了解 Blazor Hybrid 应用：
ASP.NET Core Blazor Hybrid
			即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
        
提交和查看相关反馈