Tabbed page as Master in MasterDetailPage on iOS

ShinjiriusShinjirius Member ✭✭

Hi,

I got a problem with using a TabbedPage inside MasterDetail navigation.

What i am trying to do:

I am trying to make an app that uses a TabbedPage as the Master in a MasterDetailPage.
The master behaviour is set to MasterBehavior.SplitOnLandscape.

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TabTest
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            // Contruct tabbed page to use as master
            TabbedPage tabbedMasterPage = new TabbedPage() { Title = "Title of master", Icon="AppIcon"};
            tabbedMasterPage.Children.Add(new NavigationPage(new ContentPage() { Title = "Tab1", BackgroundColor = Color.Red}) { Title = "Red" }); 
            tabbedMasterPage.Children.Add(new NavigationPage(new ContentPage() { Title = "Tab2", BackgroundColor = Color.Green }) { Title = "Green" });
            tabbedMasterPage.Children.Add(new NavigationPage(new ContentPage() { Title = "Tab3", BackgroundColor = Color.Blue }) { Title = "Blue" });
            tabbedMasterPage.Children.Add(new NavigationPage(new ContentPage() { Title = "Tab4", BackgroundColor = Color.Yellow }) { Title = "Yellow"});
            tabbedMasterPage.Children.Add(new NavigationPage(new ContentPage() { Title = "Tab5", BackgroundColor = Color.Orange }) { Title = "Orange"});

            // Create master detail
            MasterDetailPage masterDetailPage = new MasterDetailPage() 
            { 
                Master = tabbedMasterPage,
                Detail = new NavigationPage(new ContentPage() { BackgroundColor = Color.Purple, Title = "Title of detail" }) { }
            };

            masterDetailPage.MasterBehavior = MasterBehavior.SplitOnLandscape;

            MainPage = masterDetailPage;
        }

        protected override void OnStart() { /* Handle when your app starts */ }

        protected override void OnSleep(){/* Handle when your app sleeps */}

        protected override void OnResume(){/* Handle when your app resumes */}
    }
}

Behaviour

  1. View master detail in portret => Master is folded in
  2. Rotate device to landscape => Master is folded out and tabbar is showing
  3. Rotate device to portrait => Master is folded in
  4. Rotate device to landscape =>Master is folded out, but given the wrong size so tabbar appears outside of viewable area

Explanation

I tried to combat this by using a custom renderer that detects the size change of the rotation,an manually tries to set the size but it did not seem to help. This behaviour does not occur when the user manually opens the masterpage using the icon before rotating.

Does anybody here know if this is a known bug? And is there a solution for it?

P.S. I made screenshots of the situation but I can't post them since I can't post links yet.

Sign In or Register to comment.