首页 > 其他分享 >在winform中使用blazor hybrid构建页面

在winform中使用blazor hybrid构建页面

时间:2023-12-08 17:37:33浏览次数:84  
标签:wwwroot hybrid 组件 Form1 添加 所示 blazor Microsoft winform

1、Blazor Hybrid简介

Blazor Hybrid 使开发人员能够将桌面和移动本机客户端框架与 .NET 和 Blazor 结合使用。在 Blazor Hybrid 应用中,Razor 组件在设备上是本机运行的。 这些组件通过本地互操作通道呈现到嵌入式 Web 视图控件。 组件不在浏览器中运行,并且不涉及 WebAssembly。 Razor 组件可快速加载和执行代码,这些组件可通过 .NET 平台完全访问设备的本机功能。

image-20231208143823640

2、效果

3、步骤

如果对在winform中使用blazor hybrid感兴趣的话,可以继续往下阅读,看看具体的实现步骤是怎样的。

正常创建winform

创建一个winform,我这里使用的是.NET 8,如下所示:

image-20231208144608997

安装NuGet包

安装Microsoft.AspNetCore.Components.WebView.WindowsForms,如下所示:

image-20231208145229671

image-20231208145320892

更改csproj文件

在“解决方案资源管理器”中,右键单击项目的名称 ,然后选择“编辑项目文件”,如下所示:

image-20231208145822123

在项目文件的顶部,将 SDK 更改为 Microsoft.NET.Sdk.Razor,如下所示:

image-20231208145946074

点击保存,保存之后,你会发现你的项目变成了这样,如下所示:

image-20231208150644002

添加_Imports.razor 文件

_Imports.razor 文件添加到项目的根目录。如下所示:

image-20231208152453417

_Imports.razor中的内容为:

@using Microsoft.AspNetCore.Components.Web

如下所示:

image-20231208152614628

添加index.html 文件

先将 wwwroot 文件夹添加到该项目。

再将具有以下标记的 index.html 文件添加到 wwwroot 文件夹。

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

标签:wwwroot,hybrid,组件,Form1,添加,所示,blazor,Microsoft,winform
From: https://www.cnblogs.com/mingupupu/p/17888646.html

相关文章

  • 渐进式web全栈:blazor web app
    前言本文要说的这种开发模式,这种模式并不是只有blazor支持,js中有一样的方案next.jsnuxt.js;blazor还有很多其它内容,本文近关注渐进式开发模式。是的,前后端是主流,不过以下情况也许前后端分离并不是最好的选择:小公司,人员不多,利润不高,创业阶段能省则省个人开发者,接接私活,要么一......
  • 关于Winform+KitWare.VTK+PCL处理3D点云文件的编译环境
    最近项目需求,在网上找了一个处理3D点云文件的源码,但是发现无法编译,研究了下原来是电脑环境问题,必须配置一个PCL库的环境才能使用,下面进入正题。首先需要安装PCL环境,可以通过vcpkg安装(因为我没有成功,所以请自行查找),我是一直卡在装载pcl环节失败,网上搜了很多解决方法,包括重装VS英文......
  • DevExpress WinForms Pivot Grid组件,一个类似Excel的数据透视表控件(一)
    界面控件DevExpressWinForms的PivotGrid组件是一个类似Excel的数据透视表控件,用于多维(OLAP)数据分析和跨选项卡报表。众多的布局自定义选项使您可以完全控制其UI,无与伦比的以用户为中心的功能使其易于部署。DevExpressWinForms有180+组件和UI库,能为WindowsForms平台创建具有......
  • MAUI+Masa Blazor APP 各大商店新手发布指南-华为篇
    目录前言准备材料一、企业认证二、审核资料审核注意事项总结前言AppGalleryConnect(简称AGC)是华为应用市场推出的应用一站式服务平台,致力于为开发者提供应用创意、开发、分发、运营、分析全生命周期服务,构建全场景智慧化的应用生态。AppGalleryConnect深度整合华为内部各项优......
  • C# winform 获取屏幕分辨率缩放率,获取屏幕设置分辨率
    解决问题:1)当需要抓取显示器分辨率的缩放比例时。2)当屏幕显示缩放设置不等于100%,导致分辨率改变,Screen.PrimaryScreen.Bounds抓取不到实际设置的分辨率时。解决方案:使用GetDeviceCaps函数。///<summary>///设备数据函数///</summary>///......
  • 在Winform应用中增加通用的业务编码规则生成
    在我们很多应用系统中,往往都需要根据实际情况生成一些编码规则,如订单号、入库单号、出库单号、退货单号等等,我们有时候根据规则自行增加一个函数来生成处理,不过我们仔细观察后,发现它们的编码规则有很大的共通性,因此可以考虑使用一些通用的业务编码规则生成,从而在系统中统一维护即......
  • blazor虚拟化
    提问如何时使用虚拟化提高页面响应回答1.引入命名空间@usingMicrosoft.AspNetCore.Components.Web.Virtualization2.使用标签<VirtualizeItems="@_signalsDto"Context="flight"><CardGridStyle="width:260px;text-align:left"Hoverable=&quo......
  • AntDesignBlazor示例——列表查询条件
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/AntDesignDemo1.学习目标重构项目文件结构添加日期查询条件实现查询业务逻辑2.重构项目结构在实现列表查询条件功能之前,我们先重构一下项目结构,创建天气Mod......
  • AntDesignBlazor示例——创建列表页
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/AntDesignDemo1.学习目标使用Table组件创建列表页面使用DisplayName特性显示中文表头使用模板和Tag组件显示高温数据使用TitleTemplate自定义栏位表头2.创......
  • 在winform中绘图
    今天跟大家分享一下最近做的一个程序中绘图功能的实现。先来看看实现的效果:具体实现页面的设计绘图设置页面的设计如下所示:4个label控件,控件如下所示:2个DateEdit控件,控件如下所示:1个ComboBoxEdit控件,控件如下所示:1个CheckedListBoxControl控件,控件如下所示:1个Simpl......