Xamarin Relative Layout Constraint Class RelativeToParent unexpected output?

Issue

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Diagnostics;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App1
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            RelativeLayout relativeLayout = new RelativeLayout();

            Label upperLeft = new Label
            {
                Text = "Upper Left",
                FontSize = 20
            };
            relativeLayout.Children.Add( upperLeft ,
                Constraint.Constant(0), Constraint.Constant(0)
                );
            Label constantLabel = new Label
            {
                Text = "Constants are Absolute",
                FontSize = 20
            };
            relativeLayout.Children.Add(constantLabel,
                Constraint.Constant(100),
                Constraint.Constant(100),
                Constraint.Constant(50),
                Constraint.Constant(200)
                );
            Label halfWayDown = new Label
            {
                Text = "Halfway down and across",
                FontSize = 20
            };
            relativeLayout.Children.Add(halfWayDown,
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Width / 2;
                  }),
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Height / 2;
                  })
                  ) ;
            this.Content = relativeLayout;
        }

        
    }
}

I have 3 labels one placed at upper left corner , second one on some random location(100,100) , third one at half of parent width and height. I am having an issue with the last label. I don't know why the text of the last label is crossing the screen and why it is not changing the line. Also when I pass the value for width and height of the last label the text of the label changes the line, why does that happen? This behaviour (text crosses the screen) occurs when I pass only two arguments to the third label. I have also tried with the first the label where , when I pass only two arguments to the Add-method the text changes its line automatically. Can anyone tell me how the method RelativeToParent works? Also what is default width and height value if i did not pass them? Why does the text in the last label not change the line? Link for the image of the output i am getting

Solution

You didn't set the width of Label halfWayDown,so the text is displayed on one line by default, with the following portion of the text truncated.

You can set the width of Label halfWayDown when adding it to Children:

        relativeLayout.Children.Add(halfWayDown,
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Width / 2;
              }),
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Height / 2;
              }),

               // set the 1/3 width  of parent
               Constraint.RelativeToParent((parent) =>
               {
                 return parent.Width * 0.5;
               })
              );

You can also set the MaxLines ,LineBreakMode for your Label.

Please refer to the following code:

    public MainPage()
    {

        RelativeLayout relativeLayout = new RelativeLayout();

        Label upperLeft = new Label
        {
            Text = "Upper Left",
            FontSize = 20
        };
        relativeLayout.Children.Add(upperLeft,
            Constraint.Constant(0), Constraint.Constant(0)
            );
        Label constantLabel = new Label
        {
            Text = "Constants are Absolute",
            FontSize = 20
        };
        relativeLayout.Children.Add(constantLabel,
            Constraint.Constant(100),
            Constraint.Constant(100),
            Constraint.Constant(50),
            Constraint.Constant(200)
            );
        Label halfWayDown = new Label
        {
            Text = "Halfway down and across",
            FontSize = 20,
            BackgroundColor= Color.Yellow,
            MaxLines = 2,
            LineBreakMode = LineBreakMode.WordWrap,
        };
        relativeLayout.Children.Add(halfWayDown,
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Width / 2;
              }),
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Height / 2;
              }),

               // set the 1/3 width  of parent
               Constraint.RelativeToParent((parent) =>
               {
                 return parent.Width * 0.5;
               })
              );
        this.Content = relativeLayout;
    }

Update:

But the first label ( upperLeft ) changes its line even when i did not pass the width value it automatically changes the line ?

The last label(halfWayDown) also could change its line, but the string hasn't reached the actual width.

As a test, you can use a long string to verify this,and the test code is:

Label halfWayDown = new Label
            {
                Text = "Halfway down and across 01234567890123456789012345678901234567890123456789012345678901234567890123456789",
                FontSize = 20,
                BackgroundColor = Color.Yellow,
                //LineBreakMode= LineBreakMode.CharacterWrap,
                //WidthRequest=200,
            };
            relativeLayout.Children.Add(halfWayDown,
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Width / 2;
                  }),
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Height / 2;
                  })

                   // set the 1/3 width  of parent
                   //Constraint.RelativeToParent((parent) =>
                   //{
                   //  return parent.Width * 0.5;
                   //})
                  );

The result is:

Note:

So to avoid this, you can set the width for your label(halfWayDown ).

Update2:

you can see that the string of halfWayDown label have some missing characters. The part from "ss 012345" is missing.

That's because the two Lables upperLeft and halfWayDown both have a default width.
You can verify this by adding a button,please refer the following code:

        Button button = new Button { 
         Text="test",
         HorizontalOptions= LayoutOptions.StartAndExpand

        };

        button.Clicked += delegate {
            double width1 = upperLeft.Width;
            double width2 = halfWayDown.Width;
            System.Diagnostics.Debug.WriteLine("----> upperLeft's width = " + width1 + "<---> halfWayDown.Width = " + width2);
        };
        relativeLayout.Children.Add(button,
             Constraint.RelativeToParent((parent) =>
             {
                 return parent.Width / 3;
             }),
             Constraint.RelativeToParent((parent) =>
             {
                 return parent.Height*2 / 3;
             })

             );

And the output is as follows on my device:

----> upperLeft's width = 375.652173913043<---> halfWayDown.Width = 375.652173913043

So, to avoid this, you can set a width for your label(halfWayDown).

Answered By - Jessie Zhang -MSFT