DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創(chuàng)建高影響力的用戶體驗，這個UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調(diào)度程序、圖表、數(shù)據(jù)編輯器和報表等）。

DevExpress Blazor控件目前已經(jīng)升級到v24.1版本了，此版本發(fā)布了全新的Sparkline、新的渲染引擎、升級的項目模板等，歡迎下載最新組件體驗！

DevExpress技術(shù)交流群11：749942875      歡迎一起進(jìn)群討論

全新的Sparkline

DevExpress Blazor全新的Sparkline組件允許您使用緊湊的UI隱喻來顯示價格趨勢，可以使用DevExpress Blazor Sparkline作為一個獨立的組件或嵌入到其他UI控件。Sparkline允許您在根組件級別配置所有系列和點設(shè)置，Sparkline基于屬性值（它定義了系列類型）應(yīng)用相應(yīng)的設(shè)置。除了序列和點設(shè)置之外，您還可以配置工具提示和自定義組件的容器。

Sparkline包括內(nèi)置的導(dǎo)出和打印功能，您可以調(diào)用方法將數(shù)據(jù)導(dǎo)出到文件（PNG、PDF、JPEG或SVG），或者調(diào)用方法來獲取組件的SVG標(biāo)記。

全新的渲染引擎

下面的DevExpress Blazor組件現(xiàn)在使用我們優(yōu)化的渲染引擎（替代Bootstrap）：

• Charts
• Rich Text Editor
• Scheduler
• Pivot Grid
• Upload
• Report Viewer

鍵盤支持

為了解決可訪問性標(biāo)準(zhǔn)并改善用戶體驗，v24.1為以下DevExpress Blazor UI組件添加了鍵盤導(dǎo)航支持：

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

項目模板

.NET 8身份驗證和授權(quán)

針對.NET 8的Blazor項目模板包含一個選項，可以在項目中添加ASP .NET Core身份和基于Token的身份驗證，除了必要的基礎(chǔ)設(shè)施之外，我們的模板還生成了一個由DevExpress Blazor組件提供支持的身份驗證接口。

Grid（網(wǎng)格）

Header Bands

DevExpress Blazor Grid控件現(xiàn)在可以將其列排列成稱為頻帶的邏輯組，每個波段包含自己的標(biāo)題，顯示在列標(biāo)題上方，沒有帶的列橫跨整個帶區(qū)域。網(wǎng)格還支持多級頻帶，其中一個頻帶可以顯示其內(nèi)部的其他頻帶。

雖然最終用戶可以在頻帶內(nèi)重新排序列或?qū)⒘幸苿拥紾roup Panel，但頻帶之間的列移動受到限制。

網(wǎng)格的列選擇器也已更新，來支持Header Bands。它分層顯示頻帶和列，并允許最終用戶切換整個組的可見性，而不僅僅是單個列。

導(dǎo)出服務(wù)器端數(shù)據(jù)

DevExpress Blazor v24.1為任何受支持的服務(wù)器端數(shù)據(jù)/服務(wù)器模式源（GridDevExtremeDataSource或CustomDataSource）引入了Blazor Grid數(shù)據(jù)導(dǎo)出功能，遠(yuǎn)程數(shù)據(jù)支持導(dǎo)出為XLS、XLSX和CSV三種格式。

DevExpress Blazor Grid現(xiàn)在可以從遠(yuǎn)程數(shù)據(jù)源和導(dǎo)出文檔中獲取記錄。在獲取記錄時，網(wǎng)格顯示一個加載指示器。為避免閃爍，該指示燈只在預(yù)估取值時間內(nèi)顯示。

全新的單元格編輯器外觀

DevExpress Blazor Grid的篩選行、編輯行和編輯單元格中的In-place編輯器具有新的改進(jìn)的外觀/感覺，并在需要時自動顯示驗證圖標(biāo)，網(wǎng)格單元格的外觀現(xiàn)在在顯示和編輯模式下都是一致的。

單元格編輯增強(qiáng)

DevExpress Blazor Grid的編輯單元格模式功能現(xiàn)在是正式發(fā)布，包括虛擬滾動支持。它現(xiàn)在附帶了以下增強(qiáng)功能：

• 用戶現(xiàn)在只需單擊一下就可以更改復(fù)選框的值。
• 當(dāng)單元格切換到編輯模式時，網(wǎng)格會自動選擇單元格文本。
• 網(wǎng)格現(xiàn)在在切換到編輯模式時自動更新焦點行。
• 網(wǎng)格的新方法允許您隨時獲取編輯上下文。
• 列文本對齊會影響列內(nèi)顯示的編輯器。

鍵盤導(dǎo)航增強(qiáng)和新標(biāo)簽導(dǎo)航

在v24.1中，DevExpress Blazor Grid提供了增強(qiáng)的鍵盤導(dǎo)航和虛擬滾動支持。Grid組件現(xiàn)在自動激活鍵盤導(dǎo)航和內(nèi)置快捷鍵（注意：項目中刪除KeyboardNavigationEnabled屬性，它現(xiàn)在已經(jīng)過時了）。

無論單元格編輯器的激活狀態(tài)如何，Tab鍵都可以在所有網(wǎng)格單元格之間導(dǎo)航，用戶也可以通過按Ctrl + Up或Ctrl + Down （Mac上是Alt + Up或Alt + Down）離開表格區(qū)域。

此外，新版本改進(jìn)了 事件。在v24.1中，此事件允許您實現(xiàn)自定義操作，來響應(yīng)鼠標(biāo)單擊和用戶在數(shù)據(jù)行有焦點時按Enter鍵。

內(nèi)置值發(fā)布

新版本向EditModelSaving事件參數(shù)添加了以下新方法：CopyChangesToDataItem。此方法允許您復(fù)制在編輯期間對編輯模型所做的所有更改，復(fù)雜的字段值也可以被復(fù)制。

下面的v23.2代碼片段…

C#

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;
}
}

…現(xiàn)在可以用更短的版本替換：

C#

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

支持DateOnly和TimeOnly

在v24.1中，DevExpress Blazor Grid組件支持以下DateOnly和TimeOnly類型：

• 排序
• 過濾
• DateOnly值的分層篩選菜單
• 分組
• 摘要
• 自動生成單元格編輯器
• DateOnly值的間隔分組
• 使用DisplayFormat格式化值
• Excel導(dǎo)出

啟用/禁用Skeletons

當(dāng)虛擬滾動與本地數(shù)據(jù)一起使用時，DevExpress Blazor網(wǎng)格不再默認(rèn)顯示skeletons。由于本地數(shù)據(jù)源中的行通常是快速呈現(xiàn)的，因此這種新操作產(chǎn)生了更流暢的體驗，視覺更新更少。

默認(rèn)情況下，遠(yuǎn)程數(shù)據(jù)源仍然啟用Skeletons（用于從服務(wù)器或數(shù)據(jù)庫加載記錄）。您現(xiàn)在可以使用屬性來控制skeleton操作 - 如果服務(wù)器響應(yīng)時間是可接受的，可以為本地源啟用它，或者為遠(yuǎn)程源禁用它。

懸停時突出顯示行

要在鼠標(biāo)懸停時突出顯示Blazor Grid行，只需啟用我們的新 屬性（突出顯示顏色是基于您的DevExpress驅(qū)動的Blazor應(yīng)用程序中使用的主題）。

更多產(chǎn)品更新咨詢，請