DevExpress .NET MAUI多平臺應(yīng)用UI組件庫提供了用于Android和iOS移動(dòng)開發(fā)的高性能UI組件，該組件庫包括數(shù)據(jù)網(wǎng)格、圖表、調(diào)度程序、數(shù)據(jù)編輯器、CollectionView和選項(xiàng)卡組件等。

獲取DevExpress v24.1正式版下載

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

Material Design是一個(gè)由Google開發(fā)的跨平臺指南系統(tǒng)，受物理世界紋理的啟發(fā)，它可以幫助您制作具有平衡色彩和增強(qiáng)可用性的視覺迷人界面(目標(biāo)是將注意力集中在基本的UI元素上)。DevExpress .NET MAUI組件庫包括了10個(gè)內(nèi)置的Material Design 3主題 - 可用于深色和淺色變體，在ThemeColor標(biāo)記擴(kuò)展和項(xiàng)目模板的幫助下，您可以使用DevExpress或標(biāo)準(zhǔn)的.NET MAUI控件輕松地在應(yīng)用程序中支持Material Design 3主題。

訪問Material Design 3調(diào)色板

Material Design 3調(diào)色板是基于給定的種子顏色生成的，從這個(gè)顏色，Material Design 3算法創(chuàng)建六個(gè)調(diào)色板。為了支持深色和淺色應(yīng)用程序外觀，該算法從調(diào)色板中獲取顏色并創(chuàng)建配色方案。Material Design 3確保配色方案顏色有足夠的對比和一致的外觀，要在應(yīng)用程序中使用這些顏色，只需將控件直接綁定到配色方案的顏色。

為了簡化綁定，我們提供了一個(gè)類，此成員允許您基于種子顏色生成新主題并將其應(yīng)用于應(yīng)用程序。對于那些希望基于品牌顏色設(shè)計(jì)應(yīng)用程序的人來說，這個(gè)功能很有價(jià)值。

using DevExpress.Maui;
using DevExpress.Maui.Core;
using Microsoft.Maui.Graphics;

// ...
public static class MauiProgram {
public static MauiApp CreateMauiApp() {
ThemeManager.UseAndroidSystemColor = false;
ThemeManager.Theme = new Theme(Color.FromArgb("FF6200EE"));
var builder = MauiApp.CreateBuilder();
builder
.UseDevExpress()
// ...
.UseMauiApp<App>();
return builder.Build();
}
}

您也可以使用上面提到的API將預(yù)定義的主題應(yīng)用到應(yīng)用程序中：

using DevExpress.Maui;
using DevExpress.Maui.Core;

// ...
public static class MauiProgram {
public static MauiApp CreateMauiApp() {
ThemeManager.UseAndroidSystemColor = false;
ThemeManager.Theme = new Theme(ThemeSeedColor.TealGreen);
var builder = MauiApp.CreateBuilder();
builder
.UseDevExpress()
// ...
.UseMauiApp<App>();
return builder.Build();
}
}

當(dāng)您需要使用配色方案的顏色時(shí)，可以使用ThemeColor標(biāo)記擴(kuò)展根據(jù)標(biāo)記名稱選擇顏色。

為了保持應(yīng)用程序與設(shè)備外觀的一致性，我們還添加了 屬性，它將Android設(shè)備的原色作為種子色，基于它生成一個(gè)新的主題，并將該主題應(yīng)用到應(yīng)用程序中。

此外，您可以設(shè)置自定義導(dǎo)航欄的背景和前景色(適用于Android操作系統(tǒng))，狀態(tài)欄背景色(適用于Android操作系統(tǒng))和狀態(tài)欄前景色(適用于Android操作系統(tǒng)和iOS操作系統(tǒng))。

ThemeManager.Theme = new Theme(ThemeSeedColor.DarkGreen);
ThemeManager.AndroidNavigationBarForeground = AppTheme.Light;

您可以訪問 GitHub倉庫來查看主題引擎。

使用預(yù)定義的Material Design樣式

.NET MAUI控件的默認(rèn)外觀滿足Material Design 3準(zhǔn)則的要求，像Material Design 3一樣，我們的控件支持多種類型：重音、填充、輪廓和文本。

當(dāng)涉及到應(yīng)用程序外觀時(shí)，設(shè)計(jì)一致性至關(guān)重要。如果您在一個(gè)解決方案中同時(shí)使用標(biāo)準(zhǔn)控件和DevExpress .NET MAUI控件，您可以將我們的顏色主題應(yīng)用到標(biāo)準(zhǔn)控件中，從而在整個(gè)移動(dòng)項(xiàng)目中引入一致性。

如果創(chuàng)建一個(gè)新應(yīng)用程序，則無需擔(dān)心額外的代碼，因?yàn)槲覀冊陧?xiàng)目模板中為標(biāo)準(zhǔn)控件添加了樣式。如果您已經(jīng)有了一個(gè)應(yīng)用程序，只需要使用ThemeColor標(biāo)記擴(kuò)展來綁定標(biāo)準(zhǔn)控件到DevExpress .NET MAUI顏色主題。

<VerticalStackLayout BackgroundColor="{dx:ThemeTertiaryColor Light=10, Dark=100}">
<Label Text="Faux Available" TextColor="{dx:ThemeColor OnSurface}"/>
<Button Text="Open File" BackgroundColor="{dx:ThemePrimaryColor Light=40, Dark=80}"/>
</VerticalStackLayout>

總結(jié)

Material Design 3原則幫助您提供具有一致、現(xiàn)代外觀的移動(dòng)解決方案，雖然它包含許多規(guī)則并使用復(fù)雜的顏色計(jì)算算法，但我們的組件和預(yù)定義的項(xiàng)目模板已經(jīng)被設(shè)計(jì)為相對容易地為您的應(yīng)用程序設(shè)計(jì)樣式。

更多DevExpress線上公開課、中文教程資訊請上中文網(wǎng)獲取