XAF Blazor TabbedMdi

开源项目地址：https://gitee.com/easyxaf/blazor-tabbed-mdi

前言

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页，但保留了视图的状态
• 可以通过导航栏或窗口管理对视图进行切换

使用

基本

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

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

3. 将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项目作为独立模块使用，不想直接修改，可以按照下面的步骤操作。

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