.NET MAUI移动端：如何让两个顶部TabBar项填充水平空间？

针对你提出的两个Tab项（Read和Taglists）靠左对齐，需要均匀填充整个TabBar宽度的需求，可以通过自定义Tab的HeaderTemplate来实现，无需依赖平台特定渲染器，跨平台兼容。

实现步骤 #

1. 为Tab添加自定义HeaderTemplate，使用HorizontalStackLayout作为容器，设置Spacing=0确保Tab项无缝衔接。
2. 用Button替代默认的Tab项，设置HorizontalOptions=FillAndExpand让每个Button自动填充可用空间。
3. 绑定Button的点击命令到Shell的切换逻辑，同时通过IsChecked绑定ShellContent的激活状态，实现选中样式的切换。

修改后的完整XAML代码 #

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="NFC-Toolkit">
        <!-- 自定义顶部Tab栏布局 -->
        <Tab.HeaderTemplate>
            <DataTemplate>
                <HorizontalStackLayout Spacing="0" HorizontalOptions="Fill">
                    <Button 
                        Text="Read"
                        Command="{Binding Source={RelativeSource AncestorType={x:Type Shell}}, Path=CurrentItem}"
                        CommandParameter="{x:Reference readShellContent}"
                        HorizontalOptions="FillAndExpand"
                        Style="{StaticResource TabButtonStyle}"
                        IsChecked="{Binding Source={x:Reference readShellContent}, Path=IsActive, Mode=TwoWay}"/>
                    <Button 
                        Text="Taglists"
                        Command="{Binding Source={RelativeSource AncestorType={x:Type Shell}}, Path=CurrentItem}"
                        CommandParameter="{x:Reference tagListsShellContent}"
                        HorizontalOptions="FillAndExpand"
                        Style="{StaticResource TabButtonStyle}"
                        IsChecked="{Binding Source={x:Reference tagListsShellContent}, Path=IsActive, Mode=TwoWay}"/>
                </HorizontalStackLayout>
            </DataTemplate>
        </Tab.HeaderTemplate>

        <ShellContent x:Name="readShellContent"
            Title="Read" 
            Route="Read"
            ContentTemplate="{DataTemplate view:ReadPage}"/>
        <ShellContent x:Name="tagListsShellContent"
            Title="Taglists" 
            Route="TagLists"
            ContentTemplate="{DataTemplate view:TagListPage}"/>       
    </Tab>
</FlyoutItem>

添加Tab项样式资源 #

在App.xaml或当前页面的资源中定义Tab按钮的样式，处理选中与未选中状态的视觉差异：

<Style x:Key="TabButtonStyle" TargetType="Button">
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="TextColor" Value="#666666"/>
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="BorderWidth" Value="0"/>
    <Setter Property="Padding" Value="10,5"/>
    <!-- 选中状态触发样式变化 -->
    <Style.Triggers>
        <Trigger TargetType="Button" Property="IsChecked" Value="True">
            <Setter Property="TextColor" Value="#007AFF"/>
            <Setter Property="BackgroundColor" Value="#F0F0F0"/>
        </Trigger>
    </Style.Triggers>
</Style>

说明 #

• 自定义HeaderTemplate完全替代了Shell默认的Tab栏布局，确保两个Tab项均匀占据整个水平空间。
• 通过绑定Command和IsChecked，保留了Shell原生的页面切换逻辑和状态同步。
• 样式可根据需求自由调整，比如修改文字大小、选中背景色等。

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