.NET MAUI TabBar子标签图标不显示及Tab项水平居中问题

一、子Tab（User/About）图标不显示的解决 #

在MAUI Shell的嵌套Tab结构中，默认TabBarItem模板不会显示子ShellContent的图标，需自定义样式强制显示图标与标题：

1. 在AppShell.xaml的资源区添加自定义样式：

<Shell.Resources>
    <Style TargetType="TabBarItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid Padding="10" HorizontalOptions="Center">
                        <StackLayout Orientation="Vertical" HorizontalOptions="Center">
                            <Image Source="{TemplateBinding Icon}" 
                                   WidthRequest="24" HeightRequest="24" />
                            <Label Text="{TemplateBinding Title}" 
                                   FontSize="12" HorizontalTextAlignment="Center" />
                        </StackLayout>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Shell.Resources>

2. 确认user.svg和about.svg的构建操作设置为MauiImage（右键文件→属性→构建操作选择MauiImage）。

二、Tab项水平居中的实现 #

在TabBar标签上添加Shell.TabBarHorizontalAlignment="Center"属性即可实现整体居中。

修改后的完整AppShell代码 #

<Shell
    x:Class="MyApp.AppShell"
    x:DataType="viewmodel:AppShellViewModel"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Shell.FlyoutItemIsVisible="False"
    Shell.TabBarIsVisible="True"
    Title="My App">

    <Shell.Resources>
        <Style TargetType="TabBarItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid Padding="10" HorizontalOptions="Center">
                            <StackLayout Orientation="Vertical" HorizontalOptions="Center">
                                <Image Source="{TemplateBinding Icon}" 
                                       WidthRequest="24" HeightRequest="24" />
                                <Label Text="{TemplateBinding Title}" 
                                       FontSize="12" HorizontalTextAlignment="Center" />
                            </StackLayout>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Shell.Resources>

    <TabBar Shell.TabBarHorizontalAlignment="Center">
        <ShellContent
                Title="Start"
                Icon="start.svg"
                Route="Start">
        </ShellContent>

        <Tab Title="Settings" Icon="settings.svg">
            <ShellContent
                Title="User"
                Icon="user.svg"
                Route="User">
            </ShellContent>

            <ShellContent
                Title="About"
                Icon="about.svg"
                Route="About">
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

补充说明 #

• 自定义样式会作用于所有TabBar项，确保父Tab与子Tab的图标、标题都正常显示。
• Shell.TabBarHorizontalAlignment属性控制TabBar整体水平对齐，设置为Center后所有Tab项将居中排列。

内容的提问来源于stack exchange，提问作者Nejox