Xamarin MasterDetailPage看起来很丑 [英] Xamarin MasterDetailPage looks ugly
问题描述
我正在尝试创建一个MasterDetailPage,但我不确定这样做是否正确,但是抽屉/主菜单看起来很难看.例如,导航栏颜色未显示,...:
关于如何改进它的任何想法/提示?
MasterDetailPage信息
在进入答案之前,让我们回顾一下MasterDetailPage
类以及示例中MasterDetailPage
的配置方式.
Xamarin.Forms中的MasterDetailPage
类需要两个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
.
当您选择导航抽屉"图标时,导航栏将被覆盖.发生这种情况的原因是导航栏位于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
在Android上,预期的行为是使Master
页面从左侧滑入并覆盖Detail
页面.要更新Android UI,我建议更新以下三个项目之一:Master.BackgroundColor
属性,ListView.BackgroundColor
属性或Master
页面上ListView中使用的图标的颜色.
如果您不希望导航栏向右移动,则可以在Android MainActivity
类中扩展FormsApplicationActivity
,这将阻止导航栏移动:
public class MainActivity : Xamarin.Forms.Platform.Android.FormsApplicationActivity
此示例显示,当您使用FormsApplicationActivity
时,导航栏不会在Android应用程序上滑过:
https://developer.xamarin.com/samples/xamarin-表格/导航/MasterDetailPage/
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?
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 aNavigationPage
containing aContentPage
instance.MasterDetailPage.Master
property needs to be set to aContentPage
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/
这篇关于Xamarin MasterDetailPage看起来很丑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!