MAUI Shell：如何为TabBar或FlyoutItem添加可点击项？

XAML实现方案 #

1. 绑定命令的ShellContent（无ContentTemplate） #

直接给ShellContent添加点击手势，绑定命令处理逻辑：

<TabBar>
    <ShellContent Route="kitties" Title="Kitties" Icon="cat.png" ContentTemplate="{DataTemplate views:GeneralAnimalPage}" />
    
    <!-- 带点击命令的ShellContent -->
    <ShellContent Title="Press me" Icon="icon.png">
        <ShellContent.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding MyCommand}" />
        </ShellContent.GestureRecognizers>
    </ShellContent>
</TabBar>

2. 带自定义行为的Tab项 #

通过自定义Behavior监听Tab的选中事件，触发命令：

<TabBar xmlns:behaviors="clr-namespace:YourAppNamespace.Behaviors">
    <ShellContent Route="kitties" Title="Kitties" Icon="cat.png" ContentTemplate="{DataTemplate views:GeneralAnimalPage}" />
    
    <!-- 绑定命令的Tab -->
    <Tab Title="Press me" Icon="icon.png">
        <Tab.Behaviors>
            <behaviors:TabTapBehavior Command="{Binding MyCommand}" />
        </Tab.Behaviors>
    </Tab>
</TabBar>

对应的自定义Behavior代码：

using Microsoft.Maui.Controls;
using System.ComponentModel;

namespace YourAppNamespace.Behaviors;

public class TabTapBehavior : Behavior<Tab>
{
    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(TabTapBehavior));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    protected override void OnAttachedTo(Tab bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.PropertyChanged += OnTabPropertyChanged;
    }

    protected override void OnDetachingFrom(Tab bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.PropertyChanged -= OnTabPropertyChanged;
    }

    private void OnTabPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        var tab = sender as Tab;
        if (e.PropertyName == nameof(Tab.IsSelected) && tab?.IsSelected == true 
            && Command != null && Command.CanExecute(null))
        {
            Command.Execute(null);
            // 可选：取消选中，避免停留在该Tab
            tab.IsSelected = false;
        }
    }
}

3. 仅指定路由的ShellContent #

无需ContentTemplate，点击直接导航到注册的路由页面：

<TabBar>
    <ShellContent Route="kitties" Title="Kitties" Icon="cat.png" ContentTemplate="{DataTemplate views:GeneralAnimalPage}" />
    
    <!-- 仅路由的ShellContent -->
    <ShellContent Title="Press me" Icon="icon.png" Route="myroutepage1" />
</TabBar>

需提前在代码中注册路由：

Routing.RegisterRoute("myroutepage1", typeof(MyTargetPage));

代码后台动态添加 #

添加带点击命令的ShellContent到TabBar #

// 获取底部TabBar
var tabBar = Shell.Current.Items.OfType<TabBar>().FirstOrDefault();
if (tabBar == null) return;

// 创建交互项
var actionItem = new ShellContent
{
    Title = "Press me",
    Icon = "icon.png"
};

// 添加点击手势
var tapGesture = new TapGestureRecognizer
{
    Command = new Command(() =>
    {
        // 执行自定义逻辑
        Console.WriteLine("Item clicked!");
        // 或者导航到指定页面
        // await Shell.Current.GoToAsync("myroutepage1");
    })
};
actionItem.GestureRecognizers.Add(tapGesture);

// 添加到TabBar末尾
tabBar.Items.Add(actionItem);

添加带行为的Tab到TabBar #

var tabBar = Shell.Current.Items.OfType<TabBar>().FirstOrDefault();
if (tabBar == null) return;

var actionTab = new Tab
{
    Title = "Press me",
    Icon = "icon.png"
};

// 添加自定义行为
var tabBehavior = new TabTapBehavior
{
    Command = new Command(() =>
    {
        Console.WriteLine("Tab clicked!");
    })
};
actionTab.Behaviors.Add(tabBehavior);

tabBar.Items.Add(actionTab);

添加仅路由的ShellContent #

var tabBar = Shell.Current.Items.OfType<TabBar>().FirstOrDefault();
if (tabBar == null) return;

// 注册路由
Routing.RegisterRoute("myroutepage1", typeof(MyTargetPage));

var routeItem = new ShellContent
{
    Title = "Press me",
    Icon = "icon.png",
    Route = "myroutepage1"
};

tabBar.Items.Add(routeItem);

关键注意事项 #

• 使用Tab项时，若不需要点击后保持选中状态，可在命令执行后设置tab.IsSelected = false
• 确保图标资源已正确添加到项目，符合MAUI的资源管理规范
• 路由导航需提前注册对应页面，否则会抛出导航异常
• 代码后台添加操作建议在Shell初始化完成后执行（如OnAppearing方法中）

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