Modal Page Not Placing Elements Correctly

NPCNPC USMember ✭✭

I've been working on a login page. Since I don't want to change around the root page, I decided to set the MainPage to the main page. Then push the login page as Modal to prevent user navigation away from the login page. However I designed the page using a normal PushAsync, which seems to treat the layout differently than when pushed as a Modal page.

Using RelativeLayout I center elements by placing them like:
Constraint txtX = Constraint.RelativeToParent(Parent => (Parent.Width / 2) - (welcomeText.Width / 2));

However when pushed as a Modal page, welcomeText.Width seems to return 0. This behavior persists across all types of views.

Best Answer

  • NPCNPC US ✭✭
    Accepted Answer

    I managed to solve it, although I don't like workarounds as much. But for anyone who finds this on Google with the same Problem:

    It seems that since the layout hasn't been created yet, for modal pages it considers the of the undrawn element to be 0. So within my Page.xaml.cs I added properties to explicitly define the container's size. The follow properties shown are for Labels, which are a little more complex than a button as the text isn't automatically in the center of the container.

    WidthRequest = elemsize,
    HorizontalTextAlignment = TextAlignment.Center

    Where elemsize is a double defining the container's size

    Then when placing the element one can then use the double used to define the size.

    Of course this isn't the best solution as dynamic text and the layout failing to yield to the WidthRequest could cause issues.

Answers

  • NPCNPC USMember ✭✭
    Accepted Answer

    I managed to solve it, although I don't like workarounds as much. But for anyone who finds this on Google with the same Problem:

    It seems that since the layout hasn't been created yet, for modal pages it considers the of the undrawn element to be 0. So within my Page.xaml.cs I added properties to explicitly define the container's size. The follow properties shown are for Labels, which are a little more complex than a button as the text isn't automatically in the center of the container.

    WidthRequest = elemsize,
    HorizontalTextAlignment = TextAlignment.Center

    Where elemsize is a double defining the container's size

    Then when placing the element one can then use the double used to define the size.

    Of course this isn't the best solution as dynamic text and the layout failing to yield to the WidthRequest could cause issues.

Sign In or Register to comment.