【炫丽】从0开始做一个WPF+Blazor对话小程序_Dotnet9的技术博客_

大家好，我是沙漠尽头的狼。

.NET是免费，跨平台，开源，用于构建所有应用的开发人员平台。

本文演示如何在 WPF 中使用 Blazor 开发漂亮的UI，为客户端开发注入新活力。

注要使WPF支持Blazor， .NET 版本必须是 6.0 或更高版本，本文所有示例使用的.NET 7.0，版本要求见链接，截图看如下文字：

【炫丽】从0开始做一个WPF+Blazor对话小程序_Blazor

1. WPF默认程序

本文从创建WPF Hello World 开发：

使用WPF模板创建一个默认程序，取名【WPFBlazorChat】，项目组织结构如下：

【炫丽】从0开始做一个WPF+Blazor对话小程序_Blazor_02

运行项目，一个空白窗口：

【炫丽】从0开始做一个WPF+Blazor对话小程序_xml_03

接着往下看，我们添加Blazor支持，本小节代码在这 WPF默认程序源码。

2. 添加Blazor支持

依然使用上面的工程，添加Blazor支持，此部分参考微软文档生成 Windows Presentation Foundation (WPF) Blazor 应用，本小节快速略过。

2.1 编辑工程文件

双击工程文件 WPFBlazorChat.csproj ，修改处如下：

【炫丽】从0开始做一个WPF+Blazor对话小程序_Blazor_04

在项目文件的顶部，将 SDK 更改为 Microsoft.NET.Sdk.Razor 。
添加节点 <RootNameSpace>WPFBlazorChat</RootNameSpace> ，将项目命名空间 WPFBlazorChat 设置为应用的根命名空间。
添加 Nuget 包 Microsoft.AspNetCore.Components.WebView.Wpf ，版本看你选择的 .NET 版本而定。

2.2 添加 `_Imports.razor` 文件

_Imports.razor 文件类似一个 Global using文件，专门给 Razor 组件使用，放置一些用的比较多的全局的命名空间，精简代码。

内容如下，引入了一个命名空间 Microsoft.AspNetCore.Components.Web ，这是 Razor 常用命名空间，包含用于向 Blazor 框架提供有关浏览器事件的信息的类型。：

@using Microsoft.AspNetCore.Components.Web

2.3 添加 `wwwroot\index.html` 文件

和 Vue 、 React 一样，需要一个 html 文件承载 Razor 组件，页面内容类似：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WPFBlazorChat</title>
    <base href="/" />
    <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">
    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>

app.css 文件在下面给出定义。
看 <div id="app">Loading...</div> ，这里是承载 Razor 组件的地方，后面所有加载的 Razor 组件都是在这里渲染出来的。
其他暂时不管。

2.4 添加 `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;
}

2.5 添加一个Razor组件

加一个Razor的经典组件 Counter.razor ， Blazor 的 Hello World 程序就有这么一个组件，文件路径： /RazorViews/Counter.razor ，之所以放 RazorViews 目录，是为了和WPF常用的 Views 目录区分，该组件内容如下：

<h1>Counter</h1>

<p>好开心，你点我了，现在是:<span style="color: red;">@currentCount</span></p>

<button class="btn btn-primary" @onclick="IncrementCount">快快点我</button>

@code {
    private int currentCount = 0;

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

一个按钮【快快点我】，点击 @onclick="IncrementCount" 使变量 currentCount 自增，同时页面显示此变量值，相信你能看懂。

2.6 Blazor与WPF窗体关联

这是两者产生关系的关键一步，打开窗体 MainWindow.xaml ，修改如下：

【炫丽】从0开始做一个WPF+Blazor对话小程序_WPF+Blazor_05

如上代码，要点如下：

添加上面引入的 Nuget 包 Microsoft.AspNetCore.Components.WebView.Wpf 的命名空间，命名为 blazor ，主要是要使用 BlazorWebView 组件;
BlazorWebView 组件属性 HostPage 指定承载的html文件， Services 指定razor组件的 Ioc 容器，看下面 MainWindow() 里标红的代码;
时间如流水，只能流去不流回。