Xamarin MasterDetailPage 看起来很难看

Xamarin MasterDetailPage looks ugly

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

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

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 drag customize and action event of common class

MasterDetailPage 信息

在我们进入答案之前,让我们回顾一下 MasterDetailPage class 以及 MasterDetailPage 在您的示例中是如何配置的。

MasterDetailPage class in Xamarin.Forms 需要两个 Page 属性:

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

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

示例中的 Detail 页面位于屏幕右侧。 Detail 页面是 NavigationPage 内部的 ContentPageNavigationPage.BarBackgroundColor 设置为 Color.Black。此 NavigationPage 中的 ContentPage 已将 ContentPage.BackgroundColor 设置为 Color.Grey

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

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

回答您的问题

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

Master页面只能是ContentPage,不能在NavigationPage里面,所以没有导航栏(只有NavigationPage 可以有一个导航栏)。

如何改进 UI?

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

iOS

在 iOS 上,您可以模仿 Detail 页面的导航栏颜色,方法是设置 Master 页面的 Padding 属性 并设置 MasterBackgroundColor 属性 到 Color.Black 像这样:

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

Android

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

如果不希望Navigation Bar向右移动,可以在Android MainActivity class中扩展FormsApplicationActivity,这样Navigation Bar不会右移来自移动:

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

此示例显示当您使用 FormsApplicationActivity:

时,导航栏不会在 Android 应用程序上滑过

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