UWP: Layout broken after Updating Xamarin Forms to 2.5: MasterDetail-Page inside TabbedPage

Stoni1978Stoni1978 Member ✭✭
edited January 2018 in Cross Platform with Xamarin

Hello,

after updating Xamarin Forms to 2.5.0.122203, we have problems with our MasterDetail-Pages in UWP. As our Project requires "navigatable tabs", we have a TabbedPage and inside each Tab, we put a NavigationPage with a MasterDetail-Page. You can easily recreate this, by creating an example Xamarin-Forms-Project (not shared!) and modify the MainPage like following, so it becomes a TabbedPage:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 
             x:Class="PlayGroundMDTabbedPage.MainPage"
            Title="Playground">
    <NavigationPage Title="Page1">
        <x:Arguments>
            <local:Page1 />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Page2">
        <x:Arguments>
            <local:MasterDetailPage1 />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

When you start the project, in UWP it seems, that the MasterDetail-Views are somehow collapsed. When we remove the NavigationPage, all is fine.On another platform, the layout is, what we expect to see.

The UWP issues arose after updating Xamarin Forms to v2.5. When we downgrade to v2.4, everything is working perfect in UWP. As we need "inside-tab-navigation", we cannot do without the NavigationPage. So my Question is: is this XamarinForms v2.5 intended behaviour? How can we fix the Layout in UWP?

Thank you very much in advance!
Regards, Ivo

Best Answer

  • Stoni1978Stoni1978 ✭✭
    edited January 2018 Accepted Answer

    I just found a workaround for this Problem by introducing a PageRenderer for all pages inside the MasterDetail-Page. The PageRenderer overrides LayoutMeasuring from the NavigationPage:

        /// <summary>
        /// Override messy-Layout-Adjustments of UWP + XF>2.5
        /// As we put a Master-Detail-Page in a Navigation Page
        /// this destroys the layout as XF measures height 0 -->
        /// so we override this and prevent measuring by the Navigationpage
        /// </summary>
        class ClientPageRenderer : PageRenderer
        {
            protected override Windows.Foundation.Size MeasureOverride(Windows.Foundation.Size availableSize)
            {            
                //--> base.MeasureOverride has to be called anyway!
                base.MeasureOverride(availableSize);
                //Prevent using MeasureOverride from NavigationPage as this delivers height 0!
                return new Windows.Foundation.Size(availableSize.Width, availableSize.Height);
            }
    
            protected override Windows.Foundation.Size ArrangeOverride(Windows.Foundation.Size finalSize)
            {
                //Rearrange Page and Child-Elements!
                foreach( var child in this.Children)
                {
                    child.Arrange(new Rect(0, 0, finalSize.Width, child.DesiredSize.Height));
                }
                return finalSize;
            }
        }
    

Answers

  • Stoni1978Stoni1978 Member ✭✭
    edited January 2018 Accepted Answer

    I just found a workaround for this Problem by introducing a PageRenderer for all pages inside the MasterDetail-Page. The PageRenderer overrides LayoutMeasuring from the NavigationPage:

        /// <summary>
        /// Override messy-Layout-Adjustments of UWP + XF>2.5
        /// As we put a Master-Detail-Page in a Navigation Page
        /// this destroys the layout as XF measures height 0 -->
        /// so we override this and prevent measuring by the Navigationpage
        /// </summary>
        class ClientPageRenderer : PageRenderer
        {
            protected override Windows.Foundation.Size MeasureOverride(Windows.Foundation.Size availableSize)
            {            
                //--> base.MeasureOverride has to be called anyway!
                base.MeasureOverride(availableSize);
                //Prevent using MeasureOverride from NavigationPage as this delivers height 0!
                return new Windows.Foundation.Size(availableSize.Width, availableSize.Height);
            }
    
            protected override Windows.Foundation.Size ArrangeOverride(Windows.Foundation.Size finalSize)
            {
                //Rearrange Page and Child-Elements!
                foreach( var child in this.Children)
                {
                    child.Arrange(new Rect(0, 0, finalSize.Width, child.DesiredSize.Height));
                }
                return finalSize;
            }
        }
    
Sign In or Register to comment.