How to disable unnecessary space on left side of Shell.TitleView?

Question

Below is my AppShell.xaml page:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiAppTest.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiAppTest"
    Title="MauiAppTest"
    FlyoutBehavior="Disabled"
    FlyoutItem.IsVisible="False">
    <Shell.TitleView>
        <Grid BackgroundColor="Red">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Image
                Grid.Column="0"
                Margin="0,0,0,0"
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="app_icon.png"
                VerticalOptions="Center" />
        </Grid>
    </Shell.TitleView>


    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
</Shell>

Below is an image of the AppShell when the application is running (coloured in red):
Image of running application Shell.TitleView

In the image there is a small black space to the left of the TitleView. I don't want this to be there and have no idea why it is there.

I've tried disabling the FlyoutItem and FlyoutBehaviour, but to no avail. I can't find anywhere that could be causing this extra space to the left.

A crude workaround to this that I've attempted is setting the margin of the app logo to negative to properly center it, but it will be mis-aligned when on other pages show the back button.

I want to know if there's a way to hide that extra space, or properly center the image and disguise that section to avoid alignment issues when pages show the back button.

Answer 1

The little extra space on left side of the TitleView is related with [iOS] Shell/NavigationPage TitleView #20959 and [Spec] Shell/NavigationPage TitleView #5063 and it could be fixed in .NET 9 with the release of subsequent versions.

As an alternative workaround, you can fix it by adding the code below in your MauiProgram.cs if you are targeting Android platform:

Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomNavigationView", (handler, view) =>
{
#if ANDROID
        handler.PlatformView.ContentInsetStartWithNavigation = 0;
        handler.PlatformView.SetContentInsetsAbsolute(0, 0);
#endif
});