.NET MAUI应用ActionBar上方出现空白，求移除方法

云原生阿岚

2026-7-7

.NET MAUI ActionBar上方多余空白移除方案

使用.NET MAUI创建的应用中，ActionBar（Shell导航栏）上方出现了一块多余的空白区域，以下是当前应用的核心布局代码，需找到成因并移除该空白。

核心代码

App.xaml

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:xxxxxx"
             x:Class="xxxxx.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

AppShell.xaml

<Shell
    x:Class="equinovet_2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:xxxxx.Pages"
    FlyoutBackground="{StaticResource gradientxxxxx}"
    Shell.FlyoutBehavior="Flyout">

    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid ColumnSpacing="20">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".25*" />
                    <ColumnDefinition Width=".75*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <StackLayout
                    Grid.Column="0"
                    Padding="0,50,0,50"
                    HorizontalOptions="End"
                    VerticalOptions="Center">
                    <Image
                        HorizontalOptions="End"
                        MaximumHeightRequest="40"
                        Source="ic_horse.png" />
                </StackLayout>
                <StackLayout
                    Grid.Column="1"
                    Padding="0,50,0,50"
                    HorizontalOptions="Start"
                    VerticalOptions="Center">
                    <Image
                        HorizontalOptions="Start"
                        MaximumHeightRequest="30"
                        Source="logo.png" />
                    <Label
                        FontSize="16"
                        Text="Médico Veterinário"
                        TextColor="white" />
                </StackLayout>
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.25*,.75*">
                <Image
                    Margin="15,15,15,15"
                    HeightRequest="25"
                    Source="{Binding FlyoutIcon}" />
                <Label
                    Grid.Column="1"
                    FontAttributes="Bold"
                    Text="{Binding Title}"
                    TextColor="white"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Meu Perfil"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_colaboradores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Início"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_home.png"
            Route="MainPage" />

        <ShellContent
            Title="Procedimentos"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_procedimentos.png"
            Route="MainPage" />

        <ShellContent
            Title="Animais"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_animais.png"
            Route="MainPage" />

        <ShellContent
            Title="Proprietários"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_colaboradores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Controle Folicular"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_folicular.png"
            Route="MainPage" />

        <ShellContent
            Title="Reprodução"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_reproducao.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Serviços"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_services.png"
            Route="MainPage" />

        <ShellContent
            Title="Estoque"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_storage.png"
            Route="MainPage" />

        <ShellContent
            Title="Fornecedores"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_fornecedores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Financeiro"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_financeiro.png"
            Route="MainPage" />

        <ShellContent
            Title="Relatórios Financeiros"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_chart.png"
            Route="MainPage" />

        <ShellContent
            Title="Relatórios de Serviços"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_folicular.png"
            Route="MainPage" />

        <ShellContent
            Title="Agenda"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_calendar.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Catálogo de Exames"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_exames.png"
            Route="MainPage" />

        <ShellContent
            Title="Colaboradores"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_colaboradores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Configurações"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_config.png"
            Route="MainPage" />
        <ShellContent
            Title="Sincronização"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_sync.png"
            Route="MainPage" />

    </FlyoutItem>

</Shell>

MainPage.xaml

<ContentPage
    x:Class="xxxxx.Pages.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Início"
    Background="gray">
    <Label Text="teste" />
</ContentPage>

Styles.xaml（新增内容）

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Shadow
        x:Key="shadow"
        Brush="black"
        Opacity="0.3"
        Radius="15"
        Offset="0,15" />

    <Style Class="FrameBorder" TargetType="Frame">
        <Setter Property="HeightRequest" Value="50" />
        <Setter Property="Padding" Value="10,5" />
        <Setter Property="BorderColor" Value="{StaticResource Gray300}" />
    </Style>
</ResourceDictionary>

解决方案

ActionBar上方的空白通常由Shell默认内边距、系统状态栏适配设置或ContentPage内边距导致，按以下步骤排查：

移除Shell默认顶部内边距
在AppShell.xaml的Shell标签中添加Padding="0"，精准清除顶部空白：
```
<Shell
    ...
    Padding="0,0,0,0">
```
禁用导航栏阴影与统一状态栏颜色
在AppShell.xaml中添加属性，消除视觉上的空白分隔感：
```
<Shell
    ...
    Shell.NavBarHasShadow="False"
    Shell.StatusBarColor="{StaticResource Primary}">
```
清除ContentPage顶部内边距
在MainPage.xaml中确保页面没有额外顶部内边距：
```
<ContentPage
    ...
    Padding="0">
```

Android平台特殊处理
若问题仅出现在Android，在Platforms/Android/MainActivity.cs中调整状态栏设置，让内容延伸至状态栏区域：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Window.SetFlags(WindowManagerFlags.LayoutNoLimits, WindowManagerFlags.LayoutNoLimits);
}

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

.NET MAUI应用ActionBar上方出现空白，求移除方法

核心代码 #

App.xaml #

AppShell.xaml #

MainPage.xaml #

Styles.xaml（新增内容） #