个人中心

联系我们

搜索
搜索 登录 免费注册
界面美化
业务优化
开发工具
图像管理
文档管理
Parasoft

新闻资讯

关注工具软件产品最新动态,了解软件开发行业新趋势。

DevExpress Universal v22.2 更新亮点解析(七):Blazor UI 组件

原创
软件开发
来源:DevExpress
ui界面
DevExpress
.net
2022-12-16
ui界面
DevExpress
.net

Blazor UI 组件 v22.2

.NET 7 支持

我们的 Blazor 组件完全支持 .NET 7DevExpress 模板库现在包括 .NET 7 Blazor 项目模板。

 

 

提前 (AOT) 编译支持

DevExpress 支持的 Blazor WebAssembly 应用程序现在支持提前 (AOT) 编译。您可以将 .NET 代码直接编译为 WebAssembly

 

注意:AOT 编译提高了运行时性能,但它确实增加了应用程序的大小。

 

Blazor WebAssembly 应用的项目文件中,添加RunAOTCompilation属性。将此属性设置为“true”以启用 WebAssembly AOT 编译。

 

XAML

<PropertyGroup>

<RunAOTCompilation>true</RunAOTCompilation>

</PropertyGroup>

 

Blazor 混合支持

你现在可以在Blazor 混合应用程序 中使用 DevExpress Blazor UI 组件。借助 Blazor HybridRazor 组件可以在移动和桌面设备上本地运行。这提高了性能,并通过 .NET 平台提供了对本机设备功能的访问。

 

DevExpress Blazor 组件通过 Blazor Hybrid 支持以下平台:

• .NET MAUI (Windows, MacOS, Android, iOS)

• WinForms

• WPF

 

Bootstrap v5.2 支持

DevExpress Blazor 组件现在完全支持最新版本的 Bootstrap v5.2。将BootstrapVersion选项设置为 v5 以确保您的应用程序正常运行。

 

C

builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);

 

新的渲染和大小模式

DevExpress Blazor 数据网格(DxGrid)、编辑器、布局和导航组件现在使用我们优化的呈现引擎而不是 Bootstrap。此更改将使我们能够使用以下新功能/特性扩展我们的 Blazor 组件套件:

• 通过更少的 JavaScript 互操作调用提高了渲染性能。

•  DevExpress Blazor 组件的一致外观。

我们新的渲染引擎显着提高了现有 Blazor大小模式 的功能:

• Blazor 组件(无论使用何种大小模式)都被缩小以满足“密集”界面的要求,并在屏幕上显示更多相关信息。新的大尺寸模式反映了过去的“中号”。新的中模式更接近于过去的“小”模式。我们新的小型模式允许您提供类似于 Microsoft Outlook 等桌面应用程序的界面。

• 新的大小模式适用于我们的 Blazor 数据网格 (DxGrid)、选项卡、弹出窗口和其他以前不支持大小模式选项的 UI 组件。

• 大小模式现在提供更一致的用户体验,并影响受支持的 Blazor 组件的所有间距/大小。例如,我们的 Blazor Form Layout 组件根据选定的大小模式调整项目/组之间的填充。

 

渲染和大小模式 - Blazor UI 组件、DevExpress

 

 

新窗口组件

我们的新 Window 组件是一个非模态窗口。其特点包括:

 

• 移动和调整大小

• 标题定制

• 显示/隐藏关闭按钮

• 窗口定位(在指定位置或 UI 元素)

• 键盘支持

• 全面的API

 

 

Blazor 窗口组件,DevExpress

 

 

 

数据网格

将数据导出到 Excel

我们的 Blazor 数据网格现在可以将数据导出到 Excel。使用这个新的 API,您可以将数据保存到 XLSXLSX CSV 文件(或流)。数据导出操作支持分组、排序、过滤、汇总和分组汇总。

 

API 包括:

• ExportToXlsAsync

• ExportToXlsxAsync

• ExportToCsvAsync

所有方法都接受“选项”参数。此参数允许您自定义导出的文档。

 

 

网格 - 将数据导出到 Excel、DevExpress Blazor UI 组件

 

 

搜索框

我们的 Blazor 数据网格组件包括渐进式不区分大小写的搜索选项(允许您在键入时找到匹配的文本)。当您在搜索框中键入内容时,数据网格会过滤数据行,显示与搜索字符串匹配的行,并突出显示搜索结果。

 

附加功能包括:

• 支持特殊字符。

• 可配置的输入延迟。

• 搜索框占位符(空文本)支持。

• 能够从搜索操作中排除特定列。

• 内置搜索文本解析模式。

• 能够在代码中指定搜索文本(搜索 API)。

是的,您可以自定义搜索框外观设置、从模板呈现搜索框或使用外部编辑器。

 

 

网格 - 搜索框、DevExpress Blazor UI 组件

 

 

 

集成编辑器外观

嵌入到单元格中的 DevExpress 数据编辑器与单元格本身共享相同的边框。

 

要启用新模式,请将EditorRenderMode属性设置为 Integrated

 

 

集成编辑器外观——Blazor Data Grid、DevExpress

 

 

 

重点行

我们的 Blazor 网格现在支持行焦点。用户可以用鼠标聚焦一行。将FocusedRowEnabled属性设置为“true”以启用此功能。

 

SetFocusedDataItemAsyncSetFocusedRowIndex方法允许您在代码中聚焦一行。焦点行更改后, 数据网格会触发FocusedRowChanged事件。

 

 

网格 - 重点行,DevExpress Blazor UI 组件

 

 

 

全选

新的SelectAllCheckboxMode属性指定了全选复选框的行为。可用选项包括:

• 页面 - 选择/取消选择当前页面上的所有行。

• AllPages - 选择/取消选择所有页面的所有行。

• 混合 - 选择/取消选择当前页面上的所有行。下拉按钮会打开上下文菜单,并允许用户选择和取消选择所有网格页面中的所有行。

API 包括:

• SelectAllAsync - 选择网格中的所有行。

• DeselectAllAsync - 取消选择网格中的所有行。

 

 

 

按显示文本过滤

新的DxGridDataColumn.FilterMode属性指定如何过滤列数据。可用选项包括:

• DisplayText - 根据单元格内显示的文本过滤数据。

•  - 根据单元格值过滤数据。

 

过滤器表达式 API

这个新的 API 允许您在代码中过滤数据并实现针对特定使用场景量身定制的外部过滤 UI

• GetFilterCriteria - 获取应用于网格的过滤条件。

• 获取应用于指定字段的过滤条件。

• SetFilterCriteria - 根据指定标准过滤网格数据。

• SetFieldFilterCriteria - 过滤指定的字段值。数据网格将列过滤器与 AND 运算符组合在一起。

• FilterCriteriaChanged - 在过滤条件更改后触发。

 

 

 

固定和相对高度

您可以显式设置 Blazor 网格的高度,或将高度设置为容器/视口高度的百分比。无论网格中显示的行如何,页脚元素都将保留在底部。

 

XAML

<DxGrid style="height:100%" Data="@forecasts">

 

Accordion

项目选择

我们的 Blazor Accordion 组件现在支持项目选择。将SelectionMode属性设置为 Single 以启用此功能。

 

用户可以单击项目标题来选择项目。SelectItem方法允许您在代码中选择一个项目。

 

 

 

URL 匹配模式

如果 Accordion 组件的NavigateUrl属性值指向当前 URL(显示在 Web 浏览器的地址栏中),则它可以自动选择一个项目。可用模式包括当前路径、前缀和精确。

 

两个新属性允许您指定 Accordion 组件如何匹配 URL

• DxAccordion.UrlMatchMode - 指定用于所有项目的 URL 匹配模式。

• DxAccordionItem.UrlMatchMode - 指定用于特定项目的 URL 匹配模式。

您还可以使用Reason属性来确定更改选择的原因。

 

 

展开和折叠动画

您现在可以在展开/折叠手风琴项目时播放幻灯片动画效果。


联系我们

周一至周日 8:00-23:00

免费热线

023-62585653

张经理:13082556879

罗经理:17558866126

许经理:13057566525

开发外包

ERP-一体化

小程序

企业微信客服

版权所有:重庆庚乾信息科技有限公司 ©2025 Gengqian Information Technology Co., Ltd. 渝ICP备2022008063号-2 渝公网安备50010702505508

版权所有:重庆庚乾信息科技有限公司

©2025 Gengqian Information Technology Co., Ltd. 渝ICP备2022008063号-2 渝公网安备50010702505508