xamarin.forms - Xamarin Forms Shell TitleView 不居中图像

Question

我有一个在 Xamarin.Forms 中使用新 Shell 的应用。我将以下代码添加到我的一个页面，以尝试使用 TitleView 区域居中显示我的应用程序标题图像。 (仅供引用 - 我已经尝试了居中对齐选项，但没有任何区别。)

<Shell.TitleView>
    <Image Source="UCIApp.png"
           HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand" />
</Shell.TitleView>

这样做后我得到的是标题栏中的图像，但居中于不包括左侧汉堡包按钮的空间，如下所示:

无论汉堡包菜单占用多少空间，我更喜欢它居中，看起来像这样:

有什么建议吗？

另外 - 将图像放入 TitleView 会导致它缩小。有什么办法可以避免吗？

Answer 1

是的，设计失败，没有选项定制。我更喜欢 Grid 对于这样的问题。您可以使用带百分比的列或行。

默认位置。

<Shell.TitleView>
    <Grid>
        <ffimageloadingsvg:SvgCachedImage 
            Source="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"
            Margin="10"/>
    </Grid>
</Shell.TitleView>

在此示例中，第一列为 4/5 单位，第二列为 1/5 单位(* 符号表示百分比或除法)。

<Shell.TitleView>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <BoxView BackgroundColor="Yellow"/>
        <BoxView Grid.Column="1" BackgroundColor="LightGoldenrodYellow"/>
    </Grid>
</Shell.TitleView>

然后将图像文本或控件添加到首选布局(图像控件默认列为 0)。

<Shell.TitleView>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <ffimageloadingsvg:SvgCachedImage 
            Source="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"
            Margin="10"/>
    </Grid>
</Shell.TitleView>

编辑:将最小高度添加到网格或图像控件以防止调整内容大小。此外，ffimageloadingsvg 是用于加载 svg 文件的第三方包。