Xamarin.Forms: 如何在显示ToolbarItems 时使TitleView 中的Image 居中？

Question

我正在开发一个 Xamarin.Forms.Shell 应用程序，其中包含 4 个选项卡。我想在所有这些页面上显示包含 居中 SVG 徽标 的 common Title。

为此，我可以使用这样的 TitleView：

<Shell.TitleView>
    <ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.logoTitle.svg"
                                      DownsampleHeight="6"
                                      HeightRequest="45"/>
</Shell.TitleView>

这很有效，徽标很好地位于 NavigationBar 的中心。但是，如果页面包含 ToolbarItems，则徽标不再居中。

例如，在一个页面上我有这样一个 ToolBarItem：

<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>

是否有另一种方法可以通过使用 CustomRenderer 或计算 ToolbarItems 的大小来显示来自 SVG 的 居中图像作为标题？ =27=]

我看到一个已经在 1 年前发布了，但是没有任何解决方案...

我已经试过像这样在 TitleView 中重绘 ToolbarItem：

<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>

在 iOS 上是正确的，但我可以看到：

徽标 不完全居中 就像在不包含任何 ToolBarItem 的页面上一样，因为当我在页面之间切换时有一个小间隙
图标 未定位 就像我使用 ToolBarItem

在 Android 上，结果不正确：徽标高度不一样，图标超出 TitleView。

Answer 1

最后我的 TitleView 是这样管理的：

对于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>

对于Label：

<Shell.TitleView>
    <Label Text="{Binding Title}"
           VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
           Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>

对于 Label 一个“中等”尺寸 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>

我已经通过 DebugRainbows 包检查了对齐方式，它在 iOS/Android、small/large 设备上看起来很好。

它并不完美，如果我添加其他 ToolBarItem，我需要更新规则，但它是这样工作的。

Xamarin.Forms: 如何在显示ToolbarItems 时使TitleView 中的Image 居中？

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

custom-renderer

titleview

toolbaritems

xamarin.forms.shell