Forum Xamarin.Forms

MasterDetailPage, MVVMLight Navigation and MaterialDesign: strange behaviors

Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

Hello,

I work on a Xamarin.Forms project with MVVMLight, where the main page must been a MasterDetailPage.

I use the Navegar package that allows to manage easily a ViewModel first navigation:
https://nuget.org/packages/Navegar/
https://github.com/mplessis/navegar

I have also read the article of James Montemagno to apply the Material Design for Android:
https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/
https://github.com/jamesmontemagno/Hanselman.Forms

I tried to follow the tutorial and the sample.

=> in the Portable project, for the MasterDetailPage:

The MasterDetailPage has a dictionnary that contains the pages and the associated menu item that will be linked to the Detail page:

public RootPage()
{
    Pages = new Dictionary<MenuType, NavigationPage>();
    Master = new MenuPage(this);

    BindingContext = new BaseViewModel
    {
        Title = "Test",
        Icon = "hamburger.png"
    };
    //setup home page
    NavigateAsync(MenuType.Item1);

    InvalidateMeasure();
}

The NavigateAsync() method creates a customized NavigationPage for each page of the MasterDetailPage:

public async Task NavigateAsync(MenuType id)
{
    Page newPage;
    if (!Pages.ContainsKey(id))
    {
        switch (id)
        {
            case MenuType.Item1:
                Pages.Add(id, new DNNavigationPage(new LoginPage(id)));
                break;
            case MenuType.Item2:
                Pages.Add(id, new DNNavigationPage(new LoginPage(id)));
                break;
            case MenuType.Item3:
                Pages.Add(id, new DNNavigationPage(new LoginPage(id)));
                break;
            //...
        }
    }
    newPage = Pages[id];
    if (newPage == null)
        return;
    //...
    Detail = newPage;
    //...
}

This allows me to specify colors of this NavigationPage:

public class DNNavigationPage : NavigationPage
{
    public DNNavigationPage(Page root) : base(root)
    {
        Init();
    }
    public DNNavigationPage()
    {
        Init();
    }
    void Init()
    {
        BarBackgroundColor = Color.FromHex("#2D3540");
        BarTextColor = Color.White;
    }
}

=> in the Android project:

I've created the new theme by adding new files that containing the style's properties: "Resources/values/colors.xml", "Resources/values/style.xml" and "Resources/values-v21/style.xml"

Then I've applied the theme in the AndroidManifest file by adding: android:theme=”@style/MyTheme”

I've customized the Toolbar and Tabs by adding 2 axml files: "Resources/layout/tabs.axml" and "Resources/layout/toolbar.axml".

Finally I've replaced the "FormsApplicationActivity" by "FormsAppCompatActivity" in the "MainActivity.cs", and I've specified the toolbar and tabs layout.

public class MainActivity : FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        FormsAppCompatActivity.ToolbarResource = Resource.Layout.toolbar;
        FormsAppCompatActivity.TabLayoutResource = Resource.Layout.tabs;

        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
    }
}

=> use of Navegar:

By default, I basically specify the "MainPage" in the "App.cs" with:
MainPage = new RootPage();

But, for using Navegar, I must specify the start page of the app as the first NavigationPage: so the page is registered in the navigation stack as the entry of this app:
MainPage = (NavigationPage)ServiceLocator.Current.GetInstance<INavigation>().InitializeRootFrame<RootPageViewModel, RootPage>();

=> the results without Navegar:

  • when I use FormsApplicationActivity, the app builds correctly and rendering is that of a "classical" Android app:

  • when I use FormsAppCompatActivity, the app builds correctly and rendering is that of a "Material Design" Android app:

=> the results with Navegar:

  • when I use FormsApplicationActivity, I get an exception in "MainActivity.cs":

  • when I use FormsAppCompatActivity, there are 2 cases:

  1. if the Android OS version < 21: the app builds correctly and rendering is that of a "Material Design" Android app:

  2. if the Android OS version >= 21: I have a white gap between the Detail page and the toolbar:

=> How to explain these behavior differences?
=> Why Navegar causes an exception if I use FormsApplicationActivity, but not if I use FormsAppCompatActivity?
=> Is there an alternative to Navegar for manage a ViewModel first navigation with the MasterDetailPage?

Thank you in advance for your feedback.

Posts

Sign In or Register to comment.