1. 關於Blazor
Blazor是微軟出品的前端框架，對標谷歌的Flutter，用C#、css、html語言開發前端UI，組件化設計，支持嵌套組件與大多數前端框架react、vue等類似，不同的是開發語言不是JavaScript，但是它可以與JavaScript互操作。Host模式支持Blazor Server、Blazor WebAssembly和Blazor Hybrid（MAUI、WPF、WinForm），可用它來開發Web、移動App、桌面應用。
2.創建WinForm步驟
-
打開VS2022，創建新項目，選擇Windows窗體應用，將工程文件sdk改成 Microsoft.NET.Sdk.Razor
-
添加 NuGet 包 Web 和 WebView.WindowsForms，創建后的工程文件如下：
<Project Sdk="Microsoft.NET.Sdk.Razor"> <PropertyGroup> <OutputType>WinExe</OutputType> <TargetFramework>net6.0-windows</TargetFramework> <Nullable>enable</Nullable> <UseWindowsForms>true</UseWindowsForms> <ImplicitUsings>enable</ImplicitUsings> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.3" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="6.0.101-preview.11.2349" /> </ItemGroup> </Project> -
添加 wwwroot 文件夾，添加 index.html 和 css/app.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>WinApp</title> <base href="/" /> <link href="css/font-awesome.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="WinApp.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> -
添加_Imports.razor
@using Microsoft.AspNetCore.Components.Web -
添加App.razor，其中DynamicComponent是動態組件，動態顯示Home和Setting等razor頁面
<div class="app"> <div class="sider"> <h1 class="fa fa-university logo" @onclick="e => OnClickMenu(Menus[0])"></h1> <ul class="menu menu1"> @foreach (var menu in Menus) { <li class="@menu.Icon @Active(menu)" @onclick="e => OnClickMenu(menu)"></li> } </ul> <ul class="menu menu2"> <li class="@setting.Icon @Active(setting)" @onclick="e => OnClickMenu(setting)"></li> </ul> </div> <div class="content"> @if (isHome) { <div class="title welcome">歡迎使用XX管理系統</div> } else { <div class="title">@title</div> } <DynamicComponent Type="@componentType" /> </div> </div> @code { private string? code = "Home"; private string? title = ""; private bool isHome = true; private Type? componentType; private MenuItem setting = new MenuItem("Setting", "系統設置", "fa fa-bars", typeof(Setting)); private MenuItem[] Menus = new MenuItem[] { new MenuItem("Home", "首頁", "fa fa-home", typeof(Home)) }; protected override void OnInitialized() { base.OnInitialized(); componentType = Menus[0].Type; } private void OnClickMenu(MenuItem menu) { isHome = menu.Id == "Home"; code = menu.Id; title = menu.Name; componentType = menu.Type; } private string Active(MenuItem menu) => code == menu.Id ? "active" : ""; private record MenuItem(string Id, string Name, string Icon, Type Type); } -
在工具箱中拖動BlazorWebView控件到窗體Form1中
-
在Form1.cs構造函數中添加如下代碼：
public Form1() { InitializeComponent(); var services = new ServiceCollection(); services.AddBlazorWebView(); blazorWebView.HostPage = "wwwroot\\index.html"; blazorWebView.Services = services.BuildServiceProvider(); blazorWebView.RootComponents.Add<App>("#app"); } -
添加Pages文件夾，添加 Pages/Home.razor文件
<h1>Home</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
3.運行效果
