# Creating a movie app using Xamarin.Forms and Prism – Part 2

In the previous post, Creating a movie app using Xamarin.Forms and Prism – Part 1, we went through the process of creating and setting up a new Xamarin. Forms project using the Prism library and Visual Studio.

In today’s post, we’ll go through the steps of retrieving data from the web service and displaying it in a list view.

Since Part 1, the Prism library has had significant updates. If you’ve created the app from scratch before the Prism updates, you would need to update your NuGet packages as well as the `RegisterTypes` method in the `App.xaml.cs`, `MainActivity.cs` and `AppDelegate.cs` file in each project, to the following:

### File, Open Project

We’ll continue on the code we created Part 1. You can get all the code for this series on [GitHub](https://github.com/Pietervdw/my-moviedb), so go ahead and open the project you created in Part 1. We’re going to show a list of movie genres on the first page of the app. The project already contains a `MainPageViewModel` class which we can use, however, we’ll add our own Genre page and ViewModel by following these steps:

1.  Right-click on the **Views** folder inside the Solution Explorer and select **Add > New Item  
    **
2.  Select Prism > Prism ContentPage (Xamarin.Forms), name the file `GenrePage.xaml` and click the **Add** button.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664280305933/uqFz4JHCV.png align="left")

Because you’re using the Prism ContentPage item template, it will automatically create the following files for you:

*   A `GenrePage.xaml` file with it’s associated code-behind `Genre.xaml.cs` and;
*   A `GenrePageViewModels.cs` file inside the **ViewModels** folder, which will act as the new page’s associated view model.

It will also automatically register the newly created page for navigation by adding the following line to the  
`RegisterTypes` method in the `App.xaml.cs` file:

     containerRegistry.RegisterForNavigation();

Now, since we want to display a list of movie genres when the app first opens, we need to specify that the newly added GenrePage, should be the first page that is shown. To do this open `App.xaml.cs` and change the following line:

```csharp
         await NavigationService.NavigateAsync("NavigationPage/MainPage");         
```

to

```csharp
         await NavigationService.NavigateAsync("NavigationPage/GenrePage");         
```

### Loading Data

Next, we need to fetch a list of movie genres from The Movie DB API and populate a list view on the Genre page. First, we need to make a small change to the ViewModelBase class by doing the following:

1.  Open the `ViewModelBase.cs` file in the **ViewModels** folder.
2.  Add a new property called `IsBusy` to the `ViewModelBase` class. You can use the Prism _propp_ snippet to make this easier. The property should look like:

If you want to learn more about the available Prism snippets, be sure to read my post, [Prism Library Quick Tip – Snippets](https://mythicalmanmoth.com/2018/01/11/prism-library-quick-tip-snippets/)

Next, we need to work on the view model for the Genre page.

1.  Open the `GenrePageViewModel.cs` file inside the **ViewModels** folder.
2.  Change the class to inherit from `ViewModelBase` and add a constructor with two parameters, one of type `INavigationService` and another `IMovieRepository`:
3.  Add an `ObservableCollection` property, called **Genres**, that will contain a list of genres to the class:
4.  Next, add a new `DelegateCommand`, which will be used to retrieve the genre data, called **LoadGenresCommand**. Use the _cmd_ snippet to generate most of the code for you.
5.  Change the `LoadGenres()` method to the following (The `ToObservableCollection` method is an extension method in the `ListExtensions` class inside the **Extensions** folder):
6.  Next, add the following line to the class constructor in order to execute the LoadGenres command:
    
```csharp
     LoadGenresCommand.Execute(); 
```
    
7.  Lastly, to register the required dependencies, add the following to the `RegisterTypes` method in the `App.xaml.cs` class:

### Creating the UI

At this point, we have all the necessary code in place, we just need to create the UI to list the genres. We’ll create a simple UI to start with, that will only list the available movie genres, by completing the following steps:

1.  Open the `GenrePage.xaml` file inside the View folder
2.  Replace the content of the `GenrePage.xaml` with the following:

In the code above, we bind the page title to the view model’s **Title** property, as well as bind the list view to the **Genres** property. Note, that we also bind **IsRefreshing** to our view models’ **IsBusy** property – this will automatically show a progress indicator when the data loads.

You should now be able to see a list of genres retrieved from The Movie Db:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1664174698824/DfnLaZrBr.gif)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1664174701143/Vt8I-WEex.gif)

If you’re having problems running the example on iOS, do not panic. There are a few things we need to do to make it work that will be covered in Part 3.

In the next part, we’ll create another page showing all movies for a specific genre and the movie detail. You can find all code for this series on [GitHub.](https://github.com/Pietervdw/my-moviedb)

Thank you for reading. Until next time, keep coding!