在winform blazor hybrid中绘图

这篇具有很好参考价值的文章主要介绍了在winform blazor hybrid中绘图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前几天跟大家介绍了在winform中使用blazor hybrid,而且还说配上blazor的ui可以让我们的winform程序设计的更加好看,接下来我想以一个在winform blazor hybrid中绘图的例子来进行说明,希望对你有所帮助。

效果

在开始之前,先给大家演示一下效果,如下所示:

具体实现

如果你对具体实现感兴趣,可以继续往下阅读。

1、引入ant design blazor

该应用中用到的所有组件都来源于ant design blazor。

在本文中我只介绍绘图部分的实现,首先需要在项目中引入ant design blazor。

安装 Nuget 包引用,如下所示:

如果需要画图的话,还需要引用AntDesign.Charts包引用。

在项目的 Form1.cs 中注册相关服务:

services.AddAntDesign();

如下所示:

引入静态样式和脚本文件:

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

winform blazor hybrid项目在wwwroot/index.html中引入,如下所示:

这里我也把AntDesign.Charts的引入了。

_Imports.razor 中加入命名空间:

@using AntDesign

为了动态地显示弹出组件,需要在 App.razor 中添加一个 <AntContainer /> 组件。

这是官网的说法,在winform blazor hybrid中可以在当做主页面的razor中添加,我这里是Index.razor如下所示:

现在就可以使用ant design blazor的组件了。

2、页面设计

绘图页面的设计如下所示:

第一步选择喜欢的布局,我选的是官网中的这一款,如下所示:

自己修改一下图标与名字,那么现在摆在面前的第一个问题就是,如何实现点击切换页面呢?

每一个MenuItem都有一个Key属性,如下所示:

在这里每一个Key都是唯一的。点击不同的MenuItem都会触发点击事件,而点击事件使用了lambda表达式调用了同一个方法,但是参数不同。

现在来看看这个方法:

 int selectedMenuItem = 1;
private void NavigateToContent(int menuItemNumber)
{
    selectedMenuItem = menuItemNumber;
}

很简单,只是将参数传给selectedMenuItem。

然后在内容这个地方,使用switch case:

<Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 450px;">
@switch(selectedMenuItem)
{
  case 1:
   <GetData></GetData>
          break;
  case 2:
    <QueryData></QueryData>
          break;
  case 3:
     <Painting></Painting>
          break;
  case 4:
     <Export></Export>
          break;              
}
</Content>

然后就可以根据不同的selectedMenuItem值显示不同的组件了。

现在来看看<Painting></Painting>组件的设计。

<Painting></Painting>组件的页面代码如下:文章来源地址https://www.toymoban.com/news/detail-755405.html

<div>
   <GridRow>
       <GridCol Span="8">    
       <Space Direction="DirectionVHType.Vertical">
               <SpaceItem>
                   <Text Strong>开始日期:</Text>
               </SpaceItem>
               <SpaceItem>
                   <DatePicker TValue="DateTime?" Format="yyyy/MM/dd"
                   Mask="yyyy/dd/MM" Placeholder="@("yyyy/dd/MM")"
                   @bind-Value = "Date1"/>
               </SpaceItem>
               <SpaceItem>
                   <Text Strong>结束日期:</Text>
               </SpaceItem>
               <SpaceItem>
                   <DatePicker TValue="DateTime?" Format="yyyy/MM/dd"
                   Mask="yyyy/dd/MM" Placeholder="@("yyyy/dd/MM")"
                   @bind-Value = "Date2"/>
               </SpaceItem>
           <SpaceItem>
               <Text Strong>站名:</Text>
           </SpaceItem>
           <SpaceItem>
               <AutoComplete @bind-Value="@value"
                             Options="@options"
                             OnSelectionChange="OnSelectionChange"
                             OnActiveChange="OnActiveChange"
                             Placeholder="input here"
                             Style="width:150px"/>
           </SpaceItem>
           <SpaceItem>
               <Text Strong>绘图指标:</Text>
           </SpaceItem>
           <SpaceItem>
               <div>            
                   <AntDesign.CheckboxGroup Options="@ckeckAllOptions" @bind-Value = "selectedValues"/>
               </div>
           </SpaceItem>
           <SpaceItem>
               <Button Type="@ButtonType.Primary" OnClick="Painting_Clicked">绘图

到了这里,关于在winform blazor hybrid中绘图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Blazor HyBrid 授权讲解

    本文介绍 ASP.NET Core 对 Blazor Hybrid 应用中的安全配置和管理及 ASP.NET Core Identity 的支持。 Blazor Hybrid 应用中的身份验证由本机平台库处理,因为后者提供了浏览器沙盒无法给予的经过增强的安全保证。 本机应用的身份验证使用特定于操作系统的机制或通过联合协议,如 OpenID

    2024年02月07日
    浏览(32)
  • bh002- Blazor hybrid / Maui 保存设置快速教程

    1. 建立工程 bh002_ORM 源码 2. 添加 nuget 包 3. 添加命名空间引用 _Imports.razor @using BootstrapBlazor.Components 4. 添加服务 MauiProgram.cs 在 return builder.Build(); 之前加入这句 5. 添加代码后置文件 Pages/Index.razor.cs Index.razor.cs 6. 添加 UI Index.razor 7. 执行效果 8. 添加清除按钮 Index.razor Index.razor.c

    2024年02月11日
    浏览(35)
  • Blazor HyBrid在香橙派(Ubuntu Arm)运行的效果

    准备香橙派一块!当前教程使用的是香橙派5 4G开发板 准备.NET环境 安装.NET Core依赖 下载.NET 7 SDK 创建dotnet文件夹并解压 创建软连接 查看版本 如果需要使用 https 请使用 一下是一个 Masa Blazor 可以用于在 Arm 设备运行的程序 项目开源地址: 239573049/MasaLinuxDesktop (github.com) 然后在

    2024年02月06日
    浏览(138)
  • bh003- Blazor hybrid / Maui 使用蓝牙BLE快速教程

    源码 https://github.com/densen2014/BlazorHybrid/tree/master/bh100days/bh003_ble?WT.mc_id=DT-MVP-5005078 BlazorHybrid.Maui.Permissions 因为源码比较长,主要是一些检查和申请权限,BLE权限相关代码,就不占用篇幅列出,感兴趣的同学直接打开源码参考 顺便打开可空 Nullableenable/Nullable 安卓 AndroidManifest.xml iOS I

    2024年02月11日
    浏览(43)
  • 在winform中绘图

    今天跟大家分享一下最近做的一个程序中绘图功能的实现。 先来看看实现的效果: 绘图设置页面的设计如下所示: 4个label控件,控件如下所示: 2个DateEdit控件,控件如下所示: 1个ComboBoxEdit控件,控件如下所示: 1个CheckedListBoxControl控件,控件如下所示: 1个SimpleButton控件,

    2024年02月05日
    浏览(79)
  • Blazor 简单组件(0):简单介绍

    Blazor 这个技术还是比较新,相关的UI组件还在完善,我这里提供一下我个人的组件开发。 本UI组件是基于BootstrapBlazor(以下简称BB)开发。 BootstrapBlazor 文档 C#小轮子:Visual Studio自动编译Sass文件 C# Blazor 学习笔记(12):css样式设置

    2024年02月13日
    浏览(44)
  • 接下来和大家介绍ai绘画软件哪个好

    嘿,你好啊!这几天我发现了一个很酷的东西,就是那些可以使用ai技术帮助我们绘制动物的软件!它们真的是太神奇了!不仅可以让我们的绘画技能大大提升,而且还能够让我们创造出想象中的奇妙动物。但是,市面上有这么多的ai动物绘画软件,该选哪一个呢?今天,我就

    2024年02月12日
    浏览(41)
  • 给大家介绍几个手机冷门但好用的小技巧

    技巧一:拍照识别植物 手机的拍照识别植物功能是指在使用手机相机时,可以通过对植物进行拍照,并通过植物识别技术,获取植物的相关信息和资料。其主要优点如下: 方便实用:使用拍照识别植物功能,用户只需对植物进行拍照即可获取相关信息,方便快捷。 资料齐全

    2024年02月01日
    浏览(93)
  • 今天给大家介绍一下华为智选手机与华为手机的区别

    华为智选手机是由华为品牌方与其他公司合作推出的手机产品,虽然其机身上没有“华为”标识,但是其品质和技术水平都是由华为来保证的。这些手机在制造、设计和使用方面都采用了华为的相关技术和标准,因此可以享受到和华为旗舰手机相同的优质使用体验。    目前

    2024年02月09日
    浏览(48)
  • 今天跟大家好好介绍一下接口工具(jmeter、postman、swagger等)

    一、接口都有哪些类型? 接口一般分为两种:1.程序内部的接口 2.系统对外的接口 系统对外的接口:比如你要从别的网站或服务器上获取资源或信息,别人肯定不会把 数据库共享给你,他只能给你提供一个他们写好的方法来获取数据,你引用他提供的接口就能使用他写好的

    2024年02月05日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包