Forum Xamarin.Forms

MasterDetail Page customizing the style (BarBackgroundColor, BarTextColor..) for each Content Page ?

WildSalmonWildSalmon FRMember ✭✭
edited July 2015 in Xamarin.Forms

Hello,

I'm new to Xamarin.Forms, I'm using a MasterDetail Page which works fine in my app. Problem is, I'd like each Detail Page to have its own style : considering BarBackgroundColor, BarTextColor...
I had a look at possible ways to solve my problem on the Internet and I dwelt on this interesting post.
It points at the fact that :

"One page that you’ll have some problems with is MasterDetailPage. I don’t see how you can set the BarBackgoundColor or the BarTextColor for the MasterDetail unless you set every Navigation Page inside it. For MasterDetailPage and all the other pages in your application, you can use a custom Android theme instead."

So far, I still run into some issues...

I tried the following solutions :

1. Navigate from the Master Page to a Detail Page which aims a NavigationPage type
The navigation does not succeed and I get this output : "System.Exception: Android only allows one navigation page on screen at a time". I do understand that my Master Page is already a NavigationPage but I don't think I can change this type or I'll lost all the functionalities of the MasterDetailPage...
I wonder if I could pass through this issue with some async methods waiting for my Master to be gone (but I guess, it's never really gone as we can go back to it at anytime by sliding or tapping)... I might not be thinking in the right way as I'm new to this.

Here's how my navigation works (it comes from the sample) :

public class RootPage : MasterDetailPage
    {
        MenuPage menuPage;


        public RootPage ()
        {
            menuPage = new MenuPage ();
            menuPage.Menu.ItemSelected += (sender, e) => NavigateTo (e.SelectedItem as MenuItem);
            Master = menuPage;
            Detail = new NavigationPage (new MainView ());
        }

        void NavigateTo (MenuItem menu)
        {
            if (menu == null)
                return;

            Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);

            Detail = new NavigationPage (displayPage);

            menuPage.Menu.SelectedItem = null;
            IsPresented = false;
        }
    }

2. Apply custom themes for each Detail Page
As the previous post I pointed at shows, we can create a custom theme which aims all the Content Pages we access through MasterDetail navigation. The problem is I want to set a custom theme for each ContentPage. I've been fighting with this for the last three days, I can't find any solution to do so.
I tried to do a custom renderer like this :

[assembly: ExportRenderer(typeof(myContentPage), typeof(App1.Droid.ContentPageRenderer))]
namespace App1.Droid
{
    public class ContentPageRenderer : PageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);

            //??? Can I set up my custom style right here ? -With an XML style file created in Resources 
    //(I'm using a crossplatform PCL project - the "values" folder does not exist in my Android App)

        }
    }
}

What's the best I can do ?
Thanks in advance, have a nice day (or night) !

Posts

  • CheesebaronCheesebaron DKInsider, University mod

    I suggest you ask in the Xamarin.Forms forum instead :smile:

  • WildSalmonWildSalmon FRMember ✭✭

    Well, I will do so. I wondered a few minutes in which one it would suit the most... I know it is related to Xamarin.Forms, but it is specific to the Android platform too... Haha
    Thank you anyway ! Cheese

  • WildSalmonWildSalmon FRMember ✭✭

    I solved my issue, if anyone needs some help on this...just tell me.

  • Hi @VincentBothorel . Could you please tell me what you ended up doing? I am sitting with the exact same issue.

  • WildSalmonWildSalmon FRMember ✭✭
    edited November 2015

    Hello @UwanPretorius ! It has been a long time since I didn't use Xamarin...but if I do remember well, here's what you need.

    When you create your new NavigationPage, you simply use ->
    Page displayPage = new NavigationPage()
    {
    BarBackgroundColor = ...
    WhateverYouWant = ...
    };
    Hope it is what you were looking for! If not, please be more precise on what's needed :wink:

    Cheers

Sign In or Register to comment.