How to place this Label and Image with Xamarin Forms?

Question

I'm trying to learn Xamarin forms and wish to try to do the following:

I'm thinking that I need to use a RelativeLayout but I'm struggling to understand how to use the provided tools. All the examples I'm reading say to use things like LayoutFlags and LayoutBounds (like this nice demo and also this one).

But no one is explaining how we should be using them.

Can someone please explain (bonus points if they provide an image with helper lines, etc) how I can do what I'm trying in that image?

Image: it's like it's anchored to the bottom right corner.

Label: it's like it's centered .. and pushed down from the top about 20% odd..

Answer 1

You have some nice examples here: SyntaxIsMyUI. There you can do it relative to your parent and parent.Width for example.

Else you can easily get your screensize according to this: Xamarin.Forms Kickstarter

Good luck!

---

Update:

public class MyPage : ContentPage
{
    public MyPage ()
    {
        Label label = new Label { 
            BackgroundColor = Color.Blue,
            Text = "Label",
            XAlign = TextAlignment.Center,
        };
        BoxView image = new BoxView { 
            BackgroundColor = Color.Aqua,
        };
        BoxView frame = new BoxView { 
            BackgroundColor = Color.Blue,
            HeightRequest = 2000, //this will be ignored in relLayout
        };

        RelativeLayout relLayout = new RelativeLayout ();                   //create your relative layout which will be your parent
        relLayout.BackgroundColor = Color.Red;                              //this will only be full screen if this is your only View

        relLayout.Children.Add (label,                                      //add the children of it
            Constraint.RelativeToParent ((Parent) => Parent.Width / 4),     //left side of label a quarter in on screen
            Constraint.RelativeToParent ((Parent) => Parent.Height / 5),    //pushed down a fifth (20%) on the screen
            Constraint.RelativeToParent ((Parent) => Parent.Width / 2));    //Width is half screen size

        relLayout.Children.Add (frame,                                      //what will be a frame around picture
            Constraint.RelativeToParent ((Parent) => Parent.Width / 2),     //left side begin in the middle of screen along x-axis
            Constraint.RelativeToParent ((Parent) => Parent.Height - 60),   //top side 60 dp from bottom of the view (parent, this case entire screen)
            Constraint.RelativeToParent ((Parent) => Parent.Width / 2-10),  //Width is half screen - 30 dp to fit inside the frame
            Constraint.Constant (50));                                      //Height set to exactly 50 dp 

        relLayout.Children.Add (image,                                      //your image
            Constraint.RelativeToView (frame, 
                new Func<RelativeLayout, View, double> ((prelLayout, pframe) => frame.X + 5)), //inside the frame by 10 db
            Constraint.RelativeToView (frame,
                new Func<RelativeLayout, View, double> ((prelLayout, pframe) => frame.Y + 5)),  //10 dp inside frame
            Constraint.RelativeToView (frame,
                new Func<RelativeLayout, View, double> ((prelLayout, pframe) => frame.Width - 10)),//Width is same as frame - 10 dp (5 on each side)
            Constraint.RelativeToView (frame,
                new Func<RelativeLayout, View, double> ((prelLayout, pframe) => frame.Height - 10)));//Height set to same as frame height-10 to add the 5 dp inside the frame

        this.Content = relLayout;
    }
}

Answer 2

      img = new Image { Source = "a.png" ,Aspect=Aspect.AspectFill };

        txt = new Label { Text = "0",FontSize=30, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center, TextColor = Color.Black };



grid = new Grid { 
           HorizontalOptions = LayoutOptions.CenterAndExpand, VerticalOptions = LayoutOptions.CenterAndExpand
             };
        grid.RowDefinitions.Add(new RowDefinition());
        grid.RowDefinitions.Add(new RowDefinition());
        grid.Children.Add(img);

        grid.Children.Add(txt);
    Content = new StackLayout
        {
            BackgroundColor=Color.White,
            Children = {
             grid,