XAML/MAUI - How to remove the one-pixel high horizontal line ?

Question

XAML/MAUI - How to remove the one-pixel high horizontal line ?

Dave Stone 25

Whilst a long term C# developer I've just started on my journey into Maui to build a mobile app across Android and iOS. To get a feel for the presentation layer and behaviour, before writing any functional code, and using the iOS simulator, I started with AppShell.xaml that looked like this..

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Milkshake_v2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Milkshake_v2"
    xmlns:pages="clr-namespace:Milkshake_v2.Pages"
    Title="Milkshake_v2"
    BackgroundColor="LightPink">
    <TabBar>
        <ShellContent Title="Home" Icon="house.png" ContentTemplate="{DataTemplate pages:Home}"/>
        <ShellContent Title="Menu" Icon="cupsoda.png" ContentTemplate="{DataTemplate pages:Home}"/>
        <ShellContent Title="Rewards" Icon="award.png" ContentTemplate="{DataTemplate pages:Home}"/>
        <ShellContent Title="Profile" Icon="user.png" ContentTemplate="{DataTemplate pages:Home}"/>
    </TabBar>
</Shell>

and my Home.xaml page looked like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Milkshake_v2.Pages.Home" 
             BackgroundColor="lightpink"
             SafeAreaEdges="None"
             Title="Home">
</ContentPage>

and the result on the iOS simulator is this:

User's image

where I have a 1-pixel high dark horizontal line. Initially I thought it was grey, but it seems to be the darker colour of whatever BackgroundColor I choose so in this instance it's a darker pink. I's not present in the Android instance. Ultimately, I'm trying to create this (without the horizontal line).

User's image

(note - I haven't got as far as running it up on a physical device yet)

Q: How do I remove this horizontal line ?

Dave Stone 25 Reputation points

2026-01-27T14:50:17.3733333+00:00

I've finally found a workaround... which is to set the BackgroundColor of the Shell to "Transparent".. not even sure why I set it in the first place.. and then the colour of the screen is dependent on the ShellContent/ContentPage setting. I'm still not sure why this is the solution, so would welcome an explanation or a pointer to a resource that explains the basics. Many thanks.

Answer accepted by question author

0 additional answers

Your answer

Dave Stone 25 Reputation points

2026-01-27T14:50:17.3733333+00:00

I've finally found a workaround... which is to set the BackgroundColor of the Shell to "Transparent".. not even sure why I set it in the first place.. and then the colour of the screen is dependent on the ShellContent/ContentPage setting. I'm still not sure why this is the solution, so would welcome an explanation or a pointer to a resource that explains the basics. Many thanks.

Answer 1

Hi @Dave Stone ,

Thanks for reaching out, and thanks for coming back to share what you found.

What you were seeing on iOS isn’t a random rendering glitch. It’s a Shell-specific UI artifact.

When you set a BackgroundColor on the Shell, iOS renders a native container view behind the content (think navigation/tab infrastructure). On iOS, that container includes a very thin separator / edge line between the Shell chrome and the page content. Because of how iOS blends colors, that line often appears as a slightly darker shade of whatever background color you chose which is why it looked like a darker pink and changed color with different themes.

By setting:

<Shell BackgroundColor="Transparent">

you’re essentially telling MAUI:

“Don’t paint the Shell’s background at all, let the page handle it.”

Once the Shell background is transparent, the ContentPage’s BackgroundColor becomes the only visible background, and the iOS container no longer draws that separator line.

A good rule of thumb going forward:

Use Shell.BackgroundColor only when you want to style the Shell chrome itself
Use ContentPage.BackgroundColor for full-screen page visuals
If you want a seamless layout on iOS, keeping the Shell background Transparent is often the safest option

Hope this helps! If my explanation was helpful - kindly follow the instructions here so others with the same problem can benefit as well.

Dave Stone 25 Reputation points

2026-01-28T10:54:50.0166667+00:00

@Jack Dang (WICLOUD CORPORATION) thank you so much for your detailed explanation, that's really helped me understand more about MAUI and Shell.
Jack Dang (WICLOUD CORPORATION) 18,720 Reputation points Microsoft External Staff Moderator

2026-01-28T11:06:15.75+00:00

Hi @Dave Stone ,

Thanks for your feedback.

If you have more questions in the future, feel free to post them on this platform and I'm happy to support you. Thank you!

Share via

XAML/MAUI - How to remove the one-pixel high horizontal line ?

0 additional answers

Your answer