Xamarin.Forms: how to center an Image in TitleView when ToolbarItems are displayed? - custom-renderer

Question

I'm working on a Xamarin.Forms.Shell app containing 4 tabs. I would like to display a common Title containing a centered SVG logo on all these pages.
For this, I can use a TitleView like this:
<Shell.TitleView>
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.logoTitle.svg"
DownsampleHeight="6"
HeightRequest="45"/>
</Shell.TitleView>
This works and the logo is well centered in the NavigationBar. However, if the page contains ToolbarItems, the logo is no longer centered.
For example, on a page I've a ToolBarItem like this:
<ContentPage.ToolbarItems>
<ToolbarItem Text="Refresh"
Order="Primary"
Priority="0"
Command="{Binding RefreshCommand}"
CommandParameter="{x:Reference webView}">
<ToolbarItem.IconImageSource>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
Is there another way to display a centered Image from a SVG as Title, by using CustomRenderer or calculating the size of the ToolbarItems?
I've seen that a similar question has already been posted 1 year ago, but without any solution...
I've already tried to redraw the ToolbarItem in the TitleView like this:
<Shell.TitleView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.blackLogoTitle.svg"
DownsampleHeight="6"
HorizontalOptions="CenterAndExpand"
HeightRequest="45"
BackgroundColor="Transparent"/>
<Image HorizontalOptions="End" VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Image.Source>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RefreshCommand}" CommandParameter="{x:Reference webView}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Shell.TitleView>
On iOS it's correct, but I can see that:
the logo is not exactly centered like on the pages that don't contain any ToolBarItem, as there is a small gap when I switch between the pages
the icon is not positioned like when I use a ToolBarItem
On Android, the result it's not correct: the logo hasn't the same height, and the icon is out of the TitleView.

Answer 1

Finally I've managed my TitleViews like this:
For the Image:
<Shell.TitleView >
<Image Source="resource://ShellAppSample.Resources.logo.jpg"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>
For the Label:
<Shell.TitleView>
<Label Text="{Binding Title}"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>
And for Label with one "medium" size ToolBarItem:
<Shell.TitleView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}"
Grid.Column="1"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Grid>
</Shell.TitleView>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Refresh"
Order="Primary"
Priority="1"
Command="{Binding RefreshCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
I've checked the alignment through the DebugRainbows package and it looked fine on iOS/Android, on small/large devices.
It's not perfect, and I need to update rules if I add other ToolBarItems but it worked like this.