界面控件DevExpress Blazor v26.1新版亮点

DevExpress Blazor控件为使用C#为Blazor服务器和Blazor WebAssembly创建高影响力的用户体验，其附带了70+个原生的Blazor组件（包括DataGrid、Pivot Table、Scheduler、图表、数据编辑器和报表）。

在接下来的系列文章中，我将为大家一一介绍DevExpress Blazor v26.1在新版本中的更新亮点，希望能帮助到大家~欢迎点赞关注哦，不定期更新~

DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316

AI Agent Skills

DevExpress 的Blazor组件/UI库附带AI Skills，旨在帮助编码代理更有效地利用DevExpress Blazor UI组件。每个Skill都专注于特定的组件，并包括生成准确代码所需的所有详细信息：所需的NuGet包、相关API、入口点、配置设置和常见使用场景。

DevExpress Blazor skills在DevExpress AI Skills库中提供。

DevExpress skills集支持以下Blazor组件：

AI Chat
Charts
ComboBox
Grid
Gauges
Pivot Table
Ribbon
Scheduler
Toolbar
TreeList

有关其他信息，请参阅以下帮助主题：DevExpress AI Skills for Coding Agents.

结束对Bootstrap v4的支持

随着v26.1的发布，DevExpress完成了从Bootstrap v4的过渡，并正式停止了Bootstrap-v4支持：

DevExpress.Blazor.Themes软件包不再包括基于Bootstrap v4的经典主题样式表（Blazing Berry、Blazing Dark、Office White、Purple）
已删除所有剩余的Bootstrap v4主题依赖项/默认CSS

DevExpress Blazor组件现在支持Bootstrap v5。

图标库（CTP）

DevExpress图标库现在可通过DevExpress.Images.Blazor NuGet包向Blazor开发人员提供，该软件包包括一个广泛的图标集，使用基于sprite的交付模型，并为Blazor组件公开一致的API。

DevExpress图标库在v26.1发行周期中作为社区技术预览版提供，官方鼓励用户探索其可能性。

扩展图标集合

该库包含13000多个图标，旨在满足各种UI需求。为了简化导航，图标按以下属性分组：

集合：Fluent、Desktop Classic、Blazor Classic
样式：常规、浅色、填充
颜色：单色、多色
尺寸：12、16、20、24、28、32、48

此结构允许您选择与应用程序的视觉语言和布局要求相匹配的一致图标。

优化交付

为了最大限度地减少性能影响，根据相关属性（设置、样式、大小和颜色）将图标分组为~50个 sprite，应用程序不是预先加载sprite文件，而是按需请求它们（当使用sprite图标时）。

基于Sprite的交付确保快速启动和低内存使用。

图标API

注册DevExpress.Images.Blazor命名空间，来在DevExpress支持的Blazor应用程序中使用DevExpress图标库。

您可以使用IconUrl属性（如DxAccordionItem.IconUrl或DxRibbonItem.IconUrl）将图标分配给Blazor组件。

官方建议使用语义图标引用（隐喻）–指定图标标识符，框架自动选择适当的图标（基于当前主题和UI设置）。

Razor

@using DevExpress.Images.Blazor <DxRibbon> <DxRibbonApplicationTab Text="File"> <DxRibbonApplicationTabItem Text="New" IconUrl="@Icon.DocumentBlank" /> <DxRibbonApplicationTabItem Text="Open" IconUrl="@Icon.FolderOpen" /> <DxRibbonApplicationTabItem Text="Save as" IconUrl="@Icon.Save"> <DxRibbonApplicationTabItem Text="Plain Text" /> <DxRibbonApplicationTabItem Text="Word Document" /> <DxRibbonApplicationTabItem Text="PDF" /> </DxRibbonApplicationTabItem> <DxRibbonApplicationTabItem Text="Share" IconUrl="@Icon.Share" /> <DxRibbonApplicationTabItem Text="Print" IconUrl="@Icon.Printer" /> </DxRibbonApplicationTab> @* ... *@ </DxRibbon>

此实现简化了图标管理，并有助于跨主题、大小模式和其他外观配置提供一致的用户体验。

或者，您可以显式引用图标资源：

Razor

@using DevExpress.Images.Blazor <DxButton RenderStyle="@ButtonRenderStyle.Primary" Text="Undo" IconUrl="@IconStatic.ArrowUndo.Fluent.Filled.Monochrome.Size16"/>