How does one position elements in RelativeLayout in Xamarin? - xamarin.forms

Question

I relation to my question No property, BindableProperty, or event found for “HeightRequest”, or mismatching type between value and property error in Xamarin.Forms, is there any way I can place the username and password entry elements right below the Welcome Label?
So, basically, the app should look like:
[Welcome Label]
[username]
[password]
[login]
I tried using
<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>
(Currently just the username field) but to no avail. Why is the entry field being placed over the label?

Answer 1

You could use RelativeToView property to indicate a constraint that is relative to a view
<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,Property=Width,Factor=0.50,Constant=-50}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=label,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, ElementName=name,Property=Y ,Constant=50}"
/>
<Button Text="Login" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=password,Property=X}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=password,Property=Y ,Constant=200}"/>
</RelativeLayout>
effect like:

Answer 2

Try making something like this & change the alignment according to you.
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="Welcome" HorizontalOptions="Start" Margin="10, 30, 0, 0"/>
<Entry Placeholder="User Id" Margin="10, 20, 0, 0"/>
<Entry Placeholder="Password" IsPassword="True" Margin="10"/>
<Button Text="Login" HorizontalOptions="Center"/>
</StackLayout>
I used stack layout just for basic purpose, its not perfect UI but just for reference.