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

DevExpress Blazor控件目前已經(jīng)升級(jí)到v24.1版本了，此版本發(fā)布了全新的PDF查看器、地圖、雷達(dá)坐標(biāo)圖等，歡迎下載最新組件體驗(yàn)！

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

全新的PDF Viewer (CTP)

全新的DevExpress Blazor PDF Viewer組件可以直接在DevExpress驅(qū)動(dòng)的Blazor應(yīng)用程序中顯示PDF文件內(nèi)容，該組件允許您瀏覽文檔、設(shè)置縮放級(jí)別、打印和下載文檔。此外，CTP版本的Blazor PDF Viewer包括單頁(yè)預(yù)覽和工具欄自定義選項(xiàng)（如重新排列、分組、隱藏和添加項(xiàng)目）。

全新的Map（地圖）

DevExpress Blazor Map組件可以在DevExpress驅(qū)動(dòng)的Blazor web應(yīng)用程序中顯示帶有標(biāo)記和路線信息的地理地圖，該組件從GIS服務(wù)（Bing、Google或GoogleStatic - 需要應(yīng)用程序使用適當(dāng)?shù)腁PI密鑰進(jìn)行認(rèn)證）中檢索相關(guān)數(shù)據(jù)，并附帶以下功能：

• 標(biāo)記/路由配置和自定義選項(xiàng)。
• 內(nèi)置地圖導(dǎo)航和類(lèi)型控制。
• 手動(dòng)調(diào)整地圖（設(shè)置縮放和MapCenter）。
• 地圖和標(biāo)記"click" 支持。

全新的雷達(dá)圖表

DevExpress Polar Chart for Blazor組件允許您在極坐標(biāo)系內(nèi)可視化數(shù)據(jù) - 平面上的每個(gè)點(diǎn)由與中心的距離和與固定方向的角度確定，DevExpress Blazor Polar Chart組件具有以下功能：

• 多種系列類(lèi)型：直線、區(qū)域、條形、堆疊條形、散點(diǎn)。
• 連續(xù)、離散和對(duì)數(shù)軸值支持。
• 蜘蛛網(wǎng)模式。
• 圖表元素自定義：標(biāo)簽、工具提示、圖例等。

全新的日期范圍選擇器

DevExpress Date Range Picker for Blazor允許您在單個(gè)日歷下拉菜單中選擇日期范圍，該組件具有以下集成功能：

• 最小和最大日期
• 特殊日期突出顯示
• 選定日期格式API
• 輸入驗(yàn)證
• 清晰的按鈕
• 可空日期支持和占位符
• 自動(dòng)支持瀏覽器時(shí)區(qū)和本地化

全新的下拉框

DevExpress Blazor DropDown Box（下拉框）是一個(gè)可自定義的編輯器 - 設(shè)計(jì)用于在其下拉窗口內(nèi)顯示/使用各種UI元素：從簡(jiǎn)單的列表和樹(shù)、到網(wǎng)格或其中的任何組合，您可以基于頁(yè)面交互以編程方式分配編輯器值。

下面的代碼片段將DevExpress Blazor網(wǎng)格添加到彈出的下拉框中。

Razor

<DxDropDownBox Value="Value" QueryDisplayText="QueryText">
<DropDownBodyTemplate>
<DxGrid Data="@GridData" ShowSearchBox="true" SelectedDataItem="@Value"
SelectedDataItemChanged="item => GridSelectedDataItemChanged(item, context.DropDownBox)" .../>
</DropDownBodyTemplate>
</DxDropDownBox>

@code {
Customer Value { get; set; }
IEnumerable<object> GridData { get; set; }

string QueryText(DropDownBoxQueryDisplayTextContext arg) {
if(arg.Value is Customer value)
return value.ContactName;
return string.Empty;
}
void GridSelectedDataItemChanged(object item, IDropDownBox dropDownBox) {
Value = item as Customer;
dropDownBox.HideDropDown();
}
}

下拉框的值不限于單個(gè)對(duì)象，它可以是對(duì)象的集合（對(duì)于那些希望實(shí)現(xiàn)多選擇編輯器的人）：

或者甚至是根據(jù)用戶在彈出框內(nèi)的選擇生成的復(fù)合數(shù)據(jù)項(xiàng)：

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