Xamarin MasterDetailPage looks ugly

Question

I'm trying to create a MasterDetailPage and I am not quite sure, if I am doing that right, but the drawer / master just looks ugly. For example, the navigation bar color is not showing, ...:

Any ideas / tips on how to improve it?

Answer 1

You can use fragment activity to apply to easily ways of master page in drawerlayout applied to master page and drawerlayout in applied in layout you will dragon customize and action event of common class

Answer 2

MasterDetailPage Information

Before we jump into the answer, let's go over the MasterDetailPage class and how the MasterDetailPage is configured in your example.

The MasterDetailPage class in Xamarin.Forms requires two Page properties:

• MasterDetailPage.Detail property needs to be set to a NavigationPage containing a ContentPage instance.

• MasterDetailPage.Master property needs to be set to a ContentPage instance

The Detail page in your example is on the right side of the screen. The Detail page is a ContentPage inside of a NavigationPage with NavigationPage.BarBackgroundColor set to Color.Black. The ContentPage inside of this NavigationPage has ContentPage.BackgroundColor set to Color.Grey.

The Master page in your example is on the left side of the screen. It is a ContentPage that contains a ListView. Without knowing your code, my guess is that the ContentPage.BackgroundColor is set to Color.White and the the ListView.BackgroundColor is not set.

The Navigation Bar is being covered when you select the Navigation Drawer icon. This is happening because the Navigation Bar is on the Detail page, and not on the Master page.

Answer To Your Question

Why is the Navigation Bar Color not showing on the Master page?

The Master page can only be a ContentPage and it can not be inside of a NavigationPage, therefore it does not have a Navigation Bar (only a NavigationPage can have a Navigation Bar).

How Can I Improve the UI?

First, verify that you are on the latest version of Xamarin.Forms, v2.3.2.127.

iOS

On iOS, you can mimic the Detail page's Navigation Bar color by setting the Padding property of the Master page & setting the Master page BackgroundColor property to Color.Black like so:

Master = new ContentPage
{
  BackgroundColor = Color.Black,
  Padding = new Thickness(0, Device.OnPlatform(64, 0, 0), 0, 0)
};

Android

On Android, the expected behavior is to have the Master page slide in from the left and cover the Detail page. To update the Android UI, I recommend updating one of the three following items: the Master.BackgroundColor property, the ListView.BackgroundColor property or the color of the icons used in the ListView on the Master page.

If you don't want the Navigation Bar to shift right, you can extend FormsApplicationActivity in the Android MainActivity class, which will prevent the Navigation Bar from moving:

public class MainActivity : Xamarin.Forms.Platform.Android.FormsApplicationActivity

This sample shows that the NavigationBar does not slide over on an Android app when you use FormsApplicationActivity:

https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/