Can someone explain to me the constraints, factor and constant in xamarin forms?

Question

I have read the documentation on it but just can't understand it. I have this code

 <RelativeLayout Padding="0" Margin="0" HorizontalOptions="FillAndExpand" HeightRequest="300" VerticalOptions="Start" BackgroundColor="Green">
            <Image
        Source="infoBox.png" x:Name="infobox"  WidthRequest="400"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, Property=Height,Factor=1,Constant=0}" 
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, Property=X, Factor=0.10, Constant=25}"
               />
            <Label Text=":)"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, Property=Y, Constant=5}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, Property=X, Factor=0.10, Constant=25}"
        TextColor="#000000"/>
        </RelativeLayout>

I am trying to get some text to display on top of an image that takes up full width but not full height of a detail page in a master-detail navigation. I tried changing the constant/factor but I have no idea what it does and every time the result does not show what I expected. Can someone please explain what the constant and factor does? Like an example if I set factor to 1 for x constraint, what will it do? Make the width the original or make it fill the whole width?

Getting frustrated not understanding what it does exactly. Please help :(

Answer 1

Type is what you are positioning or sizing with repect to. It can be RelativeToParent or RelativeToView. If view use ElementName to say which view.

Property is what property you are trying to set on your control. You could be setting the Width or the Height or the X co-ordinate.

Factor is what percentage of the parent or view you want to use. If the parent is 500 pixels and Factor is 0.5 then you are setting a value of 250.

Constant allows you to alter the value you calculated using Factor. If you set Constant to -100 then the value we calculated previously would now be 150.

Having said all this, it would be much easier to position your image and label using a grid.

Put both the image and the label in the same grid row then position the label within the row using horizontal and vertical options. Use Margin to move the label up and down slightly.

Relative layout should be avoided it at all possible as it has a high computational cost according to the father of Xamarin forms Jason Smith.