Xamarin MasterDetailPage has large margin/padding at top

Xamarin MasterDetailPage with content.When creating an app the uses a MasterDetailPage as the root Page, you might sometimes find that you've got a large set of padding at the top of all your pages with seemingly no way to remove it.

Okay so this is what you're currently doing or something similar... In your app page, you have something like this:

Application.Current.MainPage = new NavigationPage(new MainPage());

And in your MasterDetailPage within the onSelected handler of the menu, you set your pages to also use NavigationPage like this:

Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));

That works fine; it loads new pages and seems to flow correctly. Until...

What's that space at the top coming from? Is that padding or what?

So you try setting it to hide the navigation bar using this:

NavigationPage.SetHasNavigationBar(this, false);

But that doesn't solve your issue, what's going on?

So it all comes back to the first line of code we mentioned, Your MasterDetailPage should not be wrapped with a NavigationPage when you set it as the MainPage, it should look like this:

Application.Current.MainPage = new MainPage();


Also, make sure you remove any line you find that removes the navigation bar for content pages, like the one above that uses SetHasNavigationBar, as this will hide the bar you do want.

Now your issue should be solved. Congrats. It'll now look something like the image on the right. As you can see there is no longer any padding at the top pushing all the content down.

For some useful example code check this example project out, it might not run as it's a fairly old project and the NuGet packages are out of date, but the example code is still very relevant and works well: https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/

Edit: For more information, see this useful post on the Xamarin forums: https://forums.xamarin.com/discussion/comment/185322/#Comment_185322 

 


Published at

Tags: Xamarin,Xamarin Forms

Luke Alderton

Comments

Kris Adams TV
Excellent! Thanks.
26/03/2017
Pablo
Thanks!!
26/10/2017
Daler
Thanks mate! U made my day! Was wondering where that padding came from ))
03/12/2018
Zal
For those who are confused where to add the line "NavigationPage.SetHasNavigationBar(this, false);" put it in MasterDetailPage.cs. Was confused where to add this ambiguous line of code, then it finally hit me that MasterDetailPage is a NavigationPage. Works like a charm
07/02/2019
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Alexander Gontar on Xamarin Forms - Working with threads
13 Mar 2020, 07:10 AM
By Arthur Richardson on Disabling XAML Hot Reload
12 Mar 2020, 17:52 PM
By George on Xamarin Forms - Working with threads
10 Mar 2020, 05:04 AM
By Darío on Xamarin forms - Stop/Cancel back button event
1 Mar 2020, 03:00 AM
By Benjamin Roberts on Simple fix for 'Cannot bind source type Umbraco.Web.Models.RenderModel to model type xx'
17 Feb 2020, 19:45 PM
By Chris Boot on Xamarin Forms multiple instances of same app open
26 Jan 2020, 17:10 PM
By Hannah on Xamarin forms - Stop/Cancel back button event
14 Jan 2020, 02:28 AM
By SK on Xamarin forms - Stop/Cancel back button event
14 Dec 2019, 02:06 AM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development