CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
nix
nix

Reputation: 2285

How to position element at the bottom of a screen using RelativeLayout's constraints?

How to position element at the bottom of a screen using RelativeLayout's constraints? Currently, I'm using this code:

<Image x:Name="img" Opacity="1"
                VerticalOptions="EndAndExpand"
                RelativeLayout.WidthConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>

To set a picture as a background, however I need it to start from the bottom, therefore, I need to position it at the bottom. How should I do that? I haven't found any examples of that in the internet. Thanks in advance!

Upvotes: 0

Views: 2656

Answers (2)

Rohit Vipin Mathews
Rohit Vipin Mathews

Reputation: 11787

You can use the RelativeView as your container. The make it FillAndExpand in both Horizontal Options and Vertical Options. So now your screen size is the size of your relative layout.

Now you have an image starting at the left bottom and full width : 

<Image x:Name="img" Opacity="1"
                VerticalOptions="EndAndExpand"
                RelativeLayout.WidthConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.75}"/>

Also you can set the Aspect, if your image is of smaller size than the screen.

Aspect - How to size the image within the bounds it is being displayed within (whether to stretch, crop or letterbox).

The Aspect determines how the image will be scaled to fit the display area:

  • Fill - Stretches the image to completely and exactly fill the display area. This may result in the image being distorted.
  • AspectFill - Clips the image so that it fills the display area while preserving the aspect (ie. no distortion).
  • AspectFit - Letterboxes the image (if required) so that the entire image fits into the display area, with blank space added to the top/bottom or sides depending on the whether the image is wide or tall.

Upvotes: 3

Joehl
Joehl

Reputation: 3701

You can set the X-Position (and/or Y-Position) of your Image, relative to your parent (just like the with or height). I used following code to place a button (with width and height of 60) at the bottom-right of the Screen:

<ContentView RelativeLayout.XConstraint="{ConstraintExpression
                      Type=RelativeToParent, Property=Width, Constant=-70}"
             RelativeLayout.YConstraint="{ConstraintExpression
                      Type=RelativeToParent, Property=Height, Constant=-70}">
    <Button />
</ContentView>

You can find more details in the Xamarin Documentation.

Upvotes: 1

Related Questions