如何在.NET Maui Shell布局中实现Tabs上方的全局固定视图？

在.NET Maui Shell布局下，要在Tabs上方、所有页面底部展示全局持久视图（类似Spotify播放器），且无需重复编写代码，最简洁可靠的方式是自定义Shell的视觉结构，将TabBar与持久视图封装在垂直布局中，具体步骤如下：

1. 先定义可复用的持久视图组件 #

创建一个独立的ContentView（比如命名为PersistentPlayerView），把你需要的播放器/通用视图逻辑写在这里：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.PersistentPlayerView">
    <Frame BackgroundColor="#1a1a1a" HeightRequest="60" CornerRadius="0" Margin="0">
        <HorizontalStackLayout Padding="10" VerticalOptions="Center">
            <Image Source="album_cover.png" WidthRequest="45" HeightRequest="45" Aspect="AspectFill" />
            <Label Text="正在播放：示例歌曲" TextColor="White" Margin="12,0" VerticalOptions="Center" />
            <Button Text="▶" TextColor="White" BackgroundColor="Transparent" Margin="0,0,10,0" />
        </HorizontalStackLayout>
    </Frame>
</ContentView>

2. 修改Shell的布局结构 #

将原有的TabBar和持久视图放在VerticalStackLayout中作为Shell的直接子元素，这样视图会固定在TabBar上方，全局生效且不破坏Shell的导航逻辑：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:page="clr-namespace:YourApp.Pages"
       xmlns:view="clr-namespace:YourApp.Views"
       x:Class="YourApp.AppShell">

    <VerticalStackLayout Spacing="0">
        <!-- 隐藏的ShellContent用于初始化Shell导航逻辑，避免布局异常 -->
        <ShellContent ContentTemplate="{DataTemplate page:Home}" IsVisible="False" />
        
        <!-- 全局持久视图 -->
        <view:PersistentPlayerView />
        
        <!-- 原有TabBar -->
        <TabBar>
            <Tab Title="Home" Icon="home.png">
                <ShellContent ContentTemplate="{DataTemplate page:Home}" />
            </Tab>
            <Tab Title="Other" Icon="other.png">
                <ShellContent ContentTemplate="{DataTemplate page:Other}" />
            </Tab>
        </TabBar>
    </VerticalStackLayout>

</Shell>

3. 动态控制视图显示（可选） #

如果需要根据业务逻辑隐藏/显示这个视图，可以给PersistentPlayerView添加绑定属性：

public partial class PersistentPlayerView : ContentView
{
    public static readonly BindableProperty IsViewVisibleProperty =
        BindableProperty.Create(nameof(IsViewVisible), typeof(bool), typeof(PersistentPlayerView), true);

    public bool IsViewVisible
    {
        get => (bool)GetValue(IsViewVisibleProperty);
        set => SetValue(IsViewVisibleProperty, value);
    }

    public PersistentPlayerView()
    {
        InitializeComponent();
    }
}

之后在Shell中绑定到全局ViewModel的属性即可：

<view:PersistentPlayerView IsViewVisible="{Binding IsPlayerActive}" />

方案优势 #

• 无重复代码：只需定义一次视图，所有页面自动继承显示，无需逐个页面添加。
• 兼容Shell原有功能：不会干扰Tab导航、路由跳转等Shell核心逻辑。
• 扩展性强：视图的交互、样式可以独立维护，轻松适配不同业务场景。

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