On Android it's possible to set contentInsetLeft, contentInsetStart, contentInsetStartWithNavigation.
But I don't know how to do this in .NET MAUI.
If you use the default MAUI app template, then you're using Shell and that allows you to set a custom TitleView:
<?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"
xmlns:views="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyApp.Views.MyPage"
Title="MyPage">
<Shell.TitleView>
<Grid>
<Label
Text="Hello"
HorizontalOptions="Start"
VerticalOptions="Center"
BackgroundColor="Orange"
TextColor="White"
FontSize="Title" />
</Grid>
</Shell.TitleView>
<!-- .. -->
</ContentPage>
This allows you to fully customize the TitleView, add buttons to it, change the font, size and color and so on.
It's not possible to change the spacing between the Title and the Menu icon without a mapper/handler or custom renderer.
You can append the following to the mapper of the Toolbar somewhere in your code, for example in your MauiProgram.cs:
Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomNavigationView", (handler, view) =>
{
#if ANDROID
handler.PlatformView.ContentInsetStartWithNavigation = 0;
#endif
});
Before the change:
After the change:
It's also possible to change the burger menu icon color, but that's already covered in other questions:
How to get the default shell flyout icon to react when android dark theme is switched on/off
How do you change the color of the burger bar in maui when using shell
I have a working solution for this here, you could use Shell renderer but it feels too annoying to me personally
A base content page for the template: https://github.com/FreakyAli/Maui.FreakyEffects/blob/dev/Maui.FreakyEffects/Samples/FreakyBaseContentPage.xaml
And its application :
For people who would like the code directly:
Create a template:
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="HeaderControlTemplate">
<AbsoluteLayout>
<Grid
BackgroundColor="{TemplateBinding Parent.NavBarBackgroundColor}"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
RowSpacing="0"
ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="7*" />
<RowDefinition Height="93*" />
</Grid.RowDefinitions>
<Border
Grid.Row="0"
Grid.Column="0"
Margin="15,0,0,0"
StrokeThickness="0"
IsVisible="{TemplateBinding Parent.IsBackButtonVisible}"
BackgroundColor="{StaticResource Tertiary}"
VerticalOptions="Center"
HorizontalOptions="Start"
HeightRequest="30"
WidthRequest="30">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{TemplateBinding Parent.BackButtonCommand}"/>
</Border.GestureRecognizers>
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<controls:FreakySvgImageView
InputTransparent="True"
ResourceId="{x:Static constants:Constants.BackButton}"
SvgAssembly="{x:Static constants:Constants.SvgAssembly}"
ImageColor="White"
SvgMode="AspectFit" />
</Border>
<Label
Grid.Row="0"
Grid.Column="1"
Margin="0,0,0,0"
FontSize="Medium"
TextColor="{TemplateBinding Parent.HeaderTextColor}"
HorizontalOptions="CenterAndExpand"
Style="{DynamicResource HeaderLabelStyle}"
Text="{TemplateBinding Parent.HeaderText}"
VerticalOptions="Center" />
<Border
Grid.Row="0"
Grid.Column="2"
Margin="0,0,15,0"
StrokeThickness="0"
IsVisible="{TemplateBinding Parent.IsContextVisible}"
BackgroundColor="{StaticResource Tertiary}"
VerticalOptions="Center"
HorizontalOptions="End"
HeightRequest="30"
WidthRequest="30">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<controls:FreakySvgImageView
ImageColor="White"
ResourceId="{x:Static constants:Constants.MeatballMenu}"
SvgAssembly="{x:Static constants:Constants.SvgAssembly}"
SvgMode="AspectFit">
</controls:FreakySvgImageView>
</Border>
<ContentPresenter
Grid.Row="1"
IsClippedToBounds="True"
BackgroundColor="{StaticResource Primary}"
Grid.ColumnSpan="3"
VerticalOptions="FillAndExpand" />
</Grid>
</AbsoluteLayout>
</ControlTemplate>
</ResourceDictionary>
</ContentPage.Resources>
In the content page you want it to show up (Should inherit from your base content page):
<ContentPage.Content>
<ContentView x:Name="template" ControlTemplate="{StaticResource HeaderControlTemplate}">
// Your design here
</ContentView>
</ContentPage.Content>
