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

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

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:

enter

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.

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

Leave a Reply

Your email address will not be published.