Xamarin.forms：是否可以在 RelativeLayout 上使用 Grid？答案

【问题标题】：Xamarin.forms: Is it possible to use Grid on RelativeLayout?Xamarin.forms：是否可以在 RelativeLayout 上使用 Grid？
【发布时间】：2019-09-07 20:51:49
【问题描述】：

这是我在 Xamarin 课程中的第三天，我真的很难设置响应式应用程序背景。我正在尝试这种结构：

我终于实现了使用位于<RelativeLayout> 标签之间的AspectFill 属性设置响应式背景。

但是现在，由于<RelativeLayout> 标签，我无法将标签放在应用程序的顶部中心。我为徽标创建的标签位于左侧。

我尝试添加HorizontalOptions属性，但不幸的是，它没有受到影响。

这里是相关的xaml代码：

<RelativeLayout Padding="0">
    <Image Aspect="AspectFill" Source="background.png" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
    </Image>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*">
            </ColumnDefinition>
            <ColumnDefinition Width="*">
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*">
            </RowDefinition>
            <RowDefinition Height="*">
            </RowDefinition>
        </Grid.RowDefinitions>
        <StackLayout Grid.Column="0" Grid.Row="0" HorizontalOptions="">
            <Label Text="MENU">
            </Label>
        </StackLayout>
        <StackLayout Grid.Column="1" Grid.Row="0">
            <Label Text="LOGO" FontSize="28">
            </Label>
        </StackLayout>
    </Grid>
</RelativeLayout>

我失败的结果：

对于会导致很多 UI 问题的 <RelativeLayout>，我们还有其他替代方案吗？

【问题讨论】：

在这种情况下，我不确定你为什么需要 RelativeLayout - 它似乎没有做任何事情。也就是说，您确定您的 Grid 正在水平填充它的容器吗？尝试将其设置为填充，然后使用 3 col 网格 25/50/25
页面本身有一个 BackgroundImage，或者您可以将其分配为网格的子节点并使用 col/row 跨度属性使其扩展
您为什么要手动重新创建导航栏？您可以简单地使用已由 xamarin 表单提供的 NavigationPage，它负责创建菜单按钮和页面标题。见：docs.microsoft.com/de-de/dotnet/api/…这里有更实用的教程：c-sharpcorner.com/article/navigation-in-xamarin-forms

标签： xaml xamarin xamarin.forms grid

【解决方案1】：

非常感谢@Jason

该问题已通过添加新的柱状网格得到解决。换句话说，总共应该有 3 列。但是，我只添加了 2 列。

这是我更新的xaml 代码：

<RelativeLayout Padding="0">
        <!-- Background -->
        <Image Aspect="AspectFill" Source="background.png" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
        </Image>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*">
                </ColumnDefinition>
                <ColumnDefinition Width="*">
                </ColumnDefinition>
                <ColumnDefinition Width="*">
                </ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*">
                </RowDefinition>
                <RowDefinition Height="*">
                </RowDefinition>
            </Grid.RowDefinitions>
            <StackLayout Grid.Column="0" Grid.Row="0" HorizontalOptions="Start">
                <Label Text="MENU">
                </Label>
            </StackLayout>
            <StackLayout Grid.Column="1" Grid.Row="0">
                <Label Text="LOGO" FontSize="28">
                </Label>
            </StackLayout>
            <StackLayout Grid.Column="2" Grid.Row="0">
            </StackLayout>
        </Grid>
    </RelativeLayout>

【讨论】：