如何在Shell Tabbar上方添加按钮？

现有代码 #

<Shell>
    <TabBar>
        <Tab Title="Tab1">
            <ShellContent  />
        </Tab>
         <Tab Title="Tab2">
            <ShellContent  />
        </Tab> 
    </TabBar>
</Shell>

需求 #

实现布局：页面内容区域 → 全局按钮 → TabBar（Tab1、Tab2），按钮始终显示在TabBar上方，切换Tab时保持可见。

实现步骤 #

1. 隐藏原生TabBar，自定义底部区域 #

修改Shell结构，隐藏原生TabBar，通过Shell.Footer添加包含按钮和自定义Tab切换按钮的布局：

<Shell TabBarIsVisible="False">
    <!-- 定义Tab路由与页面 -->
    <TabBar>
        <Tab Title="Tab1" Route="Tab1">
            <ShellContent ContentTemplate="{DataTemplate local:Tab1Page}" />
        </Tab>
        <Tab Title="Tab2" Route="Tab2">
            <ShellContent ContentTemplate="{DataTemplate local:Tab2Page}" />
        </Tab>
    </TabBar>

    <!-- 自定义底部区域：按钮 + 自定义TabBar -->
    <Shell.Footer>
        <VerticalStackLayout BackgroundColor="#f8f8f8" Padding="0">
            <!-- 顶部全局按钮 -->
            <Button Text="操作按钮" 
                    HorizontalOptions="Center" 
                    Margin="0,10,0,10"
                    BackgroundColor="#007AFF"
                    TextColor="White"
                    CornerRadius="8"
                    WidthRequest="200" />
            
            <!-- 自定义Tab切换栏 -->
            <Grid BackgroundColor="White" Padding="0,10,0,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!-- Tab1 切换按钮 -->
                <Button Grid.Column="0"
                        Text="Tab1"
                        TextColor="{Binding Source={RelativeSource AncestorType={x:Type Shell}}, Path=CurrentItem.Title, Converter={StaticResource TabColorConverter}, ConverterParameter=Tab1}"
                        BackgroundColor="Transparent"
                        Command="{Binding GoToTab1Command}" />
                
                <!-- Tab2 切换按钮 -->
                <Button Grid.Column="1"
                        Text="Tab2"
                        TextColor="{Binding Source={RelativeSource AncestorType={x:Type Shell}}, Path=CurrentItem.Title, Converter={StaticResource TabColorConverter}, ConverterParameter=Tab2}"
                        BackgroundColor="Transparent"
                        Command="{Binding GoToTab2Command}" />
            </Grid>
        </VerticalStackLayout>
    </Shell.Footer>
</Shell>

2. 添加Tab切换命令 #

在Shell的ViewModel（或代码后台）中添加切换Tab的命令：

public ICommand GoToTab1Command => new Command(async () => await Shell.Current.GoToAsync("//Tab1"));
public ICommand GoToTab2Command => new Command(async () => await Shell.Current.GoToAsync("//Tab2"));

3. 添加Tab选中状态颜色转换器 #

创建转换器实现选中Tab的文字高亮：

public class TabColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var currentTabTitle = value as string;
        var targetTabTitle = parameter as string;
        return currentTabTitle == targetTabTitle ? Color.FromHex("#007AFF") : Color.FromHex("#999999");
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

4. 注册转换器 #

在App.xaml中注册该转换器：

<Application.Resources>
    <ResourceDictionary>
        <local:TabColorConverter x:Key="TabColorConverter" />
    </ResourceDictionary>
</Application.Resources>

这样就能实现你需要的布局效果，按钮会固定显示在Tab切换栏上方，且保持原生Shell的Tab切换逻辑。

内容的提问来源于stack exchange，提问作者Zoltán