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.
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
});