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

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.