Master Detail example

[toddams]

Is there an example of using Master Detail with xamvvm? I tried to do it myself, but no luck, thanks)

[datoml]

Hey :). Is there any example out for master detail?

Currently I managed to make the bare minimum running. This means the app is starting and I see the initial Detailpage with the BurgerMenu on top and I am able to open the MasterPage. I am currently struggling how to implement the navigation.

My example is based on the xamarin master detail page example, however I can't implement the navigation like they are doing.

Maybe you guys can help me out :).

[JoeM-RP]

@datoml - Stumbled across this problem myself for a client today and spent a good minute struggling with it. I have prepared a rudimentary example here

The core piece of setup requires three Models to operate:

public App()
{
    InitializeComponent();

    var factory = new XamvvmFormsFactory(this);
    XamvvmCore.SetCurrentFactory(factory);

    factory.RegisterNavigationPage<AppShellNavigationPageModel>(() => this.GetPageFromCache<MainPageModel>());
    factory.RegisterMasterDetail<AppShellModel>(
        () => this.GetPageFromCache<AppShellMasterPageModel>(),
        () => this.GetPageFromCache<AppShellNavigationPageModel>());

    MainPage = this.GetPageFromCache<AppShellModel>() as Page;
}

A few notes:

• I'm not sure it's the most efficient way to construct a MasterDetail. Haven't tried to pare it down to fewer Models
• I haven't quite figured out how to close the "drawer" once navigation occurs
• The Master page must set have a title set for this to work

...but otherwise it should suffice. I hope it helps!

[danielkatz]

Navigation under a MasterDetail looks even more challenging. According to @JoeM-RP's example, i have to know the VM of the current page in order to navigate. Is there a way to use the regular navigation extensions under MasterDetail? A MasterDetail example, complete with navigation demonstration would be very helpful @daniel-luberda.

[escamoteur]

It's on my List, sorry for you trouble

[daniel-luberda]

Xamvvm is very close to the pure Xamarin.Forms. Everything you can do with Xamarin.Forms, you can do with Xamvvm. There are few ways to achieve MasterDetail, I pushed one of which I prefer personally (gives me a lot of flexibility). @JoeM-RP also has a valid one (thanks). See this:

• SampleMasterDetailPage.cs
• SampleMasterDetailPageModel.cs
• SampleMasterDetailMenuPage.xaml
• SampleMasterDetailMenuPage.xaml.cs
• SampleMasterDetailMenuPageModel.cs

We could make some abstraction helper classes for that. But is it necessary? I'm not quite sure. What is your opinion?

One more thing. Master page must have a title set. It's a Xamarin.Forms limitation.

[marufbd]

Did you notice if the MasterDetail page is the home page, it shows duplicate action bar. Is that because xammvm is wrapping the main entry page into another Navigation page and MasterDetail is already a Navigation page.

I got rid of one of the action bar by this line in MasterDetail Contructor: NavigationPage.SetHasNavigationBar(this,false);

Is that the right way to achieve a home page as MasterDetail.

[JoeM-RP]

@marufbd and @danielkatz - I just updated my sample project based the assets @daniel-luberda provided. See full source here. In order to prevent nested navigation bars as you described, I compose my Master and Detail views from within the App Shell page, rather than using the navigation factory as proposed in my previous comment. So, from the constructor of AppShell.cs:

public AppShell()
{
            Master = this.GetPageFromCache<MenuPageModel>() as Page;
            Detail = new NavigationPage(this.GetPageFromCache<MainPageModel>() as Page)
            {
                BarBackgroundColor = Color.FromHex("#DCDCDC"),
                Title = "Home Page"
            };
}

Then in the constructor for App.xaml.cs, I initialize the main view as if it were a single-page app:

public App()
{
            InitializeComponent();

            var factory = new XamvvmFormsFactory(this);
            XamvvmCore.SetCurrentFactory(factory);

            MainPage = this.GetPageFromCache<AppShellModel>() as Page;
}

Gif demonstration here

Note that, in this way, we do not have to "know" the calling page when navigating from the hamburger menu, but we do need to do a little trickery to properly set the detail page.

[marufbd]

@JoeM-RP thanks for the example, works and its clean. I was just wondering can we push a new page on any menu item click, i.e. can the Page2Command be like this:

Page2Command = new BaseCommand((arg) => { //SetDetailPageFromMenu(this.GetPageFromCache<DemoListViewPageModel>());
this.PushPageAsNewInstanceAsync<DetailPageModel>(vm => vm.Init("Goldenrod", Color.YellowGreen)); });

So instead of setting detail page can we go to a new page from menu click. in your example it stays on the same page, seem nothing happens.

[JoeM-RP]

@marufbd If you don't care about preserving the navigation stack, you might be able to use this.SetNewRootAndReset<NewRootPageModelType>() or this block from my original example:

var pageToPush = this.GetPageFromCache<DetailPageModel>();
var currentPage = this.GetPageFromCache<NewRootPageModelType>();

await XamvvmCore.CurrentFactory.PushPageAsync<AppShellModel, NewRootPageModelType>(currentPage, pageToPush);

... Haven't tested either means, for what it's worth. Additionally, if you would like to preserve the navigation stack, you may need to use SetHasNavigationBar as you described previously