.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,834 questions
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
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>