如何使用 AppShell 更改 .net maui 中的选项卡栏颜色

Question

我是 .net maui 的新手，最近我在我的 .net maui 应用程序中添加了 AppShell。现在我想更改选项卡栏的颜色和选项卡图标颜色。

我尝试在 AppShell 文件中添加选项卡栏，这是我迄今为止编写的用于在 AppShell.xaml 文件中实现选项卡栏的代码。

这是我的 AppShell 代码

<?xml version="1.0" encoding="UTF-8" ?>
<Shell x:Class="ECommerceApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ECommerceApp"
       xmlns:pages="clr-namespace:ECommerceApp.Pages"
       Shell.FlyoutBehavior="Disabled">


    <TabBar>
        <Tab Title="Home"
             Icon="home">
            <ShellContent ContentTemplate="{DataTemplate pages:HomePage}" />
        </Tab>
        <Tab Title="Cart"
             Icon="cart">
            <ShellContent ContentTemplate="{DataTemplate pages:CartPage}" />
        </Tab>
        <Tab Title="Favorites"
             Icon="faqvorite">
            <ShellContent ContentTemplate="{DataTemplate pages:FavoritesPage}" />
        </Tab>
        <Tab Title="Settings"
             Icon="settings">
            <ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}" />
        </Tab>
    </TabBar>

</Shell>

Answer 1

要更改 .NET MAUI 应用程序中选项卡栏的颜色和选项卡图标颜色，您可以利用 Shell 类中提供的属性。

       Shell.TabBarBackgroundColor="Black"
       Shell.TabBarTitleColor="White"
       Shell.TabBarUnselectedColor="FloralWhite"

以下是修改 AppShell.xaml 文件以实现此目的的方法：

<Shell x:Class="ECommerceApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ECommerceApp"
       xmlns:pages="clr-namespace:ECommerceApp.Pages"
       Shell.FlyoutBehavior="Disabled"
       Shell.TabBarBackgroundColor="Black"
       Shell.TabBarTitleColor="White"
       Shell.TabBarUnselectedColor="FloralWhite">

通过直接在 Shell 元素中设置这些属性，您可以自定义选项卡栏和选项卡图标的外观，而无需定义其他样式。