使用BootStrapBlazor组件搭建Bootstarp风格的Winform界面

本文主要是介绍使用BootStrapBlazor组件搭建Bootstarp风格的Winform界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目地址https://gitee.com/zhang_jie_sc/my-blazor-winforms

1.安装Bootstrap.Blazor.Templates 模板

在power shell中输入dotnet new install Bootstrap.Blazor.Templates::7.6.1，安装7.6.1是因为版本8以后就要强制使用net8.0了，很多语法不一样，改成.Net6后很麻烦，7.6.1版本很容易回退到Net6.0。
在这里插入图片描述

2.新建winform程序

在这里插入图片描述
修改项目MyBlazorWinforms.csproj如下:

<Project Sdk="Microsoft.NET.Sdk.Razor"><PropertyGroup><OutputType>WinExe</OutputType><TargetFramework>net6.0-windows</TargetFramework><UseWindowsForms>true</UseWindowsForms></PropertyGroup><ItemGroup><PackageReference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="6.0.312" /></ItemGroup><ItemGroup><PackageReference Include="BootstrapBlazor" Version="8.*" /><PackageReference Include="BootstrapBlazor.FontAwesome" Version="8.*" /></ItemGroup></Project>

这里加入了BootstrapBlazor相关nuget库和WebView组件。

3.新建Bootstrap Server项目

在这里插入图片描述

将wwwroot文件夹复制到Winform下
在这里插入图片描述
在wwwroot中添加index.html文件，内容如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>BlazorWinForms</title><base href="/" /><link href="BlazorWinForms.styles.css" rel="stylesheet" /><link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"><link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css"><link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css"><link rel="stylesheet" href="css/site.css"><link rel="stylesheet" href="css/motronic.css">
</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="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script><script src="_framework/blazor.webview.js"></script>
</body></html>

4.Form文件中添加BlazorWebView控件

在这里插入图片描述

窗体方法中添加如下代码

    public partial class Form1 : Form{public Form1(){InitializeComponent();var services = new ServiceCollection();// 增加 BootstrapBlazor 服务services.AddBootstrapBlazor();services.AddWindowsFormsBlazorWebView();;blazorWebView1.HostPage = "wwwroot\\index.html";blazorWebView1.Services = services.BuildServiceProvider();blazorWebView1.RootComponents.Add<Main>("#app");}}