如何使用 Xamarin 表单放置此标签和图像？

Question

我正在尝试学习 Xamarin 表单并希望尝试执行以下操作：

我想我需要使用RelativeLayout，但我很难理解如何 使用所提供的工具。我正在阅读的所有示例都说要使用LayoutFlags 和LayoutBounds 之类的东西（例如this nice demo 和also this one）。

但是没有人解释如何我们应该使用它们。

有人可以解释一下（如果他们提供带有辅助线的图像，则加分等）我可以如何在该图像中做我正在尝试的事情？

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

这里有一些很好的例子：SyntaxIsMyUI。例如，您可以在此处相对于您的父母和 parent.Width 进行操作。

否则，您可以根据此轻松获取屏幕尺寸：Xamarin.Forms Kickstarter

祝你好运！

---

更新：

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,