如何在.NET MAUI的Shell之上使用Master View实现自定义状态栏？

要让自定义状态栏作为顶层视图置于Shell之上，有两种实用的实现方式：

方法一：用Grid嵌套状态栏与Shell #

直接将自定义状态栏和Shell放在同一个Grid容器中，让状态栏占据顶部行，Shell占据剩余空间，实现状态栏在Shell上方的效果。

步骤1：创建自定义状态栏组件 #

新建CustomStatusBar.xaml，定义状态栏的UI结构：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.CustomStatusBar">
    <Grid BackgroundColor="#2C3E50" HeightRequest="40">
        <!-- 自定义状态栏内容，示例为居中标题 -->
        <Label Text="自定义状态栏" TextColor="White" 
               HorizontalOptions="Center" VerticalOptions="Center"/>
    </Grid>
</ContentView>

步骤2：修改App的主页面设置 #

在App.xaml.cs中，将Grid设为MainPage，把状态栏和Shell加入Grid：

public App()
{
    InitializeComponent();

    var mainGrid = new Grid
    {
        RowDefinitions = 
        {
            new RowDefinition { Height = GridLength.Auto },
            new RowDefinition { Height = GridLength.Star }
        }
    };

    // 添加自定义状态栏到第一行
    mainGrid.Add(new CustomStatusBar(), 0, 0);
    // 添加Shell到第二行
    mainGrid.Add(new AppShell(), 0, 1);

    MainPage = mainGrid;
}

方法二：自定义Shell的ControlTemplate #

将状态栏整合到Shell的模板中，让状态栏成为Shell结构的一部分，更贴合Shell的生命周期。

修改AppShell.xaml的模板 #

在AppShell.xaml中重写Shell的ControlTemplate，嵌入自定义状态栏：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourAppName"
       x:Class="YourAppName.AppShell">

    <Shell.ControlTemplate>
        <ControlTemplate>
            <Grid>
                <!-- 自定义状态栏 -->
                <local:CustomStatusBar Grid.Row="0"/>
                <!-- Shell原生内容区域 -->
                <ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>
            </Grid>
        </ControlTemplate>
    </Shell.ControlTemplate>

    <!-- 你的Shell导航配置 -->
    <FlyoutItem Title="首页">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </FlyoutItem>
</Shell>

平台适配提示 #

针对iOS的刘海屏，需要给状态栏添加顶部内边距避免内容被遮挡，可在CustomStatusBar.xaml.cs中处理：

public CustomStatusBar()
{
    InitializeComponent();

#if IOS
    var safeInsets = Microsoft.Maui.ApplicationModel.Platform.CurrentWindow?.SafeAreaInsets;
    if (safeInsets != null)
    {
        Padding = new Thickness(0, safeInsets.Top, 0, 0);
    }
#endif
}

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