I am developing a MAUI mobile application and am struggling to customize the header using the Shell.TitleView. The issue is the persistent padding/margin areas around the TitleView that I cannot seem to modify.
Here are the problems I'm encountering:
iOS: There is extra space on the top and both sides of the TitleView that I cannot remove. The areas marked in red in the first image highlight these problematic spaces.
Android: There is extra space on the left-hand side of the TitleView (marked in red in the second image).
Ignore the red boxes in the TitleView. That was just me blocking out my name.
I have tried setting the following properties in XAML and code-behind, but none of them seem to have any effect:
Padding, Margin, HeightRequest, WidthRequest, HorizontalOptions, VerticalOptions
I also attempted modifying the Shell styles and themes but haven't had any success. I don't even want to move content into the area on iOS, I just want to colorize and in Android, I want to colorize and center everything as it's all shifted right.
Has anyone else experienced this issue? If so, how did you resolve it? Any advice or suggestions would be greatly appreciated!
Attached are the images.
Thank you in advance for your help!
iOS Android
I am developing a MAUI mobile application and am struggling to customize the header using the Shell.TitleView. The issue is the persistent padding/margin areas around the TitleView that I cannot seem to modify.
Here are the problems I'm encountering:
iOS: There is extra space on the top and both sides of the TitleView that I cannot remove. The areas marked in red in the first image highlight these problematic spaces.
Android: There is extra space on the left-hand side of the TitleView (marked in red in the second image).
Ignore the red boxes in the TitleView. That was just me blocking out my name.
I have tried setting the following properties in XAML and code-behind, but none of them seem to have any effect:
Padding, Margin, HeightRequest, WidthRequest, HorizontalOptions, VerticalOptions
I also attempted modifying the Shell styles and themes but haven't had any success. I don't even want to move content into the area on iOS, I just want to colorize and in Android, I want to colorize and center everything as it's all shifted right.
Has anyone else experienced this issue? If so, how did you resolve it? Any advice or suggestions would be greatly appreciated!
Attached are the images.
Thank you in advance for your help!
iOS Android
This is a known issue on the github: [Spec] Shell/NavigationPage TitleView #5063.
And there is a workaround for the Android. Just put the following code in the App class:
public App()
{
InitializeComponent();
Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomNavigationView", (handler, view) =>
{
#if ANDROID
handler.PlatformView.ContentInsetStartWithNavigation = 0;
handler.PlatformView.SetContentInsetsAbsolute(0, 0);
#endif
});
}
There is no workaround for iOS. But you can refer to the pull request: [iOS] Shell/NavigationPage TitleView.