在 WinFormedge 中使用 Blazor Hybrid
<p>在此首先感谢知乎网友<strong>我才是星辰</strong>的建议，在昨天刚发表了《隆重介绍.NET界面组件WinFormedge》之后得到了及时反馈，因此硬肝了一晚编写了 WinFormedge 的 Blazor 插件，目前该插件已上架 NuGet，欢迎有此开发需求的朋友下载使用。</p><p>本文将对此插件进行详细介绍。</p>
<h2 id="-关于">✨ 关于</h2>
<p>Blazor Hybrid 插件使采用了 WinFormedge 的应用程序能够无缝集成 Blazor 组件。通过这个插件，开发者可以利用 Blazor 的现代 Web UI 框架与传统的 WinForms 相结合，使用 C#、HTML 和 CSS 构建交互式、基于组件的用户界面。这种混合方法将 Web 技术的灵活性与原生 Windows 应用程序的性能和能力相结合，使得构建丰富的跨技术桌面解决方案变得更加容易。</p>
<h2 id="-使用方法">📖 使用方法</h2>
<p>要使用 Blazor Hybrid 插件，请按照以下步骤操作：</p>
<p><strong>安装 NuGet 包</strong>：将 <code>WinFormedge.Blazor</code> 包添加到你的 WinFormedge 项目中。</p>
<p>在 <strong>解决方案资源管理器</strong> 中，右键点击项目名称，选择“编辑项目文件”以打开项目文件。</p>
<p>在项目文件的顶部，将 SDK 更改为 <code>Microsoft.NET.Sdk.Razor</code>：</p>
<pre><code class="language-xml"><Project Sdk="Microsoft.NET.Sdk.Razor">
</code></pre>
<p>在项目根目录下添加一个 <code>_Imports.razor</code> 文件，并添加如下 @using 指令以引用 Microsoft.AspNetCore.Components.Web。</p>
<pre><code class="language-razor">@using Microsoft.AspNetCore.Components.Web
</code></pre>
<p>添加一个 <code>wwwroot</code> 文件夹到项目的更目录。创建一个 <code>index.html</code> 文件到 <code>wwwroot</code> 文件夹，并使用以下标记。</p>
<pre><code class="language-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" />
</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>
</code></pre>
<p>在 <code>wwwroot</code> 文件夹内创建一个 <code>css</code> 文件夹来存放样式表。</p>
<p>添加一个 <code>app.css</code> 样式表到 <code>wwwroot/css</code> 文件夹，并使用以下内容。</p>
<pre><code class="language-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() {
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;
}
</code></pre>
<p>在 <code>wwwroot/css</code> 文件夹内创建一个 <code>bootstrap</code> 文件夹。在 <code>bootstrap</code> 文件夹内，放置一份 <code>bootstrap.min.css</code> 的副本。你可以从 Bootstrap 官网获取最新版本的 <code>bootstrap.min.css</code>。</p>
<p>将以下 Counter 组件添加到项目根目录，这就是 Blazor 项目模板中默认的 Counter 组件。</p>
<pre><code class="language-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++;
}
}
</code></pre>
<p>打开你想要托管 Blazor 组件的窗口的源文件，并添加以下代码：</p>
<pre><code class="language-csharp">using WinFormedge;
using WinFormedge.Blazor;
namespace BlazorHybridExampleApp;
internal class MainWindow : Formedge
{
public MainWindow()
{
Url = "https://blazorapp.local/";
Load += MainWindow_Load;
}
private void MainWindow_Load(object? sender, EventArgs e)
{
this.SetVirtualHostNameToBlazorHybrid(new BlazorHybridOptions
{
Scheme = "https",
HostName = "blazorapp.local",
RootComponent = typeof(Counter),
HostPath = "wwwroot/index.html"
});
}
}
</code></pre>
<p>以上代码设置了 Blazor Hybrid 环境，用 <code>SetVirtualHostNameToBlazorHybrid</code> 方法指定 Blazor 应用的 URL 和要渲染的根组件。<code>BlazorHybridOptions</code> 中的 <code>Scheme</code>、<code>HostName</code>、<code>RootComponent</code> 和 <code>HostPath</code> 属性分别定义了协议、主机名、根组件类型和主机路径。</p>
<h2 id="-运行">🎶 运行</h2>
<p>运行应用程序，你应该能看到 Blazor Counter 组件在 WinFormedge 窗口中渲染。你可以像在标准 Blazor 应用程序中一样与组件进行交互。</p>
<p><img src="https://img2024.cnblogs.com/blog/352785/202506/352785-20250613123550184-1292562203.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/linxuanchen/p/18926814
頁:
[1]