Xamarin Forms Shell TitleView 不居中图像

Question

我有一个应用程序使用 Xamarin.Forms 中的新 Shell。我将以下代码添加到我的一个页面，试图使用 TitleView 区域显示我的应用程序 header 图像居中。（仅供参考 - 我已尝试将两个对齐选项置于中心位置，但没有任何区别。）

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

这样做后我得到的是标题栏中的图像，但位于 space 的中心，不包括左侧的汉堡包按钮，如下所示：

我更喜欢它居中，而不管 space 汉堡菜单看起来像这样：

有什么建议吗？

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

Answer 1

我认为这是关于 Shell 标题视图的设计问题，您可以将其提交为 GitHub here .

中的功能请求

What I would prefer is it centered regardless of the space the hamburger menu takes up looking something like this: ... Any suggestions?

标题视图已经在标题视图中居中。但是，它看起来不在整个导航栏的中心。看看下面的代码和效果。

<Shell.TitleView>
    <StackLayout HorizontalOptions="CenterAndExpand"
                 VerticalOptions="CenterAndExpand"
                 BackgroundColor="Accent">
        <Image Source="xamarin_logo.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</Shell.TitleView>

效果：

可以看到Title View的内容，而且图标已经居中在Title View中了。由于已有meun图标，Title View的权重与Navigation Bar不相等。

Putting the image in the TitleView is causing it to be shrunk down

参考上面的效果，可以看到图标的大小适配了Title View的显示，可以看到Title View的大小，所以你的图标不太可能超出显示范围标题视图。

Answer 2

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

默认位置。

<Shell.TitleView>
    <Grid>
        <ffimageloadingsvg:SvgCachedImage 
            Source="https://Whosebug.design/assets/img/logos/so/logo-Whosebug.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://Whosebug.design/assets/img/logos/so/logo-Whosebug.svg"
            Margin="10"/>
    </Grid>
</Shell.TitleView>

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

Xamarin Forms Shell TitleView 不居中图像

Xamarin Forms Shell TitleView does not center image

titleview

xamarin.forms

xamarin.shell