使用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>

  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.运行效果

image

posted @ 2022-04-02 10:59  known  阅读(2276)  评论(0)  编辑  收藏  举报