Xamarin.Forms Pages are merging together

Question

When I navigate to a new page, adding it to the stack, if it is not full height of the page, it shows part of that page and part of the previous page (like a modal). I have a Xamarin.Forms app which uses a master detail page. I have upgraded to Xamarin.Forms Nuget 2.3.3.168 and am on the latest Xamarin version for Visual Studio.

I also checked the Navigation stack when going to a new page and everything looks correct. I have 1 master page which is the menu and the detail page has a navigation page with more pages in the stack, they just display partially on top of each other.

The only other thing I have changed is when I needed to initialize my App() constructor by setting the MainPage to a new MasterDetail page because it was failing if I did not do that in the constructor for Android. Any ideas?

Here is my App.cs:

   public App()
        {
            InitializeComponent();

            var masterDetailPage = new MasterDetailPage
            {
                Master = new Page() { Title = "Title" },
                Detail = new Page(),
                IsPresented = false
            };

            App.Current.MainPage = masterDetailPage;
        }

Then, when I figure out if the user is logged in or not, I reset the master detail page with this function:

  public static void SetMainPage(Page newPage)
        {
            var rootPage = new NavigationPage(newPage) { BarBackgroundColor = Color.White};

            _nav.Initialize(rootPage);
            _dialogService.Initialize(rootPage);

            App.Current.MainPage = new MasterDetailPage
            {
               Master = new Menu(),
                Detail = rootPage,
                BindingContext = new MowMagicMobileViewModelBase(),
                IsPresented = false
            };
        }

Then from there I call Navigation PushAsync() to pop a page onto the stack.

Answer 1

Wow it was actually that I just did not set a background color at all. I guess if you do not explicitly set it for the page it is transparent, unless that gets inherited from somewhere?

Answer 2

I dont know if its the solution but i have masterdetail page too.. But my page is like this

Master = new MenuPage();// it is a content page 
Detail = new NavigationPage(new HomePage());

try it to see

If you want to change background i did sth like that

public class NavigationPageBase:NavigationPage
{
    public NavigationPageBase (ContentPage c):base(c)
        {
            /*if (c.GetType().Equals(typeof(LoginPage)))
                SetHasNavigationBar(c, false);
            else
                SetHasNavigationBar(c, true);*/
            SetHasNavigationBar(c, true);
            BarBackgroundColor = Styles.toolbarColor;
            BackgroundColor = Styles.bgPageColor;
        }
}

and for detailpage you can use it for example like

Detail = new NavigationPageBase (new HomePage ());

And from your App() constructor you can do simply

MainPage = new MyMasterDetailPage();

Hope it helps