在winform中使用blazor hybrid構建頁面
1、Blazor Hybrid簡介
Blazor Hybrid 使開發人員能夠將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。在 Blazor Hybrid 應用中，Razor 組件在設備上是本機運行的。 這些組件通過本地互操作通道呈現到嵌入式 Web 視圖控件。 組件不在瀏覽器中運行，并且不涉及 WebAssembly。 Razor 組件可快速加載和執行代碼，這些組件可通過 .NET 平臺完全訪問設備的本機功能。
2、效果
3、步驟
如果對在winform中使用blazor hybrid感興趣的話，可以繼續往下閱讀，看看具體的實現步驟是怎樣的。
正常創建winform
創建一個winform，我這里使用的是.NET 8，如下所示：
安裝NuGet包
安裝Microsoft.AspNetCore.Components.WebView.WindowsForms，如下所示：
更改csproj文件
在“解決方案資源管理器”中，右鍵單擊項目的名稱 ，然后選擇“編輯項目文件”，如下所示：
在項目文件的頂部，將 SDK 更改為 Microsoft.NET.Sdk.Razor，如下所示：
點擊保存，保存之后，你會發現你的項目變成了這樣，如下所示：
添加_Imports.razor 文件
_Imports.razor 文件添加到項目的根目錄。如下所示：
_Imports.razor中的內容為：
如下所示：
添加index.html 文件
先將 wwwroot 文件夾添加到該項目。
再將具有以下標記的 index.html 文件添加到 wwwroot 文件夾。
在 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;
}
如下所示：
添加Count組件
將以下 Counter 組件添加到項目的根目錄，這是 Blazor 項目模板中的默認 Counter 組件。
<h1>Counter</h1>
?
<p>Current count:
如下所示：
添加BlazorWebView 控件
在“解決方案資源管理器”中，雙擊 Form1.cs 文件以打開設計器：
打開工具箱添加BlazorWebView控件：
將BlazorWebView控件最大化：
修改Form1.cs
原本是這樣的：
namespace WinFormBlazorHybridDemo
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
?
private void Form1_Load(object sender, EventArgs e)
{
?
}
}
}
修改后是這樣的：
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
namespace WinFormBlazorHybridDemo
{
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");
}
?
private void Form1_Load(object sender, EventArgs e)
{
?
}
}
}
在頂部添加了：
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");
運行效果
點擊運行，界面如下所示：
結語
后面就可以使用blazor的ui框架比如Ant Design Blazor等構建好看的頁面了。
浙公網安備 33010602011771號