本文中的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进行操作，为了便于理解，将其描述为视图。
演示
基本操作
未保存提示
- 如果视图被修改了，会在标题的后面加上*，保存后*会被移除
- 试图关闭未保存的视图时，会给出提示
- 关闭浏览器时，如果有未保存的视图，也会给出提示
导航历史
- 在切换视图时，地址栏、导航栏、Tab页会同步显示对应的视图
- 通过操作浏览器中的历史（前进、后退），可以对视图进行切换
Tab右键菜单
- 通过右键菜单可以快速的关闭Tab页
- 可以将Tab页移动到新的浏览器窗口
窗口管理
- 窗口列表中包含了所有已被打开的视图
- 可以激活、批量保存、批量关闭
Tab分组
- 当打开的视图过多时，通过分组，可以更方便的操作视图
- 分组规则可以在模型中设置，默认分组规则是将相同BO类型放在一组
- 当切换视图时，同时也会显示它所在的组
- 所有已打开的视图，都可以在窗口管理中查看到
无Tab页
- 不显示Tab页，但保留了视图的状态
- 可以通过导航栏或窗口管理对视图进行切换
使用
基本
-
将BlazorTabbedMdi项目引入到解决方案中
-
在Startup类中将BlazorTabbedMdiModule模块添加到配置中
-
将Blazor项目中Application的基类（之前是BlazorApplication）改为MdiBlazorApplication
完成上面的步骤后，就可直接使用了，如果想使用分组或无Tab页需要在模型中设置，打开模型编辑器，在Application节点中找到Mdi节点组
- IsWindowKeepOpen：当为True时，保持视图的状态，默认为True
- IsShowTabbedMdi：当为True时，显示Tab页（即使IsWindowKeepOpen为False，也会保持视图状态），默认为True
- EnableMdiGroup：当为True时，启用分组（需要IsShowTabbedMdi为True），默认为False
默认分组规则是相同BO类型会放在一组，如果想修改默认规则需要在模块中设置，每一个视图都可以单独的设置，MdiGroup默认为空，组名称相同的会放到同一组中
高级
BlazorTabbedMdi使用了自定义的WindowTemplate，如果你不想使用默认的模板样式，可以有两种方式：
一、直接在BlazorTabbedMdi项目中修改MdiMainWindowTemplateComponent.razor文件，这是比较简单的方式；
二、如果你想将BlazorTabbedMdi项目作为独立模块使用，不想直接修改，可以按照下面的步骤操作。
- 将MdiMainWindowTemplateComponent.razor与MdiMainWindowTemplateComponent.razor.cs文件拷贝到你的Blazor项目中，将其改名为CustomMainWindowTemplateComponent，修改并补全相应的命名空间。
- 在你的Blazor项目创建一个继承自MdiMainWindowTemplate的类（如：CustomMainWindowTemplate）
- CustomMainWindowTemplate.cs中的代码如下
- CustomMainWindowTemplateComponent.razor与CustomMainWindowTemplateComponent.razor.cs的基类需要改为FrameTemplateComponentBase<CustomMainWindowTemplate>
- 将CustomMainWindowTemplateComponent.razor中的Create代码替换为
- 在Blazor项目中的Application类里添加下面的代码
- 通过修改CustomMainWindowTemplateComponent文件就可以实现自定义布局及样式
- 这种方式比较繁琐（在示例文件中包含了全部代码），如果没有独立使用的必要可以直接使用第一种方法
原文地址：http://www.cnblogs.com/haoxj/p/16916525.html
