如何更改 Xamarin.Forms 中 MasterDetailPage Actiobar 的背景颜色，这将反映在所有平台上？

Question

您好，我是 Xamarin Development 的新手，目前正在从事 PCL 项目。我使用 MasterDetailsPage 概念实现了导航抽屉。它工作正常。但我面临的问题是 MasterDetailsPage 带有蓝色操作栏和 open/close 导航菜单图标 drawer.I 需要用黑色覆盖它。请提出一些建议。我已经提到了我目前正在使用的代码。另外，出现白色space，我想摆脱它。在下面 URl 他们提到了一些方法，因为我是新手，无法为每个平台编写 CustomRenderer。 https://forums.xamarin.com/discussion/comment/244966/#Comment_244966

请告诉我如何编写一个 customrenderer 来删除白色 space 以及更改工具栏的颜色。

代码：

我的 XAML 文件：

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WYH_XAMARIN.MasterDetailPageNavigation"
             x:Class="WYH_XAMARIN.MasterDetailPageNavigation.NavigationDrawerPage">

  <MasterDetailPage.Master>
    <ContentPage Title="Menu"
                 BackgroundColor="#e8e8e8">

      <StackLayout Orientation="Vertical">

        <!-- 
             This StackLayout you can use for other
             data that you want to have in your menu drawer
        -->
        <StackLayout BackgroundColor="#e74c3c"
                     HeightRequest="75">

          <Label Text="Some Text title"
                 FontSize="20"
                 VerticalOptions="CenterAndExpand"
                 TextColor="White"
                 HorizontalOptions="Center"/>
        </StackLayout>

        <ListView x:Name="navigationDrawerList"
                  RowHeight="60"
                  SeparatorVisibility="None"
                  BackgroundColor="#e8e8e8"
                  ItemSelected="OnMenuItemSelected">

          <ListView.ItemTemplate>
            <DataTemplate>
              <ViewCell>

                <!-- Main design for our menu items -->
                <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="20,10,0,10"
                             Spacing="20">

                  <Image Source="{Binding Icon}"
                         WidthRequest="40"
                         HeightRequest="40"
                         VerticalOptions="Center" />

                  <Label Text="{Binding Title}"
                         FontSize="Medium"
                         VerticalOptions="Center"
                         TextColor="Black"/>
                </StackLayout>
              </ViewCell>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
      </StackLayout>

    </ContentPage>
  </MasterDetailPage.Master>

  <MasterDetailPage.Detail>

    <NavigationPage>

    </NavigationPage>
  </MasterDetailPage.Detail>
</MasterDetailPage>

我的 class 文件是：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WYH_XAMARIN.PojoClasses;
using Xamarin.Forms;

namespace WYH_XAMARIN.MasterDetailPageNavigation
{
    public partial class NavigationDrawerPage : MasterDetailPage
    {
        LoginSuccessfullResponse loginSuccessResponse;
        public List<MasterPageItem> menuList { get; set; }

        public NavigationDrawerPage()
        {

            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);

            menuList = new List<MasterPageItem>();

            // Creating our pages for menu navigation
            // Here you can define title for item, 
            // icon on the left side, and page that you want to open after selection
            var page1 = new MasterPageItem() { Title = "My Profile", Icon = "icon.png", TargetType = typeof(TestPage1) };
            var page2 = new MasterPageItem() { Title = "Service Booking", Icon = "icon.png", TargetType = typeof(TestPage2) };
            var page3 = new MasterPageItem() { Title = "Item 3", Icon = "icon.png", TargetType = typeof(TestPage3) };

            // Adding menu items to menuList
            menuList.Add(page1);
            menuList.Add(page2);
            menuList.Add(page3);

            // Setting our list to be ItemSource for ListView in MainPage.xaml
            navigationDrawerList.ItemsSource = menuList;

            // Initial navigation, this can be used for our home page
            Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(TestPage1)));
        }

        public NavigationDrawerPage(LoginSuccessfullResponse loginSuccessResponse)
        {
            this.loginSuccessResponse = loginSuccessResponse;

            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);

            menuList = new List<MasterPageItem>();

            // Creating our pages for menu navigation
            // Here you can define title for item, 
            // icon on the left side, and page that you want to open after selection
            var page1 = new MasterPageItem() { Title = "My Profile", Icon = "icon.png", TargetType = typeof(TestPage1) };
            var page2 = new MasterPageItem() { Title = "Service Booking", Icon = "icon.png", TargetType = typeof(TestPage2) };
            var page3 = new MasterPageItem() { Title = "Item 3", Icon = "icon.png", TargetType = typeof(TestPage3) };

            // Adding menu items to menuList
            menuList.Add(page1);
            menuList.Add(page2);
            menuList.Add(page3);

            // Setting our list to be ItemSource for ListView in MainPage.xaml
            navigationDrawerList.ItemsSource = menuList;

            // Initial navigation, this can be used for our home page
            Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(TestPage1)));
        }

        // Event for Menu Item selection, here we are going to handle navigation based
        // on user selection in menu ListView
        private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
        {

            var item = (MasterPageItem)e.SelectedItem;
            Type page = item.TargetType;

            Detail = new NavigationPage((Page)Activator.CreateInstance(page));
            IsPresented = false;
        }
    }
}

请各位大侠帮我解决一下。任何示例代码或工作教程都会有所帮助。提前致谢！！

Answer 1

But issue I am facing is that MasterDetailsPage is coming with the Blue Color Actionbar and menu icon to open/close navigation drawer.

您无需进行客户渲染即可更改 ActionBar 颜色尝试使用

Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(MainPage))) { BarBackgroundColor = Color.Red };

there is whitespace appearing

我没有重现您的问题，我的主详细信息页面在没有写入行的情况下工作正常。可以参考my project.

通过检查您提供的 link 的答案。我在 android 项目中创建了 MarstDetialPage 的客户渲染：

[assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailRenderer))]
namespace MasterDetialPage_MyTest.Droid
{
    public class CustomMasterDetailRenderer : MasterDetailPageRenderer
    {
        public override void AddView(Android.Views.View child)
        {
            child.GetType().GetRuntimeProperty("TopPadding").SetValue(child, 0);
            var padding = child.GetType().GetRuntimeProperty("TopPadding").GetValue(child);

            base.AddView(child);
        }
    }
}

会出现没有通知栏的画面

注意：我只在android平台上测试过

如何更改 Xamarin.Forms 中 MasterDetailPage Actiobar 的背景颜色，这将反映在所有平台上？

How to change background color of MasterDetailPage Actiobar in Xamarin.Forms which will reflect in all platforms?

xamarin.ios

xamarin.android

portable-class-library

xamarin.forms