从零搭建winform+blazor

# 准备工作

创建window窗体项目(winform)，项目名称WinFormsBlazor

使用 NuGet 包管理器安装 Microsoft.AspNetCore.Components.WebView.WindowsForms

在“解决方案资源管理器”中，右键单击项目的名称 WinFormsBlazor，然后选择“编辑项目文件”以打开项目文件 (WinFormsBlazor.csproj)。

在项目文件的顶部，将 SDK 更改为 Microsoft.NET.Sdk.Razor：

<Project Sdk="Microsoft.NET.Sdk.Razor">

将更改保存到项目文件 (WinFormsBlazor.csproj)。

在项目更目录下新建_Imports.razor文件，引入Microsoft.AspNetCore.Components.Web

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

在根目录下创建wwwroot目录，在wwwroot目录下新建index.html文件

wwwroot/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在 wwwroot 文件夹中，创建一个 css 文件夹来保存样式表。

将具有以下内容的 app.css 样式表添加到 wwwroot/css 文件夹中。

wwwroot/css/app.css：

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

从工具箱中Microsoft.AspNetCore.Components.WebView.WindowsForms下找到BlazorWebView控件，将其拖入到Form1设计器中

在控件的属性中，将 BlazorWebView 的 Dock 值更改为Fill填充

编辑Form1.cs:

// 引入这两个命名控件
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace WinFormsBlazor;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        blazorWebView1.HostPage = "wwwroot\\index.html";
        blazorWebView1.Services = services.BuildServiceProvider();
        // App为根目录下的App.razor文件，一般用来放置路由
        blazorWebView1.RootComponents.Add<App>("#app");
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

以上说明来自于微软官方文档：https://learn.microsoft.com/zh-cn/aspnet/core/blazor/hybrid/tutorials/windows-forms?view=aspnetcore-7.0

# 引入BootStrap

根据官方文档完成安装设置：https://www.blazor.zone/install-maui

# App.razor路由文件提示`routeData`不存在

需要再头部引入@using Microsoft.AspNetCore.Components.Routing

# MainLayout.razor

主要引入@inherits LayoutComponentBase和@Body

@inherits LayoutComponentBase
<h3>MainLayout</h3>

<div>
    @Body
</div>
@code {

}

1
2
3
4
5
6
7
8
9
10

#winform

上次更新: 2023/11/08, 11:12:23

从零搭建winform+blazor

# 准备工作

# 引入BootStrap

# App.razor路由文件提示routeData不存在

# MainLayout.razor

# App.razor路由文件提示`routeData`不存在