使用Blazor开发WinForm程序

W清风大侠M

已于 2022-05-02 10:39:06 修改

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Blazor 文章标签： c# visual studio .netcore

于 2022-04-15 09:24:05 首次发布

本文链接：https://blog.youkuaiyun.com/knownchen/article/details/124187404

Blazor 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了如何使用Blazor，微软的前端框架，与WinForm结合，创建C#桌面应用程序。通过修改项目SDK，添加必要的NuGet包，设置Host页面和组件，以及在WinForm中集成BlazorWebView，实现用C#进行前端UI开发。详细步骤包括创建WinForm项目，配置项目文件，编写 Razor 页面，并展示了最终运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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++;
       }
   }