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

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

3 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