如何在Xamarin中的RelativeLayout中定位元素？

如何解决如何在Xamarin中的RelativeLayout中定位元素？

关于我的问题No property,BindableProperty,or event found for “HeightRequest”,or mismatching type between value and property error in Xamarin.Forms，有什么方法可以将用户名和密码entry元素放在“欢迎标签”的正下方？

因此，基本上，该应用应如下所示：

[Welcome Label]




  [username]
  [password]


   [login]

我尝试使用

<RelativeLayout>
    <Label
        Text="Welcome" 
        BackgroundColor="Yellow" 
        TextColor="Green" 
        FontSize="Medium"
        VerticalTextAlignment="Center"
        HorizontalTextAlignment="Center"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativetoParent,Factor=1,Property=Width,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativetoParent,Factor=0.1,Property=Height,Constant=0}"
    />

    <Entry
        Text="Username"
        IsPassword="False"
    />
</RelativeLayout>

（当前仅是用户名字段），但无济于事。为什么将输入字段放置在标签上方？

解决方法

您可以使用RelativeToView属性来指示相对于视图的约束

<RelativeLayout>
        <Label
            x:Name="label"
            Text="Welcome" 
            BackgroundColor="Yellow" 
            TextColor="Green" 
            FontSize="Medium"
            WidthRequest="100"
            VerticalTextAlignment="Center"
            HorizontalTextAlignment="Center"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Factor=1,Property=Width,Constant=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Factor=0.1,Property=Height,Constant=0}"
            />

        <Entry
            x:Name="name"
            Text="Username"
            IsPassword="False"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=label,Factor=0.50,Constant=-50}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,Property=Y,Constant=200}"

            />
        <Entry
            x:Name="password"
            Text="Password"
            IsPassword="False"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=name,Property=X}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,Constant=50}"
            />
        <Button Text="Login" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=password,Constant=200}"/>

</RelativeLayout>

效果如：

,

尝试进行类似的操作并根据您的需要更改对齐方式。

            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Label Text="Welcome" HorizontalOptions="Start" Margin="10,30,0"/>
                <Entry Placeholder="User Id" Margin="10,20,0"/>
                <Entry Placeholder="Password" IsPassword="True" Margin="10"/>
                <Button Text="Login" HorizontalOptions="Center"/>
            </StackLayout>

我使用堆栈布局只是为了基本目的，它不是完美的UI，而只是作为参考。