.NET MAUI Tab Bar点击Tab打开外部浏览器而非ContentPage实现方案

问题描述 #

我在项目里用MAUI Shell的Tab Bar导航，想实现点击Tab时直接打开外部浏览器。试过先跳转到页面再加载WebView的方式，但这种方式限制太多，满足不了需求。查了不少资料知道Tab Bar本来是用来打开Shell Content（页面内容）的，但想找个技巧实现点击Tab触发命令，调用自定义的打开网页方法，就像Shell Flyout菜单命令那样。

现有XAML代码：

<Tab Title="Water">
      <Tab.Icon>
      <FontImageSource FontFamily="CustomIcons" Glyph="&#xe90b;" Size="Small"/>
      </Tab.Icon>
      <!-- 我希望这里的ContentTemplate能打开URL模板，或者设置命令来调用下面的方法 -->
      <ShellContent ContentTemplate="{DataTemplate views:WaterPage}" />
</Tab>

自定义打开网页方法：

public void OpenWaterWebPage(object sender, EventArgs e)
{
    Uri uri = new Uri("https://www.MadeUpSiteName.co.uk/WaterSports");
    OpenHyperLink(uri);
}

实现方法 #

方法1：直接绑定Tab的Clicked事件 #

MAUI的Tab控件支持Clicked事件，直接把你的自定义方法绑定上去就行，同时需要保留一个空的ShellContent占位（避免Shell报错）。

修改后的XAML：

<Tab Title="Water" Clicked="OpenWaterWebPage">
      <Tab.Icon>
      <FontImageSource FontFamily="CustomIcons" Glyph="&#xe90b;" Size="Small"/>
      </Tab.Icon>
      <!-- 用空白页面占位，也可以直接定义空的ContentTemplate -->
      <ShellContent ContentTemplate="{DataTemplate view:EmptyPage}" />
</Tab>

如果不想单独建EmptyPage，也可以直接写空模板：

<ShellContent>
    <ShellContent.ContentTemplate>
        <DataTemplate>
            <ContentPage />
        </DataTemplate>
    </ShellContent.ContentTemplate>
</ShellContent>

方法2：MVVM模式下绑定命令 #

如果项目用MVVM，可以通过自定义Behavior给Tab绑定命令，替代直接的事件绑定。

第一步：写自定义Behavior

using Microsoft.Maui.Controls;
using System.Windows.Input;

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

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

    protected override void OnAttachedTo(Tab bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.Clicked += OnTabClicked;
    }

    protected override void OnDetachingFrom(Tab bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.Clicked -= OnTabClicked;
    }

    private void OnTabClicked(object sender, EventArgs e)
    {
        Command?.Execute(null);
    }
}

第二步：ViewModel中定义命令

public ICommand OpenWaterWebPageCommand => new Command(() =>
{
    Uri uri = new Uri("https://www.MadeUpSiteName.co.uk/WaterSports");
    // 这里直接用MAUI的Launcher打开外部浏览器就行，不用自定义OpenHyperLink也可以
    Launcher.Default.OpenAsync(uri);
});

第三步：XAML中绑定Behavior

<Tab Title="Water">
      <Tab.Icon>
      <FontImageSource FontFamily="CustomIcons" Glyph="&#xe90b;" Size="Small"/>
      </Tab.Icon>
      <Tab.Behaviors>
          <local:TabCommandBehavior Command="{Binding OpenWaterWebPageCommand}" />
      </Tab.Behaviors>
      <ShellContent ContentTemplate="{DataTemplate view:EmptyPage}" />
</Tab>

注意事项 #

• 必须保留ShellContent：MAUI Shell要求每个Tab至少有一个ShellContent，否则会报错，所以空白模板是必须的。
• 拦截默认导航（可选）：如果不想让Tab点击后触发页面跳转，可以在Clicked事件里加e.Handled = true;（事件参数支持的话），不过一般打开浏览器后用户不会注意到短暂的页面加载，也可以不用处理。
• 跨平台打开浏览器：MAUI自带Launcher.Default.OpenAsync(uri)方法，跨平台都能用，直接替换你自定义的OpenHyperLink就行。

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