how to get rid of MasterDetailPage empty space Xamarin Forms

Question

I have a problem with my project, I'm using MasterDetailPage with a simple ListView and using a local namespace to call another page inside of him with a ListView too, and have THIS result, the problem is, that white space between the toolbar and the listview, but if I try to navigate for this very page without using the MasterDetailPage, the listview works fine without this white space, and you check HERE

App.cs navigates to MenuPage.Xaml

MainPage = new NavigationPage(new MenuPage());

MenuPage.XAML

`<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Gone.MenuPage"
             xmlns:local="clr-namespace:Gone;assembly=Gone">
  <MasterDetailPage.Master>
    <ContentPage Title="Menu">
      <ListView BackgroundColor="Transparent"
                SeparatorVisibility="Default"
                HasUnevenRows="True"
                x:Name="listView">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout Padding="2" Orientation="Horizontal">
                <Image Aspect="Fill" WidthRequest="60" HeightRequest="60" Source="{Binding image}"/>
                <StackLayout Padding="5,18,0,0" Orientation="Vertical">
                  <Label TextColor="Black" Text="{Binding title}"/>
                </StackLayout>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </ContentPage>
  </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
    <local:MainPage/>
  </MasterDetailPage.Detail>
</MasterDetailPage>`

MainPage.Xaml

    <ListView BackgroundColor="Transparent"
              SeparatorVisibility="Default"
              HasUnevenRows="True"
              x:Name="listView">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Orientation="Horizontal">
            <Image Aspect="AspectFill" WidthRequest="130" HeightRequest="130" Source="{Binding image}"/>
            <StackLayout Padding="20" Orientation="Vertical">
              <Label LineBreakMode="WordWrap" FontSize="17" TextColor="#4CAF50" Text="{Binding title}"/>
              <Label FontAttributes="Bold" TextColor="#2962FF" Text="{Binding price}"/>
              <Label TextColor="#455A64" Text="{Binding date}"/>
            </StackLayout>
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

Answer 1

A temporary solution is Creating a CustomMasterDetailRenderer in your Android Project:

[assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailRenderer))]
namespace Your.Name.Space
{
    public class CustomMasterDetailRenderer : MasterDetailPageRenderer
    {
        public override void AddView(Android.Views.View child)
        {
            child.GetType().GetRuntimeProperty("TopPadding").SetValue(child, 0);
            var padding = child.GetType().GetRuntimeProperty("TopPadding").GetValue(child);

            base.AddView(child);
        }
    }
}

Maybe is needed set Padding 0 in your view .

Thanks to Sylvia Martinez: https://forums.xamarin.com/discussion/comment/244966/#Comment_244966

Answer 2

This happens if you use MasterDetailPage with NavigationPage.

Don't declare MasterDetailPage as new NavigationPage(new MasterDetailPage()).

Instead declare MasterDetailPage as var masterDetailPage = new MasterDetailPage(). After that use masterDetailPage.Detail = new NavigationPage(new ContentPage());

So if you have navigation both through masterDetail and navigation, you will come up with several NavigationPages. And you won't be able to use just Navigation.PushAsync(somePage). Instead of it you will have to use the current NavigationPage instance like: ((NavigationPage)(this.Detail)).PushAsync(new ContentPage());