.NET MAUI TabbedPage 定制所需样式主题

Question

我的期望 我想根据我的需要更改选项卡式页面主题的颜色。

默认标签页主题

我想要的标签页主题

环境 .NET MAUI、C#、.NET 8

我已经尝试过 我尝试在 TabbedPage 中添加以下两个配置

BarBackgroundColor = UIHelper.DarkBackgroundColor;
BarTextColor = Colors.White;

给出了以下结果。但这里选定的选项卡和未选定的选项卡之间没有区别。 我希望选定的选项卡与未选定的选项卡之间有明显的区别。请推荐

Answer 1

按照此结构更改主题

它将指导您如何在.Xaml file中

访问和使用

颜色，它可以在所有平台上访问。

---

定义默认颜色：

Main_1_Color

|

Main_2_Color

|

Main_3_Color

颜色 1：

ThemeDark_Main_1_Color

|

ThemeDark_Main_1_Color

|

 ThemeDark_Main_1_Color

颜色 2：

ThemeLight_Main_1_Color

|

ThemeLight_Main_2_Color

|

 ThemeLight_Main_3_Color

*** 注意：您可以添加更多 [按照颜色 1,2] ***

Colors 3 : ThemeXXX_Main_1_Color | ThemeXXX_Main_2_Color | ThemeXXX_Main_3_Color | ThemeXXX_Main_4_Color ...

---

用途：

<Style TargetType="Label">
    <Setter Property="TextColor" Value="{DynamicResource Main_1_Color}" />
</Style>

OR

 <Border StrokeShape="RoundRectangle 20" BackgroundColor="{StaticResource Main_4_Color}">

---

要更改主题，您可以使用前缀名称作为参数来调用静态函数

UpdateThemeColor("ThemeLight");
UpdateThemeColor("ThemeDark");

---

---

[项目名称]\Resources\Styles\Colors.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Color x:Key="Main_1_Color">#2b2b44</Color>
<Color x:Key="Main_2_Color">#343453</Color>
<Color x:Key="Main_3_Color">#42426a</Color>

<Color x:Key="ThemeDark_Main_1_Color">#2b2b44</Color>
<Color x:Key="ThemeDark_Main_2_Color">#343453</Color>
<Color x:Key="ThemeDark_Main_3_Color">#42426a</Color>

<Color x:Key="ThemeLight_Main_1_Color">#bdb1ae</Color>
<Color x:Key="ThemeLight_Main_2_Color">#F8E1D4</Color>
<Color x:Key="ThemeLight_Main_3_Color">#d2d3db</Color>

</ResourceDictionary>

静态类.cs

#region Themes
public static void UpdateThemeColor(string themeName)
{
    ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;

    if (mergedDictionaries is not null)
    {
        foreach (ResourceDictionary dictionaries in mergedDictionaries)
        {
            var Main_1_Color = dictionaries.TryGetValue(themeName + "_" + "Main_1_Color", out var out_Main_1_Color);
            if (Main_1_Color)
            {
                dictionaries["Main_1_Color"] = out_Main_1_Color;
            }

            var Main_2_Color = dictionaries.TryGetValue(themeName + "_" + "Main_2_Color", out var out_Main_2_Color);
            if (Main_2_Color)
            {
                dictionaries["Main_2_Color"] = out_Main_2_Color;
            }

            var Main_3_Color = dictionaries.TryGetValue(themeName + "_" + "Main_3_Color", out var out_Main_3_Color);
            if (Main_3_Color)
            {
                dictionaries["Main_3_Color"] = out_Main_3_Color;
            }
        }

        Preferences.Default.Set("themeName", themeName);
    }
}
#endregion