使用Blazor开发WinForm程序

[删除(380066935@qq.com或微信通知)]

更好的阅读体验请查看原文:https://www.cnblogs.com/known/p/16090964.html

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>
    
  3. 添加 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>
    
  4. 添加_Imports.razor

    @using Microsoft.AspNetCore.Components.Web
    
  5. 添加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);
    }
    
  6. 在工具箱中拖动BlazorWebView控件到窗体Form1中

  7. 在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");
    }
    
  8. 添加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.运行效果