Bug 55939 - Layout problems with MasterDetail View in UWP
Summary: Layout problems with MasterDetail View in UWP
Alias: None
Product: Forms
Classification: Xamarin
Component: Windows ()
Version: 2.3.5
Hardware: All Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2017-05-03 23:32 UTC by Mark Radcliffe
Modified: 2017-06-23 18:17 UTC (History)
3 users (show)

Tags: masterdetailpage, mdp, margin, detail, ac, uwp
Is this bug a regression?: ---
Last known good build:

Zip of a project that shows the issue on Windows 10 Mobile (6.25 MB, application/x-7z-compressed)
2017-05-05 05:50 UTC, Mark Radcliffe

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report for Bug 55939 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:

Description Mark Radcliffe 2017-05-03 23:32:28 UTC
This is requried to make the layout work in UWP for the current stable and the current pre and quite a few prior.

        internal class MDPageView : MasterDetailPage
            public MDPageView()
                Master.SizeChanged += Master_SizeChanged;

            private void Master_SizeChanged(object sender, EventArgs e)
                if (Master.Height == Height && Device.RuntimePlatform == Device.UWP)
                    // HACK THIS AS IT SHOULDN'T BE EQUAL... BUG!
                    Master.Padding = new Thickness(0, 0, 0, 48);
                    Detail.Padding = new Thickness(0, 0, 0, 48);
                else if (Master.Height != Height && Device.RuntimePlatform == Device.UWP)
                    Master.Padding = new Thickness(0, 0, 0, 0);
                    Detail.Padding = new Thickness(0, 0, 0, 0);

The height of the Master "page" and the Detail "page" are incorrectly set to be -48 from the Main page which is the height of the master detail bar in UWP.

On mobile when the view is first rendered the heights are correct. On IsPresented change the size of the master and detail pages are set to the size of the masterdetail page and some (size 48) of the content ends up off page.

On Desktop the situation is a little different where the size is initially wrong then the change of ispresented fixes the layout.
Comment 1 Paul DiPietro [MSFT] 2017-05-04 13:51:18 UTC
Can you upload a reproduction project to better explain the issue? If this is a regression, are you aware of when it specifically started?
Comment 2 Mark Radcliffe 2017-05-04 20:51:54 UTC
Hi Paul, it has always been this way that I have witnessed. It happens on ALL masterdetail pages for UWP.
Comment 3 Mark Radcliffe 2017-05-05 05:50:54 UTC
Created attachment 21966 [details]
Zip of a project that shows the issue on Windows 10 Mobile

The IsPresented being two way bound seems to cause it. If it isn't bound and is instead just set to true or false on startup of the view it doesn't occur.

The same issue with slightly different symptops are on UWP Desktop too.
Comment 4 Mark Radcliffe 2017-05-05 05:52:34 UTC
The test page that shows up should have a margin (white section) of 20 all the way around both the Master and the Detail page.

When the view first loads, it shows the right layout, but on IsPresented change the master and detail sub pages both increase in size by the size of the masterdetail header bar. (48).

UWP Desktop is slightly different but it is all related to the IsPresented being bound.
Comment 5 Mark Radcliffe 2017-05-05 05:56:42 UTC
Ok seems like I had some caching issues, the ispresented binding doesn't always make a difference. so there is some other issue on the timing perhaps of the view rendering.
Comment 6 Paul DiPietro [MSFT] 2017-06-16 16:39:47 UTC
It seems like against the latest nightly that the detail is what's being affected in terms of the detail's bottom margin running to the bottom of the page. For upkeep I'll set this to confirmed for now until further investigation.