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 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/

这篇关于Xamarin MasterDetailPage看起来很丑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！