LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

如何创建Winform Blazor应用

admin
2024年2月7日 23:29 本文热度 76

导读

    如果有接触过Blazor的,基本也都了解过一些前端组件,如:MASA、AntDesign等,同样也都配备了Winform或者WPF等桌面应用的集成模板。但是如果不想使用第三方,自己如何手动创建一个干净纯粹的项目呢?


开发环境:.NET 6

开发工具:Visual Studio 2022

 









实现步骤



  1. 创建一个基于.Net6+的Winform应用
  2. 使用NuGet 包管理器安装 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 包,这里由于我们使用的使用的.NET6版本,所以选择6开头的版本的包
  3. 编辑项目文件,将顶部的
<Project Sdk="Microsoft.NET.Sdk">改为<Project Sdk="Microsoft.NET.Sdk.Razor">


  1. 添加_Imports.razor文件,内容如下,其他一些公共的经常使用的引用或者注入也都放到此页面,就不用在其他页面分别引用了
@using Microsoft.AspNetCore.Components.Web


  1. 创建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" data-nosnippet>        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. 创建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. 创建一个Razor组件,Counter.Razor,内容如下。
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {    private int currentCount = 0;
   private void IncrementCount()    {        currentCount++;    }}


  1. 打开Winform窗体设计页面,在工具箱中找到BlazorWebView控件并拖入到窗体(注意这里不是WebView2控件,请勿选错 ),并设置Dock属性为Fill
  2. 在窗体的代码页面添加以下引用
    using Microsoft.AspNetCore.Components.WebView.WindowsForms;using Microsoft.Extensions.DependencyInjection;



  1. 在构造函数中的 InitializeComponent 方法调用后面,添加以下代码
    var services = new ServiceCollection();services.AddWindowsFormsBlazorWebView();blazorWebView1.HostPage = "wwwroot\\index.html";blazorWebView1.Services = services.BuildServiceProvider();blazorWebView1.RootComponents.Add<Counter>("#app");


  1. 以上只是一个比较简单的结构,实际上整个项目的文件结构,可以直接参考Blazor项目的结构,如使用SharedPages

实现效果

 



☛☛☛点击此处下载源码☚☚☚

该文章在 2024/2/7 23:29:29 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved