android - Xamarin MasterDetailPage 看起来很难看

Question

我正在尝试创建一个 MasterDetailPage，但我不太确定我是否做对了，但是抽屉/母版看起来很难看。例如，导航栏颜色未显示，...:

关于如何改进它的任何想法/提示？

Answer 1

MasterDetailPage 信息

在我们跳到答案之前，让我们回顾一下 MasterDetailPage 类以及如何在您的示例中配置 MasterDetailPage。

Xamarin.Forms 中的 MasterDetailPage 类需要两个 Page 属性:

• MasterDetailPage.Detail 属性需要设置为包含 ContentPage 实例的 NavigationPage。

• MasterDetailPage.Master 属性需要设置为 ContentPage 实例

示例中的详细信息 页面位于屏幕右侧。 Detail 页面是 NavigationPage 内的 ContentPage，NavigationPage.BarBackgroundColor 设置为 Color.Black 。此 NavigationPage 内的 ContentPage 将 ContentPage.BackgroundColor 设置为 Color.Grey。

示例中的 Master 页面位于屏幕左侧。它是一个包含 ListView 的 ContentPage。在不知道您的代码的情况下，我的猜测是 ContentPage.BackgroundColor 设置为 Color.White 而 ListView.BackgroundColor 未设置。

当您选择抽屉导航图标时，导航栏将被覆盖。这是因为导航栏在 Detail 页面上，而不是在 Master 页面上。

回答你的问题

为什么 Master 页面上没有显示导航栏颜色？

Master 页面只能是ContentPage，不能在NavigationPage 内，因此它没有导航栏(只有 NavigationPage 可以有导航栏)。

如何改进用户界面？

首先，确认您使用的是最新版本的 Xamarin.Forms，v2.3.2.127。

iOS

在 iOS 上，您可以通过设置 Master 页面的 Padding 属性和设置 来模仿 Detail 页面的导航栏颜色>Master 页面 BackgroundColor 属性设置为 Color.Black，如下所示:

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

安卓

在 Android 上，预期的行为是让 Master 页面从左侧滑入并覆盖 Detail 页面。要更新 Android UI，我建议更新以下三项之一:Master.BackgroundColor 属性、ListView.BackgroundColor 属性或在Master 页面上的 ListView。

如果不希望导航栏向右移动，可以在Android MainActivity 类中扩展FormsApplicationActivity，这将阻止导航栏移动:

公共(public)类 MainActivity:Xamarin.Forms.Platform.Android.FormsApplicationActivity

此示例显示当您使用 FormsApplicationActivity 时，NavigationBar 不会在 Android 应用程序上滑过:

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