能否用.NET MAUI/XAML实现指定样式TabBar并支持任意数量标签？

可以仅用XAML实现你要的标签视觉效果：选中标签带三边边框（底部无边）、未选中标签带下划线，同时支持任意数量的标签。下面是具体实现方案：

核心实现思路 #

使用CollectionView实现横向排列的动态标签列表，结合VisualStateManager控制选中/未选中状态的样式，无需后台代码即可完成。

完整XAML代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.YourTabPage">

    <ContentPage.Resources>
        <!-- 标签项样式：统一控制默认和选中状态 -->
        <Style x:Key="TabItemStyle" TargetType="Border">
            <Setter Property="Padding" Value="14,10"/>
            <Setter Property="Margin" Value="6,0"/>
            <Setter Property="Stroke" Value="#999"/>
            <!-- 默认未选中：仅底部边框（下划线） -->
            <Setter Property="StrokeThickness" Value="0,0,0,1"/>
            <Setter Property="BackgroundColor" Value="White"/>
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <!-- 选中状态：显示上、左、右边框，底部无边框 -->
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="StrokeThickness" Value="1,1,1,0"/>
                                <Setter Property="BackgroundColor" Value="#F5F5F5"/>
                            </VisualState.Setters>
                        </VisualState>
                        <!-- 未选中状态：恢复下划线样式 -->
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="StrokeThickness" Value="0,0,0,1"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>

        <!-- 动态标签数据源：支持添加任意数量标签 -->
        <ObservableCollection x:Key="TabItems" x:TypeArguments="x:String">
            <x:String>首页</x:String>
            <x:String>分类</x:String>
            <x:String>我的</x:String>
            <x:String>设置</x:String>
        </ObservableCollection>
    </ContentPage.Resources>

    <StackLayout Padding="16">
        <!-- 横向标签列表 -->
        <CollectionView ItemsSource="{StaticResource TabItems}"
                        SelectionMode="Single"
                        ItemsLayout="HorizontalList">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource TabItemStyle}">
                        <Label Text="{Binding}"
                               FontSize="16"
                               TextColor="#333"/>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <!-- 标签内容区域（可选） -->
        <Frame Margin="0,20,0,0"
               Padding="16"
               CornerRadius="8"
               BackgroundColor="#F5F5F5">
            <Label Text="选中标签对应的内容展示区"
                   FontSize="18"/>
        </Frame>
    </StackLayout>
</ContentPage>

关键细节说明 #

• 动态标签数量：通过ObservableCollection定义标签数据源，你可以在XAML里直接添加/删除<x:String>项来调整标签数量，完全无需后台代码。
• 状态样式控制：VisualStateManager自动识别标签的选中状态，切换对应的边框样式：
  • 未选中时：仅保留底部1px边框作为下划线
  • 选中时：显示上、左、右三边边框，隐藏底部边框，同时修改背景色增强视觉区分
• 横向布局：ItemsLayout="HorizontalList"让标签横向排列，超出屏幕时会自动支持滚动，适配多标签场景。

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