生成 Windows Presentation Foundation (WPF) Blazor 应用

项目
04/11/2024

注意

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

重要

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

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

本教程演示如何生成和运行 WPF Blazor 应用。学习如何：

创建 WPF Blazor 应用项目
向项目添加 Razor 组件
在 Windows 上运行应用

先决条件

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

Visual Studio 工作负载

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

Visual Studio 安装程序工作负载选择。

创建 WPF Blazor 项目

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

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

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

在 Visual Studio 中创建新项目。

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

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

配置项目。

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

WPF 项目的“其他信息”对话框。

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

使用 Visual Studio 中的 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">

<head>
    <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>

<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)。

如果 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">
    <Grid>
        <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>

在“解决方案资源管理器”中，右键单击，然后选择“查看代码”：

查看 MainWindow 代码。

将命名空间 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 上运行的应用：

在 Windows 上运行的应用。

后续步骤

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

创建 WPF Blazor 应用项目
向项目添加 Razor 组件
在 Windows 上运行应用

详细了解 Blazor Hybrid 应用：

ASP.NET Core Blazor Hybrid