Creating a tab-based Xamarin.Forms app using Prism: A step by step guide

Andreas Hennig

• 4 min read

In this article I explain how to create a tab-based Xamarin.Forms app using the MVVM framework Prism. I describe every step along the way, starting out by creating a blank Xamarin.Forms app. I describe what NuGet packages you have to install. You will get to know which initial adjustments you have to make. I also show you how to add your first pages and register everything with the IoC container. So at the end you will have a solid foundation to create a Xamarin.Forms mobile app using the Prism framework.

Creating the solution

The first step is to create the solution. So open up Visual Studio, go to File -> New and create a brand new Xamarin Forms solution using the Blank App template. Enter a name for your solution, in my case pick PrismBasicAppSample.

After you have finished the wizard you should see three projects in your solution:

  1. The .NET standard project to which we refer to as the "core" project
  2. and the two platform projects for iOS and Android

After you have created the solution I recommend to launch your application on both platforms to make sure that everything went well and all your tooling is working fine.

Installing Prism packages

The next step is to decide which IoC container you want Prism to work with. At the moment of this writing Prism supports two different IoC frameworks: Unity and DryIoC.

Depending on which IoC framework you pick, you have to install a different NuGet package. In this case I will go for DryIoC.

So the next step is to actually install the DryIoC flavored version of Prism for Xamarin.Forms. If you are using a newer version of Prism for Xamarin.Forms (8.x+) in fact you only have to install one NuGet package per platform. All other packages are installed as transient dependencies.

So go to your NuGet package Manager, search for "Prism.DryIoC.Forms" (or Prism.Unity.Forms) and install the package in all your three projects.

After you have done that you should double check that everything went well. Examine all your three projects and make sure that the Prism.DryIoC.Forms package was actually added as a dependency. You can to this either by inspecting the dependencies in the project explorer in Visual Studio, or you can actually open up each project .csproj file. There you should see something like this:

<ItemGroup>
    <!-- (…) -->
    <PackageReference Include="Xamarin.Forms" Version="5.0.0.2012" />
    <PackageReference Include="Prism.DryIoc.Forms" Version="8.1.97" />
    <!-- (…) -->
</ItemGroup>

Adjusting the App class

After you have installed all the Prism.Forms packages the next step is to adjust your App.cs.xaml. Since we created a blank Xamarin.Forms application your App.cs.xaml should look something like:

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new MainPage();
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PrismBasicAppSample.App">
    <Application.Resources>
    </Application.Resources>
</Application>

The first thing we have to do is to change the base of the App class. Add the prism namespace to your XAML and change the App classes type to PrismApplication:

<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PrismBasicAppSample.App"
    xmlns:prism="http://prismlibrary.com">
    <Application.Resources>
    </Application.Resources>
</prism:PrismApplication>

After you have changed the base class of the App class you actually have to implement two new methods (since they are marked as abstract in the base class):

  • OnInitialized()
  • RegisterTypes(IContainerRegistrycontainerRegistry)

For now it is okay to stub them out. We will add the implementation later.

Sketch out the basic app structure

The next step is to register your views / view models for navigation.

So to do that I will start out by stubbing out my apps basic structure. In my case I want to create a tab-based application with three tabs:

TabbedPage

  • News
  • Explore
  • Profile

Create content pages and view models

After you have sketched out your basic app structure the next step is to create the appropriate content pages and view models.

Make sure your view models inherit from BindableBase. This is the base class for your view models when using the Prism framework.

Adjust MainPage class

The MainPage as it was created with the blank Xamarin.Forms template will serve as the TabbedPage. So the next step is to adjust it to actually be a TabbedPage:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:PrismBasicAppSample.Views"
    x:Class="PrismBasicAppSample.MainPage">
    <views:NewsPage Title="News" />
    <views:ExplorePage Title="Explore" />
    <views:ProfilePage Title="Profile" />
</TabbedPage>

Register views & view models for navigation

We are nearly done. To tell the Prism framework about our created page and view models you now have to register them with the container registry inside the RegisterTypes(…) method:

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterForNavigation<NavigationPage>();
    containerRegistry.RegisterForNavigation<MainPage>();
    
    containerRegistry.RegisterForNavigation<NewsPage, NewsPageViewModel>();
    containerRegistry.RegisterForNavigation<ExplorePage, ExplorePageViewModel>();
    containerRegistry.RegisterForNavigation<ProfilePage, ProfilePageViewModel>();
}

For more advanced navigation scenarios you should also register the class NavigationPage.

Add initial navigation

The last step is to move your initialization from your App classes constructor to the OnInitialized() method and add the navigation to the MainPage:

protected override async void OnInitialized()
{
    InitializeComponent();
    
    await NavigationService.NavigateAsync(nameof(MainPage));
}

And that's it! At this point you should be able to launch your application!

Conclusion

In this article I described how to create a tab-based Xamarin.Forms application using the Prism framework, explaining every step along the way.

I started out with which Visual Studio template you should use, described which NuGet packages you have to add, what initial adjustments you have to make and how to add your first tabs and pages to your app.

The sample I created in this article is rather simple. But it should be a good starting point for more complex apps.

Additional resources

https://prismlibrary.com/docs/xamarin-forms/Getting-Started.html