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
内部的 ContentPage
,NavigationPage.BarBackgroundColor
设置为 Color.Black
。此 NavigationPage
中的 ContentPage
已将 ContentPage.BackgroundColor
设置为 Color.Grey
。
示例中的 Master
页面位于屏幕左侧。它是一个包含 ListView
的 ContentPage
。在不知道您的代码的情况下,我的猜测是 ContentPage.BackgroundColor
设置为 Color.White
而 ListView.BackgroundColor
未设置。
当您 select 导航抽屉图标时,导航栏被覆盖。这是因为导航栏在 Detail
页面上,而不是在 Master
页面上。
回答您的问题
为什么 Master
页面上没有显示导航栏颜色?
Master
页面只能是ContentPage
,不能在NavigationPage
里面,所以没有导航栏(只有NavigationPage
可以有一个导航栏)。
如何改进 UI?
首先,确认您使用的是最新版本 Xamarin.Forms,v2.3.2.127.
iOS
在 iOS 上,您可以模仿 Detail
页面的导航栏颜色,方法是设置 Master
页面的 Padding
属性 并设置 Master
页 BackgroundColor
属性 到 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/
我正在尝试创建一个 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
内部的 ContentPage
,NavigationPage.BarBackgroundColor
设置为 Color.Black
。此 NavigationPage
中的 ContentPage
已将 ContentPage.BackgroundColor
设置为 Color.Grey
。
示例中的 Master
页面位于屏幕左侧。它是一个包含 ListView
的 ContentPage
。在不知道您的代码的情况下,我的猜测是 ContentPage.BackgroundColor
设置为 Color.White
而 ListView.BackgroundColor
未设置。
当您 select 导航抽屉图标时,导航栏被覆盖。这是因为导航栏在 Detail
页面上,而不是在 Master
页面上。
回答您的问题
为什么 Master
页面上没有显示导航栏颜色?
Master
页面只能是ContentPage
,不能在NavigationPage
里面,所以没有导航栏(只有NavigationPage
可以有一个导航栏)。
如何改进 UI?
首先,确认您使用的是最新版本 Xamarin.Forms,v2.3.2.127.
iOS
在 iOS 上,您可以模仿 Detail
页面的导航栏颜色,方法是设置 Master
页面的 Padding
属性 并设置 Master
页 BackgroundColor
属性 到 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
:
https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/