XAML Xamarin Forms Relative Layout image position issue

Question

I have the following XAML

<RelativeLayout>
 <Image Source="background.jpg"
         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X}"
        RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>


  <StackLayout 
        VerticalOptions="FillAndExpand" 
        Padding="10,10,10,0" 
        Orientation="Vertical"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">

    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Margin="0,30,0,10">
         <Image Source="icon.png" Margin="0,0,10,0" />
         <Label Text="Main menu" HorizontalOptions="FillAndExpand" Style="{DynamicResource TitleStyle}" />
    </StackLayout>
  </StackLayout>
</RelativeLayout>

This renders the image in the middle of the content, how would I get it to render at the top of the content using XAML?

nadir hamidou nadir hamidou · Accepted Answer · 2018-04-25T15:56:58

this works just in RelativeLayout

Constant attribute is to define the number of pixels to position your views

Constant=0 in this case it's zero

if you need to position your View to the right or left use :

RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1, Constant=0}"

then if you try to position it to the top or bottom use :

RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=1, Constant=0}"

example :

<Image   Source="menuButton2.png"  x:Name="menuIcon" 
 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=1, Constant=9}"
 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1, Constant=05}"
                       />

XAML Xamarin Forms Relative Layout image position issue

2 Answers