如果有接觸過Blazor的，基本也都了解過一些前端組件，如：MASA、AntDesign等，同樣也都配備了Winform或者WPF等桌面應用的集成模板。但是如果不想使用第三方，自己如何手動創(chuàng)建一個干凈純粹的項目呢？
開發(fā)環(huán)境：.NET 6
開發(fā)工具：Visual Studio 2022
- 創(chuàng)建一個基于.Net6+的Winform應用
- 使用NuGet 包管理器安裝 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 包，這里由于我們使用的使用的.NET6版本，所以選擇6開頭的版本的包
<Project Sdk="Microsoft.NET.Sdk">改為<Project Sdk="Microsoft.NET.Sdk.Razor">
- 添加_Imports.razor文件，內(nèi)容如下，其他一些公共的經(jīng)常使用的引用或者注入也都放到此頁面，就不用在其他頁面分別引用了
@using Microsoft.AspNetCore.Components.Web
- 創(chuàng)建
wwwroot文件夾，并在文件夾內(nèi)創(chuàng)建index.html文件，其他靜態(tài)文件/文件夾也需要放在此目錄下，內(nèi)容如下
<!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/app.css" rel="stylesheet" /> <link href="WinFormsBlazor.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>
- 創(chuàng)建css文件夾，添加app.css以及其他需要的樣式表,默認樣式可按照以下內(nèi)容
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; }
- 創(chuàng)建一個Razor組件，Counter.Razor,內(nèi)容如下。
<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++; }}
- 打開Winform窗體設計頁面，在工具箱中找到BlazorWebView控件并拖入到窗體(注意這里不是WebView2控件，請勿選錯 )，并設置Dock屬性為Fill
using Microsoft.AspNetCore.Components.WebView.WindowsForms;using Microsoft.Extensions.DependencyInjection;
- 在構造函數(shù)中的 InitializeComponent 方法調(diào)用后面，添加以下代碼
var services = new ServiceCollection();services.AddWindowsFormsBlazorWebView();blazorWebView1.HostPage = "wwwroot\\index.html";blazorWebView1.Services = services.BuildServiceProvider();blazorWebView1.RootComponents.Add<Counter>("#app");
- 以上只是一個比較簡單的結構，實際上整個項目的文件結構，可以直接參考Blazor項目的結構，如使用
Shared、Pages等
該文章在 2024/2/7 23:29:29 編輯過
400 186 1886
