How to Remove the Gray Line Between FlyoutItem and ShellContent in .NET MAUI Shell

Question

I am working on a .NET MAUI Shell application and have noticed an issue where there is an unwanted gray line appearing between the FlyoutItem and the ShellContent. This line appears when navigating between the FlyoutItem and the ShellContent in my app's navigation.

Below is the relevant code for my Shell layout:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="LeaveMatrix.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:LeaveMatrix"
    xmlns:views="clr-namespace:LeaveMatrix.Views"    
    Title="LeaveMatrix" 
    Shell.BackgroundColor="#00AFB9" 
    Shell.ForegroundColor="White">
    
    <Shell.ToolbarItems>
        <ToolbarItem IconImageSource="bell.png"/>
        <ToolbarItem IconImageSource="settings.png" />
    </Shell.ToolbarItems>
    <!-- Flyout Header -->
    <Shell.FlyoutHeader>
        <Grid BackgroundColor="#00AFB9" Padding="20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!-- User Logo -->
            <Image
                Source="user.png" 
                WidthRequest="50"
                HeightRequest="50"
                VerticalOptions="Center"
                HorizontalOptions="Start" />
            <!-- User Name -->
            <Label
                Grid.Column="1"
                Text="Welcome, User Name"
                FontSize="18"
                VerticalOptions="Center"
                HorizontalOptions="Start"
                TextColor="White"
                Margin="10,0,0,0" />
        </Grid>
    </Shell.FlyoutHeader>
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="Main" FlyoutItemIsVisible="False"  />
    <ShellContent ContentTemplate="{DataTemplate views:LoginPage}" Route="Login" FlyoutItemIsVisible="False"/>
    <FlyoutItem Title="Home" Route="Home" FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Home" Icon="{OnPlatform 'home.png'}">
            <ShellContent ContentTemplate="{DataTemplate views:HomePage}" />
        </Tab>
        <Tab Title="Apply Leave" Icon="{OnPlatform 'add.png'}">
            <ShellContent ContentTemplate="{DataTemplate views:ApplyLeavePage}" />
        </Tab>
        <Tab Title="Leave Status" Icon="{OnPlatform 'status.png'}">
            <ShellContent ContentTemplate="{DataTemplate views:LeaveStatusPage}" />
        </Tab>
    </FlyoutItem>
    <!--<MenuItem Text="Sign Out" IconImageSource="{OnPlatform 'settings.png'}" />-->
    <ShellContent Title="Sign Out" Icon="{OnPlatform 'settings.png'}" />
    <!-- Flyout Footer -->
    <Shell.FlyoutFooter>
        <Grid BackgroundColor="#00AFB9" Padding="10">
            <Label
                Text="2025© Arnab Mukherjee"
                FontSize="Medium"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                TextColor="White" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>

Answer 1

Hello,

How to Remove the Gray Line Between FlyoutItem and ShellContent in .NET MAUI Shell

If you set the FlyoutDisplayOptions="AsSingleItem", this gray line will disappear.

However, Only "Home" item will appear in the FlyoutItem. If you want to keep the AsMultipleItems and remove this grey line,

Please do not use ShellContent as your sign out function like following code. When you click the sign out item. You will get System.InvalidOperationException: 'No Content found for ShellContent, Title:, Route D_FAULT_ShellContent15'

<ShellContent Title="Sign Out" Icon="{OnPlatform 'settings.png'}" />

Based on your code, sign out function do not have a ContentPage. You can move sign out function in the Shell.FlyoutFooter or Shell.FlyoutHeader. I move it to the Shell.FlyoutHeader and use a Button to implement it.

<Shell.FlyoutHeader>
  <StackLayout>
        <Grid BackgroundColor="#00AFB9" Padding="20">
....
 
         </Grid>
     <Button Text="logout" Clicked="Button_Clicked"></Button>
  </StackLayout>
</Shell.FlyoutHeader>

You can handle the sign out operation in the shell background code.

public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
 
        private void Button_Clicked(object sender, EventArgs e)
        {
            //close the flyout page and handle your logout operation.
            Shell.Current.FlyoutIsPresented = false;
        }
    }

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.