MvvmFrameworks, Prism, Xamarin, XamarinForms

Prism in Xamarin Forms Step by Step (Part. 4)

17 Comments

In the third part of this series about Prism, we talked about Modules, Event Aggregator and EventToCommand.

This time we will learn about how to use other page types like MasterDetailPage and TabbedPage.

Master Detail Page

Creating a Master detail page in Prism is really simple, you just have to create a new page that inherits of MasterDetailPage and use it during the navigation.

Let’s do it step by step:

1-Create your Master Detail Page class

2-Create a ViewModel class for your Master Detail Page

3-In the App.cs Register your Master Detail Page class

Also, register your NavigationPage (since you will need it to navigate across pages).

Update: using Prism Version 7.0 >

4-Add some content to your MasterDetailPage and some navigation capabilities to your ViewModel

As you can see in the XAML above, I’m passing a string parameter to the ViewModel OnNavigateCommand, so it knows to what page we will navigate to.

5-Navigate to your MasterDetailPage

Make sure to specify your URL using this structure {MasterDetailPage}/{NavigationPage}/{Page you want to navigate}.

RESULT:

EXTRA:

Prism provides an interface called IMasterDetailPageOptions which has a property to set if the Menu will be present after the navigation, if you set it true the menu won’t close. By default, if you don’t implement it will be false so the menu will close after navigation.

TabbedPage

Now let’s create and use a tabbed page.

Let’s do it step by step:

1-Create your Tabbed Page Class

2-In the App.cs Register your Custom Tabbed Page class

Update: using Prism Version 7.0 >

3-Create the pages you want to be added to the tabbed page and register them

Update: using Prism Version 7.0 >

Also on each XAML page add  mvvm:ViewModelLocator.AutowireViewModel=“True” 

4-Add the pages created to your tabbed page

5-Navigate to your TabbedPage

Make sure to specify your URL using this structure {CustomTabbedPage}/{Page you want to navigate}.

Also if you need to push any pages using a NavigationPage you have to register your NavigationPage and add it to your navigation URL when specifying where to navigate.

Update: using Prism Version 7.0 >

RESULT:

EXTRA:

Prism provides an interface called IActiveAware, if implemented in a child tab page will let you know when that tab is active/inactive.

That’s all for now, you can see the full source code used for these examples here:

https://github.com/CrossGeeks/Xamarin.Samples/tree/master/Xamarin%20Forms/PrismUnitySample

Sample Updated with Prism v7 > :

https://github.com/CrossGeeks/PrismV7Sample

References:

https://msdn.microsoft.com/en-us/library/gg405494(v=pandp.40).aspx

Happy coding!

You may also like

17 Comments

  1. XamGirl,

    THANK YOU FOR THIS, seeing this makes me very happy. You actually listened. I will follow what you have taught here. I am so glad I found your site. Just know that you sharing your knowledge is not a waste. You are touching many with your posts. Your posts on EventAggregator helped me not to despise the concept. God bless you

    1. Hi Charlin! My name is Paulo I’m from São Paulo – Brazil.

      I’m starting Xamarin with Prism, I’m having a question on my master page I have the photo and username of the user who is logged in to the app ok.

      As I do via biding the model that contains this information? I tried several more times without success.

  4. Nice article. When you are starting 2nd page from Tab1 it is showing in Full Screen.
    Hiding all Tabs. How can stop hiding tabs throughout the app. Thank you.

    1. Yes! To achieve it, then instead of adding the NavigationPage to the root:
      NavigationService.NavigateAsync(new System.Uri(“NavigatioPage/CustomTabbedPage?selectedTab=Test2Page”, System.UriKind.Absolute));

      You will add it to each child:
      For example: https://gist.github.com/Char0394/91adaa86e52a423ded68574cf0368667
      And you will remove the NavigationPage here: NavigationService.NavigateAsync(new System.Uri(“/CustomTabbedPage?selectedTab=Test2Page”, System.UriKind.Absolute));

      1. If I am doing so, I need to use PushAsync(To be able to use PushAsync I need to use navigation page in app class where first page starting, This navigation page will display 1 navigationbar on top &
        Your code below

        Here NavigationPage will display another navigationbar(Or toolbarItem) on top. How to solve this.
        Thank you

        1. To hide the navigation bar into that new page, you can use this code in the code-behind of the page
          NavigationPage.SetHasNavigationBar(this, false);

  6. Hi,

    Say I have TabbedPage with two pages :

    How I can Pass Data from PageA to PageB (From PageAViewModel to PageBViewModel) I implemented INavigationAware interface and try to use OnNavigationTo(…) but without success! OnNavigatedTo(…) never be called, OnNavigatedTo will be invoked on the TabbedPage and only the SELECTED TAB.

    I wonder if there is a solution for passing data each time I switch from tabA to tabB ?

    Thanks in advance

  7. Hi,

    How to pass data from LoginPage to MainTabbedPage ? So, I have three parameters and I pass first parameter to FirstPage, second parameter to SecondPage etc.. .

    Thank you, so much!

    Denes