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

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

DevExpress技術交流群11：749942875      歡迎一起進群討論

全新的Sparkline

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

Sparkline包括內置的導出和打印功能，您可以調用方法將數據導出到文件（PNG、PDF、JPEG或SVG），或者調用方法來獲取組件的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的編輯單元格模式功能現在是正式發布，包括虛擬滾動支持。它現在附帶了以下增強功能：

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

鍵盤導航增強和新標簽導航

在v24.1中，DevExpress Blazor Grid提供了增強的鍵盤導航和虛擬滾動支持。Grid組件現在自動激活鍵盤導航和內置快捷鍵（注意：項目中刪除KeyboardNavigationEnabled屬性，它現在已經過時了）。

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

此外，新版本改進了 事件。在v24.1中，此事件允許您實現自定義操作，來響應鼠標單擊和用戶在數據行有焦點時按Enter鍵。

內置值發布

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

下面的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;
}
}

…現在可以用更短的版本替換：

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導出

啟用/禁用Skeletons

當虛擬滾動與本地數據一起使用時，DevExpress Blazor網格不再默認顯示skeletons。由于本地數據源中的行通常是快速呈現的，因此這種新操作產生了更流暢的體驗，視覺更新更少。

默認情況下，遠程數據源仍然啟用Skeletons（用于從服務器或數據庫加載記錄）。您現在可以使用屬性來控制skeleton操作 - 如果服務器響應時間是可接受的，可以為本地源啟用它，或者為遠程源禁用它。

懸停時突出顯示行

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

更多產品更新咨詢，請