AbsoluteLayout with rotated label is not positioned or sized correctly

AlexanderSchmitzAlexanderSchmitz USMember
edited May 2015 in Xamarin.Forms

Hi,

I am trying to create a page with absolute layout in code for speed and easy of layout as I plan to position a lot of labels. The page is supposed to show sections, e.g. "Section1" with a background color at the left edge of the screen with 90 degree rotated text. Whatever I try I either cannot get the size correct or/and the position correct.

Sample Code below:
`
public class DemoPage : ContentPage
{
public DemoPage()
{
AbsoluteLayout absoluteLayout = new AbsoluteLayout();

        Label label1 = new Label();
        label1.Text = "label1";
        label1.BackgroundColor = Color.Green;

        Label label2 = new Label();
        label2.Text = "label2";
        label2.BackgroundColor = Color.Red;
        label2.Rotation = 90;

        Label label3 = new Label();
        label3.Text = "label3";
        label3.BackgroundColor = Color.Yellow;
        label3.Rotation = 90;

        // correct
        absoluteLayout.Children.Add(label1, new Rectangle(0, 0, 100, 50));

        // goal: a bar with 90 degree rotated text at the edge of the screen

        // should be 50 width and 100 height
        // but is 100 width and 50 height and positioned about 50 pixel too far down
        absoluteLayout.Children.Add(label2, new Rectangle(0, 110, 50, 100));

        // should be 100 width and 50 height
        // but is 50 width and 100 height and positioned about 25 pixels too far right
        absoluteLayout.Children.Add(label3, new Rectangle(0, 220, 100, 50));

        this.Content = absoluteLayout;
    }
}

`

And the result shown in the attached image.
Maybe there is something like a rotation point I have to define, but I have not found it.
Can anyone help? This is probably something easy I miss.
Thanks

Answers

  • AlexanderSchmitzAlexanderSchmitz USMember

    I was able to manipulate the position of the 3rd label enough to achieve what I wanted.
    I still don't think this is expected behavior.

    int x = 0;
    int y = 220;
    int desiredLabelHeightAfterRotation = 100;
    int desiredLabelWidthAfterRotation = 50;

    absoluteLayout.Children.Add(
    label3,
    new Rectangle(
    x - (desiredLabelHeightAfterRotation - desiredLabelWidthAfterRotation) / 2,
    y + (desiredLabelHeightAfterRotation - desiredLabelWidthAfterRotation) / 2,
    desiredLabelHeightAfterRotation,
    desiredLabelWidthAfterRotation));

  • KevinSmith.FLKevinSmith.FL USMember ✭✭

    The rotated labels also create layout problems in the StackLayout. It seems that the length of the text string is used to calculate the width of the label view even when rotated at 90 degrees (for example). This results in Label(s) with long text strings taking up more horizontal space than a Label with a shorter text string.

  • WinterCloudWinterCloud GBMember ✭✭✭

    bump an old thread.
    I'm having the same issue here, Label Rotate only rotate the text and background, but not the bounding box. Even wrapping label in StackLayout or AbsoluteLayout, still can't keep the rotated text in the screen and rotate the bounding box.

    Is there any work around on rotated label issue?

    Thanks.

Sign In or Register to comment.