Question

这是我参加Xamarin课程的第三天，我真的很努力地设置响应式应用程序背景。我正在尝试采用以下结构：

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

但是现在，由于<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>

我失败的结果：

<RelativeLayout>是否还有其他替代方法会导致很多UI问题？

Answer 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>

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

1 个答案: