Prism 7 tabs navigation made simple

xamarin-forms prism tabs

Tabs set up and navigation in Prism can be a lifesaver when there is not so much time to spare and the requirements seem to be piling up. With Prism 7 it got even easier to set up tabs and that's what we are gonna discuss in this post.

Prism 7 just went out and this new release brings many cool and interesting features to the table. One of them was the refactoring of how the tab set up and navigation is done. Although it is unfortunate that there’s not much documentation about such changes so that’s what I’m trying to address with this entry.

For starters, let me show you what the final goal looks like:

Basically a TabPage with three tabs and each one of them with their own NavigationPage container.

Setting up the tabs

In older versions of Prism, we were responsible for the initialization of the tabs and had to delegate the INavigationAware calls to the children tabs and many other tasks that were repetitive boring.

Now we don’t have to do that anymore, and the “initialization” is done the first time you navigate in the App.cs file.

So basically, all we gotta do now is use all this new syntax to initialize the tabs. Pretty cool, isn’t?

Understanding the new syntax

First, we reference the TabPage we want to use then put a ” ? “ character to initialize the tabs and per each new tab put a ” & “ character.

For each tab you create you have to reference the constant KnownNavigationParameters.CreateTab and put a ” = “ character if you want a NavigationPage with it and then a ” | “ character to init the Page you want to be contained in that NavigationPage.

Let’s take showingNowTab as an example:

After that, the last step would be passing it to the NavigationService.NavigateAsync(tabs); as illustrated in the first gist in the tutorial and you will be done.

If you don’t wanna have a NavigationPage container in a specific tab then all you have to do is leave out that section and just reference the KnownNavigationParameters.CreateTab constant and the Page you want to instantiate:

Navigating within the same NavigationPage got even easier than ever before, all you gotta do is specify the Page you want to navigate to:

Let’s say you are in the home screen scrolling through a list of movies and then you tap on one of the movies, this way the navigation will happen within the same NavigationPage.

The End

There’s a lot to cover regarding this new update but instead of making a huge massive post, we are gonna do one at a time instead. We hope you enjoyed it and don’t forget to share with other developers if you found the article useful.

Check out the project on Github .

Luis Alberto Peña Nuñez

Luis Alberto Pena Nunez is deeply passionate about working with new technologies, helping people, and software engineering. He loves what technology has done for businesses and consumers, and the fact that there's no doubt it's going to have a continued effect throughout the world moving forward.