界面控件DevExpress Blazor UI v24.1新版亮点：全新的渲染引擎和项目模板等-控件新闻-慧都网

界面控件DevExpress Blazor UI v24.1新版亮点：全新的渲染引擎和项目模板等

翻译|产品更新|编辑：龚雪|2024-11-26 10:17:27.790|阅读 63 次

概述：DevExpress Blazor控件目前已经升级到v24.1版本了，此版本发布了全新的Sparkline、新的渲染引擎、升级的项目模板等，欢迎下载最新组件体验！

全新的Sparkline

DevExpress Blazor全新的Sparkline组件允许您使用紧凑的UI隐喻来显示价格趋势，可以使用DevExpress Blazor Sparkline作为一个独立的组件或嵌入到其他UI控件。Sparkline允许您在根组件级别配置所有系列和点设置，Sparkline基于Type属性值（它定义了系列类型）应用相应的设置。除了序列和点设置之外，您还可以配置工具提示和自定义组件的容器。

Sparkline包括内置的导出和打印功能，您可以调用ExportToAsync方法将数据导出到文件（PNG、PDF、JPEG或SVG），或者调用GetSvgMarkup方法来获取组件的SVG标记。

全新的渲染引擎

下面的DevExpress Blazor组件现在使用我们优化的渲染引擎（替代Bootstrap）：

Charts
Rich Text Editor
Scheduler
Pivot Grid
Upload
Report Viewer

键盘支持

为了解决可访问性标准并改善用户体验，v24.1为以下DevExpress Blazor UI组件添加了键盘导航支持：

Date Edit
Time Edit
Tree View
Accordion
ComboBox
List Box
TagBox
Rich Text Editor
Upload
Report Viewer

项目模板

.NET 8身份验证和授权

针对.NET 8的Blazor项目模板包含一个选项，可以在项目中添加ASP .NET Core身份和基于Token的身份验证，除了必要的基础设施之外，我们的模板还生成了一个由DevExpress Blazor组件提供支持的身份验证接口。

Grid（网格）

Header Bands

DevExpress Blazor Grid控件现在可以将其列排列成称为频带的逻辑组，每个波段包含自己的标题，显示在列标题上方，没有带的列横跨整个带区域。网格还支持多级频带，其中一个频带可以显示其内部的其他频带。

虽然最终用户可以在频带内重新排序列或将列移动到Group Panel，但频带之间的列移动受到限制。

网格的列选择器也已更新，来支持Header Bands。它分层显示频带和列，并允许最终用户切换整个组的可见性，而不仅仅是单个列。

导出服务器端数据

DevExpress Blazor v24.1为任何受支持的服务器端数据/服务器模式源（GridDevExtremeDataSource或CustomDataSource）引入了Blazor Grid数据导出功能，远程数据支持导出为XLS、XLSX和CSV三种格式。

DevExpress Blazor Grid现在可以从远程数据源和导出文档中获取记录。在获取记录时，网格显示一个加载指示器。为避免闪烁，该指示灯只在预估取值时间内显示。

全新的单元格编辑器外观

DevExpress Blazor Grid的筛选行、编辑行和编辑单元格中的In-place编辑器具有新的改进的外观/感觉，并在需要时自动显示验证图标，网格单元格的外观现在在显示和编辑模式下都是一致的。

单元格编辑增强

DevExpress Blazor Grid的编辑单元格模式功能现在是正式发布，包括虚拟滚动支持。它现在附带了以下增强功能：

用户现在只需单击一下就可以更改复选框的值。
当单元格切换到编辑模式时，网格会自动选择单元格文本。
网格现在在切换到编辑模式时自动更新焦点行。
网格的新GetEditContext方法允许您随时获取编辑上下文。
列文本对齐会影响列内显示的编辑器。

键盘导航增强和新标签导航

在v24.1中，DevExpress Blazor Grid提供了增强的键盘导航和虚拟滚动支持。Grid组件现在自动激活键盘导航和内置快捷键（注意：项目中删除KeyboardNavigationEnabled属性，它现在已经过时了）。

无论单元格编辑器的激活状态如何，Tab键都可以在所有网格单元格之间导航，用户也可以通过按Ctrl + Up或Ctrl + Down （Mac上是Alt + Up或Alt + Down）离开表格区域。

此外，新版本改进了RowClick 事件。在v24.1中，此事件允许您实现自定义操作，来响应鼠标单击和用户在数据行有焦点时按Enter键。

内置值发布

新版本向EditModelSaving事件参数添加了以下新方法：CopyChangesToDataItem。此方法允许您复制在编辑期间对编辑模型所做的所有更改，复杂的字段值也可以被复制。

下面的v23.2代码片段…

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (EmployeeEditModel)e.EditModel;
if (dataItem != null) {
dataItem.FirstName = editModel.FirstName;
dataItem.LastName = editModel.LastName;
dataItem.Title = editModel.Title;
dataItem.HireDate = editModel.HireDate;
}
}

…现在可以用更短的版本替换：

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (EmployeeEditModel)e.EditModel;
if (dataItem != null) {
e.CopyChangesToDataItem();
}
}