站长工具

XAF Blazor TabbedMdi

作者：haoxj

本文中的BlazorTabbedMdi是有偿的，感兴趣的可以加我QQ(120679402)

前言

XAF在WinForm中采用了多文档界面（MDI），但在Blazor中却没有，在官网中也有人提相关的问题，官方的回复是将来会考虑实现MDI（等待的时间可能会很长），同时官方也给了一些临时方案，如借用浏览器的Tab或用DashboardView来实现，其实这些方案都存在着一些问题。之前在QQ群（336090194）中上传了一个简单的MDI实现（MdiBlazorSample_20220726.zip），它是通过创建一个WindowTemplate，重写IFrameTemplate的SetView方法来实现的。新的MDI也采用了类似的方法，但加入了更多的功能，事后我会写一篇关于MDI的实现原理，感兴趣的可以关注一下。

XAF中的Blazor提供的是一个单文档界面（SDI），当我们切换视图时，上一个视图的状态会丢失，比如在一个列表视图中查看详情，当再返回列表视图时，列表视图中的过滤、翻页等状态都会丢失，这样用户体验不是很好。MDI可以很好的解决这个问题，由于它可以同时保留多个视图的状态，这样再切换视图时，视图之前的状态不会丢失。

在XAF中我们更多的是对视图进行操作，但视图是被Window（或Frame）包裹的，在BlazorTabbedMdi中每一个视图都有一个Window，其实都是对Window进行操作，为了便于理解，将其描述为视图。

演示

基本操作

image

未保存提示

  • 如果视图被修改了，会在标题的后面加上*，保存后*会被移除
  • 试图关闭未保存的视图时，会给出提示
  • 关闭浏览器时，如果有未保存的视图，也会给出提示

image

导航历史

  • 在切换视图时，地址栏、导航栏、Tab页会同步显示对应的视图
  • 通过操作浏览器中的历史（前进、后退），可以对视图进行切换

image

Tab右键菜单

  • 通过右键菜单可以快速的关闭Tab页
  • 可以将Tab页移动到新的浏览器窗口

image

窗口管理

  • 窗口列表中包含了所有已被打开的视图
  • 可以激活、批量保存、批量关闭

image

Tab分组

  • 当打开的视图过多时，通过分组，可以更方便的操作视图
  • 分组规则可以在模型中设置，默认分组规则是将相同BO类型放在一组
  • 当切换视图时，同时也会显示它所在的组
  • 所有已打开的视图，都可以在窗口管理中查看到

image

无Tab页

  • 不显示Tab页，但保留了视图的状态
  • 可以通过导航栏或窗口管理对视图进行切换

image

使用

基本

  1. 将BlazorTabbedMdi项目引入到解决方案中

  2. 在Startup类中将BlazorTabbedMdiModule模块添加到配置中
    image

  3. 将Blazor项目中Application的基类（之前是BlazorApplication）改为MdiBlazorApplication
    image

完成上面的步骤后，就可直接使用了，如果想使用分组或无Tab页需要在模型中设置，打开模型编辑器，在Application节点中找到Mdi节点组

image

  • IsWindowKeepOpen：当为True时，保持视图的状态，默认为True
  • IsShowTabbedMdi：当为True时，显示Tab页（即使IsWindowKeepOpen为False，也会保持视图状态），默认为True
  • EnableMdiGroup：当为True时，启用分组（需要IsShowTabbedMdi为True），默认为False

默认分组规则是相同BO类型会放在一组，如果想修改默认规则需要在模块中设置，每一个视图都可以单独的设置，MdiGroup默认为空，组名称相同的会放到同一组中

image

高级

BlazorTabbedMdi使用了自定义的WindowTemplate，如果你不想使用默认的模板样式，可以有两种方式：
一、直接在BlazorTabbedMdi项目中修改MdiMainWindowTemplateComponent.razor文件，这是比较简单的方式；
二、如果你想将BlazorTabbedMdi项目作为独立模块使用，不想直接修改，可以按照下面的步骤操作。

  1. 将MdiMainWindowTemplateComponent.razor与MdiMainWindowTemplateComponent.razor.cs文件拷贝到你的Blazor项目中，将其改名为CustomMainWindowTemplateComponent，修改并补全相应的命名空间。
  2. 在你的Blazor项目创建一个继承自MdiMainWindowTemplate的类（如：CustomMainWindowTemplate）
  3. CustomMainWindowTemplate.cs中的代码如下
    image
  4. CustomMainWindowTemplateComponent.razor与CustomMainWindowTemplateComponent.razor.cs的基类需要改为FrameTemplateComponentBase<CustomMainWindowTemplate>
    image
    image
  5. 将CustomMainWindowTemplateComponent.razor中的Create代码替换为
    image
  6. 在Blazor项目中的Application类里添加下面的代码
    image
  7. 通过修改CustomMainWindowTemplateComponent文件就可以实现自定义布局及样式
  8. 这种方式比较繁琐（在示例文件中包含了全部代码），如果没有独立使用的必要可以直接使用第一种方法
本文转载于网络 如有侵权请联系删除

相关文章

  • 智者，预见未来！林德移动机器人天团超然登场

    会搬、会存储、会拣选能爬高、会钻地、还是避障高手轻松赋能工业、物流、医疗……精细操作无所不能！智者预见未来林德移动机器人天团全擎进化势不可挡▼http://mpvideo.qpic.cn/0bc32qaa4aaakyaonksu4nrfbvgdb3kaadqa.f10002.mp4?点击视频，开启智能物流新世界的大门01实力不容小觑·超半世纪的自动化技术沉淀·基于凯傲全球技术平台的全系列移动机器人·超1000个移动机器人系统项目，8000多台移动机器人交付·亚太研发制造和交付中心，本地化黏性服务02终结束缚智享未来林德移动机器人天团能够解决从收货入库到转运上架，线端配送到自动化立体存储等仓库和工厂内部各个环节的物料搬运。林德移动机器人个个身怀绝技，灵活存储，高效配送，主动安全保护，24小时不间断工作，战斗力超强。解放劳动力，开始无拘无束自动化仓储、配送作业。03作业安全很有远见林德移动机器人的主动安全，时刻守护仓储物流安全作业。基于最新的安全标准，满足PLd安全等级，360度安全激光检测，满足复杂工况安全保护。更高的安全标准，更优的效率输出。而且得益于林德自动化控制技术的优势，行驶/转

  • c++ 构造函数详解

    c++构造函数详解构造函数是干什么的该类对象被创建的时候，编译系统对象分配内存空间，并自动调用该构造函数，由构造函数完成成员的初始化工作，故：构造函数的作用：初始化对象的数据成员构造函数的分类 #include<iostream> usingnamespacestd; classCoordinate { public: //无参构造函数 //如果创建一个类你没有写任何构造函数，则系统自动生成默认的构造函数，函数为空，什么都不干 //如果自己显示定义了一个构造函数，则不会调用系统的构造函数 Coordinate() { c_x=0; c_y=0; } //一般构造函数 Coordinate(doublex,doubley):c_x(x),c_y(y){}//列表初始化 //一般构造函数可以有多个，创建对象时根据传入的参数不同调用不同的构造函数 Coordinate(constCoordinate&c) { //复制对象c中的数据成员 c_x=c.c_x; c_y=c.c_y;

  • （三）iOS开发：基于MP4格式的FFmpeg交叉编译

    在FFmpeg简介及iOS端交叉编译一文中介绍了FFmpeg提供有自己的编解码库，封装了codec层，但是有一些codec是具备自己的License，FFmpeg不会默认集成，例如libx264、FDK_AAC、LAME等，但是FFmpeg就像一个平台，可以将其他的第三方codec以插件的形式添加进来，然后为开发者提供统一的接口。 有同学私信我说能否有详细的编译流程，在此详细介绍一下。一般情况下，mp4容器封装的视频流编码格式为h264，音频流编码格式为AAC，h264的最佳编解码库为X264，AAC的最佳编解码库为FDK_AAC。因此，整个交叉编译过程实际分为3个部分：交叉编译libx264；交叉编译libfdk_aac；交叉编译FFmpeg。每个编译流程大概分为下载源码、下载并修改编译脚本、交叉编译、合并静态库四个步骤。 其中编译脚本都来源于https://github.com/kewlbear，感谢。交叉编译libx2641、下载libx264源码提供两种形式下载：从官网直接下载或者Git下载，本文都采用官网直接下载。官网下载libx264源码Git下载：gitclonehttp

  • Python的isinstance在Golang里面叫什么？

    我们知道，在Python里面，要判断一个变量是不是某个类型，只需要使用isinstance这个关键词： defcalc(param): ifisinstance(param,int): returnparam+1 elifisinstance(param,str): returnNone 复制Golang作为静态语言，虽然大多数情况下，一个变量的类型在它定义的时候就已经确定了，不会存在一会儿是整型，一会儿是字符串的情况。但是Golang有一个类型叫做interface，它里面可以储存任意类型的数据。我们来看一个例子：packagemain import( "fmt" ) funcmain(){ varparaminterface{} param=123 fmt.Println("一开始,param是：",param) param="xyz" fmt.Println("后来，param是：",param) } 复制运行效果如下图所示：在一般情况下，我们确实不会主动给自己找麻烦，故意定义一个interfac

  • 在使用 SpringMVC 时，Spring 容器是如何与 Servlet 容器进行交互的？

    最近都在看小马哥的Spring视频教程，通过这个视频去系统梳理一下Spring的相关知识点，就在一个晚上，躺床上看着视频快睡着的时候，突然想到当我们在使用SpringMVC时，Spring容器是如何与Servlet容器进行交互的？虽然在我的博客上还有几年前写的一些SpringMVC相关源码分析，其中关于Spring容器如何与Servlet容器进行交互并没有交代清楚，于是趁着这个机会，再撸一次SpringMVC源码。Spring容器的加载可否还记得，当年还没有Springboot的时候，在Tomcat的web.xml中进行面向xml编程的青葱岁月？其中有那么几段配置总是令我记忆犹新：首先是Spring容器配置：<context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-config.xml</param-value> </context-param>复制其次是Servlet容器监听器配置：&l

  • Java的IO流之字节流，Java中必须要学的内容，你会嘛？快打开学习

    又是大家都不咋爱的星期一今天大雄给小伙伴们科普的是JAVA中IO流之字节流这个知识点必须要学你会么？IO流先来认识一下IO流： IO流用来处理设备之间的数据传输，Java对数据的操作是通过流的方式，用于操作流的类都在IO包中。 1）流按流向分为两种：输入流，输出流。2）流按操作类型分为两种：字节流:字节流可以操作任何数据,因为在计算机中任何数据都是以字节的形式存储的字节流的抽象父类：InputStream/OutputStream字符流: 字符流只能操作纯字符数据，比较方便。字符流的抽象父类： Reader/Writer3）IO程序书写规范使用前，导入IO包中的类使用时，进行IO异常处理使用后，释放资源字节流今天我们先来认识一下字节流 1）FileInputStream字节流的输入，使用read()方法一次读取一个字节把文件zzz.txt中的字节读取到控制台上~因为a、b、c等英文字符在底层是用ASC码的数字表示的，所以我们在控制台上读取的结果是数字注意：read()方法的返回值是int因为字节输入流可以操作任意类型的文件,比如图片音频等,这些文件底层都是以二进制形式的存储的。 如果每

  • 分析函数之窗口子句(r4笔记第3天)

    关于分析函数，可能大家基本都是从row_number()开始了解到的。分析函数的使用在某种程度上可以避免自连接，使得原本较为繁琐复杂的查询一下子变得精简起来。 分析函数分为分区子句，排序子句，和窗口子句，对于窗口子句来说，可能开始比较难懂，这部分的使用也尤为重要。 还是先举个例子，然后基于例子再来简单分析一下分析函数。 我们创建一个测试表sales_fact createtablesales_fact( productvarchar2(200)notnull, countryvarchar2(100), regionvarchar2(100), yearnumber, weeknumber, salenumber(10,2) );然后使用以下的pl/sql插入一部分数据，我们来针对美国的牛肉贸易来做一个简单的分析：） declare tmp_sqlvarchar2(1000); begin fortmp_yearin2012..2014loop foriin1..50loop insertintosales_factvalues('BEEF','USA&#

  • 清理docker日志脚本

    #!/bin/sh #chmod+xdk_log_clean.sh #./dk_log_clean.sh echo-e"\033[44;37m本机docker容器日志大小如下\033[0m" logs=$(find/var/lib/docker/containers/-name*-json.log*) forlogin$logs do ls-sh$log done echo-e"\033[44;37m开始清理docker容器日志\033[0m" forlogin$logs do cat/dev/null>$log done echo-e"\033[44;37m清理完毕\033[0m" forlogin$logs do ls-sh$log done复制

  • Python修改文件后缀_python重命名文件名

    大家好，又见面了，我是你们的朋友全栈君。例子，python批量修改文件后缀。代码：代码示例:importos,stringdefs_rename(path,old_ext,new_ext):for(path,dirs,files)inos.walk(path):forfilenameinfiles:ext=os.path.splitext(filename)[1]if(cmp(ext,old_ext)==0):newname=filename.replace(old_ext,new_ext)oldpath=path+”\”+filenamenewpath=path+”\”+newnameprint”oldpath:”+oldpath+””print”newpth:”+newpath+””try:os.rename(oldpath,newpath)exceptValueError:print”Errorwhenrenamethefile“+oldpathexceptNameError:print”Errorwhenrenamethefile“+oldpathexceptOSError:#

  • CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths

    II.II.CF741DArpa’sletter-markedtreeandMehrdad’sDokhtar-koshpaths 名字真长 假如它没有”在每个子树中最长“的限制，我们倒真可以点分治，然后就是水题了；但是它要求在每个子树中最长，怎么办呢？ 直接上dsuontree就行了。思想还是借鉴点分治，所有点对都在LCA处处理就行。先处理轻儿子子树并回撤，然后处理重儿子不回撤，然后加入自身及轻儿子影响。在加入一坨东西时，要先查看桶中是否有能与其配对成回文串的另一半（明显一共只有\(23\)种），然后再加，这是避免子树内部配对。都是点分治的老套路了，不必多说。 所以dsuontree似乎能完美替代大部分点分治的题？ 代码： #include<bits/stdc++.h> usingnamespacestd; intn,msk[500100],fa[500100],son[500100],sz[500100],dep[500100],buc[1<<22],res[500100],ans; chars[10]; vector<int>v[500100];

  • 浅析flex 布局

    Flex基本概念： 容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）。主轴的开始位置（与边框的交叉点）叫做mainstart，结束位置叫做mainend；交叉轴的开始位置叫做crossstart，结束位置叫做crossend。 flex容器中的每个单元块被称作flexitem，其实flex布局的属性虽然分为父级容器的属性和子级容器的属性，但是其实所有的效果都是作用在子级容器上的，只不过父级容器的属性作用的是子集容器整体或者说是所有的子级容器。   如何创建flex布局？ 给div这种块状元素元素设置display:flex或者给span这种内联元素设置display:inline-flex，flex布局就创建完成了 属性介绍以及示例： 作用在父元素上的属性。 　　1.flex-direction  控制flex子项整体的布局方向。 　　row：子项按照布局顺序从浏览器的左侧开始横向排列 　　   　　row-reverse：子项按照布局顺序从浏览器的右侧开始横向排列 　　   　　column：子

  • elasticsearch如何设计集群

    本文为博客园作者所写： 一寸HUI，个人博客地址：https://www.cnblogs.com/zsql/ 　　在写本文时就在想，如果让你负责一个elasticsearch集群，从零开始，你会从哪些方面考虑？我们也知道es基本都是开箱即用，而且也很好用，配置参数也用默认的就好，只是这么简单的用不难，但是要想更好的用好es集群，那要怎么去做设计呢？我们知道想要用es集群，首先要安装es集群，当然es安装需要硬件，也就是服务器的支撑，如果安装好了es集群，也不能空跑吧，所以要有数据，所以要写入数据，当然写入数据是为了后期有所用，比如查询数据，做分析等。用是可以了，如果数据量增大，业务更加复杂，还要考虑如何更好的用，怎么用可以提高效率？一个集群也不可能只有一个人用呀，如果很多人用，就会存在不安全，需要考虑权限吧，想想也算健全了，但是万一哪天机器出问题了，数据丢失了怎么办？是不是需要做可靠的备份呢？如果整个集群完完了，又怎么办呢？当然这样的情况基本不可见，但是是不是要考虑进来呢？就算从安全和容错，以及性能方面都考虑清除了，集群正常运行了，很多时候都难免天有不测风云，是不是要经常关注

  • mysql查询优化建议(百度)

    　1.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。   2.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。   3.应尽量避免在 where 子句中对字段进行 null 值判断，否则将导致引擎放弃使用索引而进行全表扫描，如：   select id from t where num is null   可以在num上设置默认值0，确保表中num列没有null值，然后这样查询：   select id from t where num=0   4.应尽量避免在 

  • MyEclipse使用总结——在MyEclipse中新建Maven框架的web项目[转]

    前面的文章我们已经在本机安装好了maven,同时在myeclipse中配置好了maven的插件。 链接如下： Maven安装----在Windows上安装Maven   myeclipse安装maven插件     现在我们就开始在myeclipse中新建一个maven框架的web项目 新建项目   填写项目名称，一定记得勾选AddMavensupport(javaEE如果选取5.0报错，则选6.0)   我们的maven项目就新建好了，相关基本的依赖已经在pom.xml中.项目机构如下: 可能出现的错误及解决方案: 遇到的问题----新建maven项目ArtifactTransferException和Executiondefault-testResourcesofgoal   pom.xml的内容如下:   [java] viewplaincopy   <project xmlns="http://maven.apache.org/POM/4.0.0" 

  • python的and和or优先级

    原题 输入一年份，判断该年份是否是闰年并输出结果。（编程题） 注：凡符合下面两个条件之一的年份是闰年。（1）能被4整除但不能被100整除。（2）能被400整除。 答案： defget_year(): year=int(input("请输入年份：")) ifyear%4==0andyear%100!=0oryear%400==0: print("%s年是闰年"%year) else: print("%s年不是闰年"%year) get_year() ============================================= 疑问 这里ifyear%4==0andyear%100!=0oryear%400==0:我自己是认为不能写成一条语句，不能执行，于是了解了一下and与or的关系 答疑 对python而言 其一,在不加括号时候,and优先级大于or 其二,xory的值只可能是x或y.x为真就是x,x为假就是y 第三,xandy的值只可能是x或y.x为真就是y,x为假就是x 例一： 对于,1or5and4:先算5and4,5为真,值为4.再算1or4,1为真,值为1 对于

  • 如何和项目经理沟通产品的交付？

    在我们的日常软件开发中，如何提高我们的工作绩效，如何按时交付我们的产品，当我们的产品不能按时交付的时候，如何提前进行风险控制， 请参考下面的讨论结果。1.计划越详细，时间估计的比较准. 2.估算时间不够的时候且遇到被挡住思路的问题的时候，一定要及时向项目经理沟通，看是否能寻求帮助，否则等到交付的时候才说，什么都晚了。 3.如果项目经理没有要求估算时间的话，碰到问题如果在半个小时之内没有解决方案的话，一定和同事或者项目经理或者组长讨论一下。 4.对于一些技术点，如果你不熟悉，可以留一点Buffer，比如10%~15%;如果Buffer还不够的话，也尽力去做，至少体现一种积极的态度。 5.如果承诺过的事情，一定要做到。哪怕加班也要做到，因为建立一种信任关系可能需要三个月，但是毁掉这种信任关系三秒钟就够：承诺没有做到。. 6.在估算时间的时候，留有一定的余地，比如说悲观估计，这个可能需要3天，乐观估计，这个可能需要2.5天。这样为我们在交付的时候留有了一定的余地。

  • Python yield与实现

    Pythonyield与实现 yield的功能类似于return，但是不同之处在于它返回的是生成器。 生成器 生成器是通过一个或多个yield表达式构成的函数，每一个生成器都是一个迭代器（但是迭代器不一定是生成器）。 如果一个函数包含yield关键字，这个函数就会变为一个生成器。 生成器并不会一次返回所有结果，而是每次遇到yield关键字后返回相应结果，并保留函数当前的运行状态，等待下一次的调用。 由于生成器也是一个迭代器，那么它就应该支持next方法来获取下一个值。 基本操作 #通过`yield`来创建生成器 deffunc(): foriinxrange(10); yieldi #通过列表来创建生成器 [iforiinxrange(10)] 复制 #调用如下 >>>f=func() >>>f#此时生成器还没有运行 <generatorobjectfuncat0x7fe01a853820> >>>f.next()#当i=0时，遇到yield关键字，直接返回 0 >>>f.next()#继续上一

  • 并发操作的不一致性问题

    包括：丢失修改、不可重复读、读脏数据产生原因：并发操作破坏了事务的隔离性。并发控制就是要用正确的方式调度并 发操作，使一个用户事务的执行不受其他事务的干扰，从而避免造成数据的不一 致性。 实例1：事务t1读到了主播积分值，但在进行后续操作之前，事务t2增加了主播 积分值，此时t1用到的积分值就是不准确的了。为保证逻辑正确，t1必须获取最 新的积分值。 实例2：天狗的血量值接近0时，两个并发进程t1和t2同时读取到天狗血量值，但 其中一个事务即可将血量减为0，而天狗血量低于0后不需再执行相应的代码，因 此程序中必须有相应的并发控制。

  • 原型、原型链、闭包、继承

    一、原型、原型链 原型对象   在JavaScript中，每当定义一个对象（函数）时候，对象中都会包含一些预定义的属性。其中函数对象的一个属性就是原型对象prototype。注：普通对象没有prototype,但有__proto__属性。  原型对象其实就是普通对象（Function.prototype除外,它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性））。看下面的例子： functionf1(){}; console.log(f1.prototype)//f1{} console.log(typeoff1.prototype)//Object console.log(typeofFunction.prototype)//Function，这个特殊 console.log(typeofObject.prototype)//Object console.log(typeofFunction.prototype.prototyp

  • 音频处理中的尺度--Bark尺度与Mel尺度

    　　由于人耳对声音的感知（如：频率、音调）是非线性的，为了对声音的感知进行度量，产生了一系列的尺度（如：十二平均律），这里重点说下Bark尺度与Mel尺度。刚开始的时候，我自己也没弄明白这两个尺度的区别。后来才逐渐的明白他们的思考出发点，这里简单分享出来。   　　Bark（巴克）频率尺度是以Hz为单位，把频率映射到心理声学的24个临界频带上，第25个临界频带占据约：16K~20kHz的频率，1个临界频带的宽度等于一个Bark，简单的说，Bark尺度是把物理频率转换到心理声学的频率。Bark尺度频率的中心频率与临界带宽边界频率如下表所示：   临界频带 频率/Hz Bark频带 中心频率 下界频率 上界频率 1 50 0 100 2 150 100 200 3 250 200 300 4 350 300 400 5 450 400 510 6 570 510 630 7 700 630 770 8 840 770 920 9 1000 920 1080 10 1170 1080 1270 11 1370 1270

  • ❤️【Python从入门到精通】（二十六）用Python的PIL库（Pillow）处理图像真的得心应手❤️

    您好，我是码农飞哥，感谢您阅读本文，欢迎一键三连哦。 本篇重点介绍Python处理图像的标准库PIL库，处理图像真的的很方便。 干货满满，建议收藏，需要用到时常看看。小伙伴们如有问题及需要，欢迎踊跃留言哦~~~。 前言 PIL库PythonImagingLibrary，已经是Python平台事实上的图像处理标准库了。PIL功能非常强大，但API却非常简单易用。但是PIL库仅仅支持到Python2.7。为了兼容Python3.x开源社区提供了兼容版本Pillow，通过Pillow大家就可以愉快的在Python3.x上使用PIL库了。 安装Pillow以及版本兼容 通过pip命令安装Pillow还是非常方便的，一行命令就可以 安装最新版本的命令 pipinstallPillow 复制 安装指定版面的命令pipinstallPillow=={version}这里的version需要替换成指定的版本号，比如要下载8.3.0版本。 pipinstallPillow==8.3.0 复制 如果你不知道有哪些版本可以通过pipinstallPillow==进行查看。 下表是Pillow与Pytho

相关推荐

推荐阅读