DevExpress .NET MAUI多平臺應用UI組件庫提供了用于Android和iOS移動開發的高性能UI組件，該組件庫包括數據網格、圖表、調度程序、數據編輯器、CollectionView和選項卡組件等。

獲取DevExpress v24.1正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

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

訪問Material Design 3調色板

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

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

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將預定義的主題應用到應用程序中：

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

當您需要使用配色方案的顏色時，可以使用ThemeColor標記擴展根據標記名稱選擇顏色。

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

此外，您可以設置自定義導航欄的背景和前景色(適用于Android操作系統)，狀態欄背景色(適用于Android操作系統)和狀態欄前景色(適用于Android操作系統和iOS操作系統)。

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

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

使用預定義的Material Design樣式

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

當涉及到應用程序外觀時，設計一致性至關重要。如果您在一個解決方案中同時使用標準控件和DevExpress .NET MAUI控件，您可以將我們的顏色主題應用到標準控件中，從而在整個移動項目中引入一致性。

如果創建一個新應用程序，則無需擔心額外的代碼，因為我們在項目模板中為標準控件添加了樣式。如果您已經有了一個應用程序，只需要使用ThemeColor標記擴展來綁定標準控件到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>

總結

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

更多DevExpress線上公開課、中文教程資訊請上中文網獲取