天天看点

使用Blazor开发WinForm程序

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步骤

  1. 打开VS2022,创建新项目,选择Windows窗体应用,将工程文件sdk改成 Microsoft.NET.Sdk.Razor
  2. 添加 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>
           
  1. 添加 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>
           
  1. 添加_Imports.razor
@using Microsoft.AspNetCore.Components.Web
           
  1. 添加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);
   }
           
  1. 在工具箱中拖动BlazorWebView控件到窗体Form1中
  2. 在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");
   }
           
  1. 添加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.运行效果

使用Blazor开发WinForm程序