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

Question

Hello I am new to Xamarin Development and I am currently working on PCL project. I did implementation of the Navigation drawer using MasterDetailsPage concept. It is working fine. But issue I am facing is that MasterDetailsPage is coming with the Blue Color Actionbar and menu icon to open/close navigation drawer.I need to override it with black color. Kindly suggest something. I have mentioned the code I am currently using. Also, there is whitespace appearing, I want get rid of it. On below URl they have mentioned some ways, as I am new to this not able to write the CustomRenderer for each platform. https://forums.xamarin.com/discussion/comment/244966/#Comment_244966

Please giude me how to write a customrenderer to remove that white space as well as change color of toolbar.

Code:

My XAML File :

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

and my class file is :

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;
        }
    }
}

Guys please help me to resolve this. Any sample code or working tutorial will be helpful. Thanks in advance!!

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.

You do not need to do customer render to change the ActionBar color try to use

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

there is whitespace appearing

I did not reproduce your issue, my master detail page works fine without write line. You can refer to my project.

by checking the answer of the link you provide. I have created a customer render of MarstDetialPage at android project:

[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);
        }
    }
}

It will get screen without notification bar.

Note: I have only test it on the android platform