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

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

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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 再学Blazor——概述

· AntDesignBlazor示例——创建项目

· 生成 Windows 窗体 Blazor 应用（WinForm+Bootstrap Blazor）

· 在winform中使用blazor hybrid构建页面

· WinForm混合Blazor（中）

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

历史上的今天：
2009-04-02 css之自动换行

公告

网名：清风大侠
位置：江苏-苏州
微信：knownchen
邮箱：knownchen@163.com
擅长技术：
C#、Blazor、MAUI、JavaScript、CSS、WinForm、WPF
擅长领域：
ERP、关务、货代、物联网、上位机

公众号：Blazor程序员

开源框架：
Known 是基于 Blazor 轻量级、跨平台、低代码、易扩展的插件开发框架。
开源地址：

官网 Gitee GitHub

昵称： known
园龄： 18年
粉丝： 120
关注： 16

+加关注

2025年3月

日

一

二

三

四

五

六

KNOWN

专注C#和Blazor程序开发

使用Blazor开发WinForm程序

1. 关于Blazor

2.创建WinForm步骤

3.运行效果

公告

搜索

随笔分类 (167)

阅读排行榜

评论排行榜

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

	<!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>

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

	public Form1()
	{
	InitializeComponent();

	var services = new ServiceCollection();
	services.AddBlazorWebView();
	blazorWebView.HostPage = "wwwroot\\index.html";
	blazorWebView.Services = services.BuildServiceProvider();
	blazorWebView.RootComponents.Add<App>("#app");
	}

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