Strange behavour from Relative Layout on Windows Phone

Hi!

I'm having a issue with Relative Layout for UWP on Windows Phone where the layout is off on the screen for around 5-7 seconds before popping in to place and centered on the screen. Note that this only happens on the Windows Phone while on Windows 10 and Android its working as expected, so i don't think its a issue with loading speed since the code and page is generated and interactive while it is of centered.

This is the method creating the page with the adaptive layout:

private void PopulatePage()
{
    OverviewPageControls.OverviewPage = this;

    // Generating the page controls
    var nextLaunchLink = OverviewPageControls.SetNextLaunchLink();
    var launchInLabel = OverviewPageControls.SetLaunchInLabel();
    var launchTimerLabel = OverviewPageControls.SetLaunchTimer();
    var launchesThisWeekFrame = OverviewPageControls.SetLaunchesThisWeek();
    var launchesThisMonthFrame = OverviewPageControls.SetLaunchesThisMonth();
    var astronautsFrame = OverviewPageControls.GenerateAstronautsInSpaceFrame();
    var launchPalPlusButton = OverviewPageControls.SetLaunchPalPlusButton();
    var launchTrackingLabel = OverviewPageControls.GenerateTrackedLaunchLabel();
    var agencyTrackingLabel = OverviewPageControls.GenerateTrackedAgenciesLabel();
    var trackedAgenciesList = OverviewPageControls.GenerateAgencyTrackingList();
    var noAgenciesTrackedLabel = OverviewPageControls.GenerateNoAgenciesTrackingLabel();
    var trackedLaunchList = OverviewPageControls.GenerateLaunchTrackingList();
    var noLaunchesTrackedLabel = OverviewPageControls.GenerateNoLaunchTrackingLabel();

    var relativeLayout = new RelativeLayout();

    relativeLayout.Children.Add(nextLaunchLink, 
        Constraint.RelativeToParent(parent => parent.Width / 2 - nextLaunchLink.Width / 2));

    relativeLayout.Children.Add(launchInLabel, 
        Constraint.RelativeToParent(parent => parent.Width / 2 - launchInLabel.Width / 2), 
        Constraint.RelativeToView(nextLaunchLink, (parent, sibling) => sibling.Y + sibling.Height + 10));

    relativeLayout.Children.Add(launchTimerLabel,
        Constraint.RelativeToParent(parent => parent.Width / 2 - launchTimerLabel.Width / 2),
        Constraint.RelativeToView(launchInLabel, (parent, sibling) => sibling.Y + sibling.Height + 10));

    if (!App.Settings.SuccessfullIap && DependencyService.Get<ICheckPurchase>().CanPurchasePlus())
        relativeLayout.Children.Add(launchPalPlusButton,
        Constraint.RelativeToParent(parent => parent.Width / 2 - launchPalPlusButton.Width / 2),
        Constraint.RelativeToView(launchTimerLabel, (parent, sibling) => sibling.Y + sibling.Height + 10));

    var previousView = !App.Settings.SuccessfullIap && DependencyService.Get<ICheckPurchase>().CanPurchasePlus()
        ? (Xamarin.Forms.View) launchPalPlusButton
        : (Xamarin.Forms.View) launchTimerLabel;

    relativeLayout.Children.Add(launchesThisWeekFrame,
        Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 - launchesThisWeekFrame.Width / 2 : parent.Width / 2 - launchesThisWeekFrame.Width / 2),
        Constraint.RelativeToView(previousView, (parent, sibling) => sibling.Y + sibling.Height + 10),
        Constraint.RelativeToParent(parent =>
        {
            if (parent.Width > 1100)
            {
                return parent.Width / 4;
            }
            else if(parent.Width > 640)
            {
                return parent.Width / 2;
            }
            else
            {
                return parent.Width;
            }
        }));

    relativeLayout.Children.Add(launchesThisMonthFrame,
        Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 * 3 - launchesThisMonthFrame.Width / 2 : parent.Width / 2 - launchesThisMonthFrame.Width / 2),
        Constraint.RelativeToView(launchesThisWeekFrame, (parent, sibling) => parent.Width > 640 ? sibling.Y : sibling.Y + sibling.Height),
        Constraint.RelativeToParent(parent =>
        {
            if (parent.Width > 1100)
            {
                return parent.Width / 4;
            }
            else if (parent.Width > 640)
            {
                return parent.Width / 2;
            }
            else
            {
                return parent.Width;
            }
        }));

    relativeLayout.Children.Add(astronautsFrame,
        Constraint.RelativeToParent(parent => parent.Width / 2 - astronautsFrame.Width / 2),
        Constraint.RelativeToView(launchesThisMonthFrame, (parent, sibling) => sibling.Y + (parent.Width > 1100 ? 0 : launchesThisWeekFrame.Height)),
        Constraint.RelativeToParent(parent =>
        {
            if (parent.Width > 1100)
            {
                return parent.Width / 4;
            }
            else if (parent.Width > 640)
            {
                return parent.Width / 2;
            }
            else
            {
                return parent.Width;
            }
        }));

    // Tracking list for launches
    relativeLayout.Children.Add(launchTrackingLabel,
        Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 - launchTrackingLabel.Width / 2 : parent.Width / 2 - launchTrackingLabel.Width / 2),
        Constraint.RelativeToView(astronautsFrame, (parent, sibling) => sibling.Y + sibling.Height + 10 ));

    if (Context.TrackedLaunches.Any())
    {
        relativeLayout.Children.Add(trackedLaunchList,
            Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 - trackedLaunchList.Width / 2 : parent.Width / 2 - trackedLaunchList.Width / 2),
            Constraint.RelativeToView(launchTrackingLabel, (parent, sibling) => sibling.Y + sibling.Height + 10),
            Constraint.RelativeToParent(parent =>
            {
                if (parent.Width > 1100)
                {
                    return parent.Width / 3;
                }
                else if (parent.Width > 640)
                {
                    return parent.Width / 2;
                }
                else
                {
                    return parent.Width;
                }
            }));
    }
    else
    {
        relativeLayout.Children.Add(noLaunchesTrackedLabel,
            Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 - noLaunchesTrackedLabel.Width / 2 : parent.Width / 2 - noLaunchesTrackedLabel.Width / 2),
            Constraint.RelativeToView(launchTrackingLabel, (parent, sibling) => sibling.Y + sibling.Height + 10));
    }

    previousView = Context.TrackedLaunches.Any()
        ? (Xamarin.Forms.View)trackedLaunchList
        : (Xamarin.Forms.View)noLaunchesTrackedLabel;

    // Tracking list for agencies
    relativeLayout.Children.Add(agencyTrackingLabel,
        Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 * 3 - agencyTrackingLabel.Width / 2 : parent.Width / 2 - agencyTrackingLabel.Width / 2),
        Constraint.RelativeToView(previousView, (parent, sibling) => 
        {

            if (parent.Width > 640)
            {
                return launchTrackingLabel.Y;
            }
            else
            {
                return sibling.Y + sibling.Height + 10;
            }
        }));

    if (Context.TrackedAgency.Any())
    {
        relativeLayout.Children.Add(trackedAgenciesList,
            Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 * 3 - trackedAgenciesList.Width / 2 : parent.Width / 2 - trackedAgenciesList.Width / 2),
            Constraint.RelativeToView(agencyTrackingLabel, (parent, sibling) => sibling.Y + sibling.Height + 10),
            Constraint.RelativeToParent(parent =>
            {
                if (parent.Width > 1100)
                {
                    return parent.Width / 3;
                }
                else if (parent.Width > 640)
                {
                    return parent.Width / 2;
                }
                else
                {
                    return parent.Width;
                }
            }));
    }
    else
    {
        relativeLayout.Children.Add(noAgenciesTrackedLabel,
            Constraint.RelativeToParent(parent => parent.Width > 640 ? parent.Width / 4 * 3 - noAgenciesTrackedLabel.Width / 2 : parent.Width / 2 - noAgenciesTrackedLabel.Width / 2),
            Constraint.RelativeToView(agencyTrackingLabel, (parent, sibling) => sibling.Y + sibling.Height + 10));
    }

    Content = new ScrollView
    {
        Padding = 10,
        Content = relativeLayout
    };
}
Sign In or Register to comment.