3

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

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

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

在此处输入图像描述

我更喜欢的是不管汉堡菜单占用的空间如何，它都居中，看起来像这样：

在此处输入图像描述

有什么建议么？

还 - 将图像放入 TitleView 会导致它被缩小。有没有办法避免这种情况？

4

2 回答 2

4

是的，设计失败并且没有选项定制。对于此类问题，我更喜欢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 文件的第三方包。

于 2021-07-13T13:52:25.063 回答
2

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

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

标题视图已放置在 Title View 的中心。但是，它看起来不像在整个 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的显示范围。

于 2019-10-30T01:54:11.827 回答