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.运行效果
![Unity游戏开发背景知识[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)