如何在MAUI Shell应用中实现页面导航时始终可见的媒体控制栏？

以下是几个实用的实现方案，针对MAUI Shell场景设计，能保证导航时媒体栏始终可见：

方案一：自定义Shell的ControlTemplate（最推荐） #

MAUI Shell允许通过ControlTemplate自定义整体布局，直接把媒体控制栏嵌入Shell的根布局里，它会和Shell的Flyout、TabBar等部分一起持久存在，完全不受页面导航影响。

实现步骤： #

1. 先定义媒体控制栏MediaControlBar（一个ContentView），包含播放/暂停、进度条等控件，并绑定全局的媒体播放ViewModel（用单例或依赖注入确保状态共享）。
2. 修改Shell的ControlTemplate，把媒体栏放在顶部或底部：

<Shell x:Class="YourApp.MainShell">
    <Shell.ControlTemplate>
        <ControlTemplate>
            <Grid>
                <!-- 顶部媒体栏 -->
                <local:MediaControlBar Grid.Row="0" HeightRequest="60" />
                <!-- Shell的主内容区域 -->
                <ContentPresenter Grid.Row="1" />
                
                <!-- 如果要放在底部，调整布局：
                <ContentPresenter Grid.Row="0" />
                <local:MediaControlBar Grid.Row="1" HeightRequest="60" />
                -->
            </Grid>
        </ControlTemplate>
    </Shell.ControlTemplate>

    <!-- 你的Shell页面路由定义 -->
    <ShellContent ContentTemplate="{DataTemplate local:HomePage}" Route="Home" />
    <ShellContent ContentTemplate="{DataTemplate local:DetailPage}" Route="Detail" />
</Shell>

3. 媒体播放ViewModel用单例模式，确保所有页面和媒体栏共享同一状态：

public class MediaVM : INotifyPropertyChanged
{
    public static MediaVM Instance { get; } = new MediaVM();
    
    private bool _isPlaying;
    public bool IsPlaying
    {
        get => _isPlaying;
        set { _isPlaying = value; OnPropertyChanged(); }
    }

    public void TogglePlay()
    {
        IsPlaying = !IsPlaying;
        // 这里对接实际的媒体播放逻辑
    }

    // INotifyPropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string prop = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
    }
}

4. 在MediaControlBar里绑定这个ViewModel：

<ContentView x:Class="YourApp.MediaControlBar">
    <Grid BackgroundColor="#333" Padding="10">
        <Button Text="{Binding IsPlaying, Converter={StaticResource BoolToPlayPauseConv}}"
                Command="{Binding TogglePlayCommand}" />
        <!-- 进度条、上一曲/下一曲按钮等 -->
    </Grid>
</ContentView>

方案二：全局Grid布局嵌套Shell #

把Shell和媒体控制栏放在同一个全局Grid里，媒体栏占顶部或底部的固定行，Shell占剩余空间。这种方式不需要修改Shell的模板，适合不想改动Shell原有结构的场景。

实现步骤： #

1. 修改App.xaml的主页面布局：

<Application x:Class="YourApp.App">
    <Application.MainPage>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" /> <!-- 媒体栏高度自适应 -->
                <RowDefinition Height="*" /> <!-- Shell占满剩余空间 -->
            </Grid>
            <!-- 顶部媒体栏 -->
            <local:MediaControlBar Grid.Row="0" />
            <!-- Shell容器 -->
            <local:MainShell Grid.Row="1" />
            
            <!-- 底部布局的话，RowDefinitions改为：
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            然后MediaControlBar放在Grid.Row="1" -->
        </Grid>
    </Application.MainPage>
</Application>

2. 调整Shell的内边距，避免页面内容被媒体栏遮挡：
   在MainShell的构造函数里设置：

public MainShell()
{
    InitializeComponent();
    // 顶部媒体栏的话，设置TopPadding等于媒体栏高度
    TopPadding = 60;
    // 底部的话设置BottomPadding = 60;
}

方案三：导航时动态添加媒体栏（不推荐） #

监听Shell的导航事件，在每次页面导航完成后，把媒体栏添加到当前页面的布局中。这种方式容易出现闪烁或布局冲突，仅作为备选方案：

public MainShell()
{
    InitializeComponent();
    Navigated += OnShellNavigated;
}

private void OnShellNavigated(object sender, ShellNavigatedEventArgs e)
{
    if (e.CurrentPage is ContentPage page && page.Content is Grid pageGrid)
    {
        // 避免重复添加
        if (pageGrid.Children.All(c => c.GetType() != typeof(MediaControlBar)))
        {
            var mediaBar = new MediaControlBar();
            pageGrid.Children.Add(mediaBar);
            Grid.SetRow(mediaBar, 0);
            
            // 调整页面内容的Margin，防止被遮挡
            foreach (var child in pageGrid.Children)
            {
                if (child != mediaBar)
                {
                    child.Margin = new Thickness(0, 60, 0, 0);
                }
            }
        }
    }
}

总结 #

优先选方案一，它完全贴合MAUI Shell的设计模式，代码结构清晰，状态管理也更简单；方案二适合快速改造现有项目；方案三尽量不用，容易踩坑。

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