Xamarin Forms Shell TitleView 不居中图像答案

【问题标题】：Xamarin Forms Shell TitleView does not center imageXamarin Forms Shell TitleView 不居中图像
【发布时间】：2021-11-23 11:06:13
【问题描述】：

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

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

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

我更喜欢它居中而不考虑汉堡菜单占用的空间，看起来像这样：

有什么建议吗？

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

【问题讨论】：

标签： xamarin.forms titleview xamarin.shell

【解决方案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 文件的第三方包。

【讨论】：

【解决方案2】：

我认为这是关于 Shell Title View 的设计问题，您可以将其提交为 GitHub here 中的功能请求。

我更希望它居中而不考虑汉堡菜单占用的空间，看起来像这样：...有什么建议吗？

标题视图已经被放置在标题视图的中心。但是，它看起来不像在整个 Navigation Bar 中居中。看看下面的代码和效果。

<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 的中心。由于现有的菜单图标，Title View 的权重与 Navigation Bar 不相等。

将图像放入 TitleView 会导致它被缩小

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

【讨论】：

好的，谢谢@JuniorJiang。我希望他们能解决这个问题，或者给你一个模板，显示在汉堡菜单后面。