Building a Photo Gallery App Using CollectionView and CarouselView

In this chapter, we will build an app that shows photos from the camera roll (photo gallery) of a user’s device. The user will also be able to select photos as favorites. We will then look at the different ways to display photos—in carousels and in multi-column grid control. By using the .NET MAUI CarouselView control to display a group of images, the user can swipe through them to view each image. To display a large group of images, we will use the .NET MAUI CollectionView control and vertical scrolling to allow the user to view all the images. By learning how to use these controls, we will be able to use them in a lot of other cases when we build real-world apps.

The following topics will be covered in this chapter:

• Requesting permissions from the user to access data
• How to import photos from the iOS and Mac Catalyst photo gallery
• How to import photos from the Android photo gallery...

Technical requirements

To be able to complete this project, you will need to have Visual Studio for Mac or Windows installed, as well as the necessary .NET MAUI workloads. See Chapter 1, Introduction to .NET MAUI, for more details on how to set up your environment.

To build an iOS app using Visual Studio for your PC, you have to have a Macintosh (Mac) device connected. If you don’t have access to a Mac at all, you can just follow the Android and Windows part of this project.

You can find the full source for the code in this chapter at https://github.com/PacktPublishing/MAUI-Projects-3rd-Edition/.

Project overview

Almost all apps visualize collections of data, and in this chapter, we will focus on two of the .NET MAUI controls that can be used to display data collections—CollectionView and CarouselView. Our app will show the photos that users have on their devices; to do that, we need to create a photo importer for each platform—one for iOS and Mac Catalyst, one for Windows, and one for Android.

The build time for this project is about 60 minutes.

Building the photo gallery app

This project, like all the rest, is a File | New | Project...-style project, which means that we will not be importing any code at all. So, this first section is all about creating the project and setting up the basic project structure.

It’s time to start building the app using the following steps. Let’s begin!

Creating the new project

The first step is to create a new .NET MAUI project:

1. Open Visual Studio 2022 and select Create a new project:

Figure 6.1 – Visual Studio 2022

This will open the Create a new project wizard.

2. In the search field, type in maui and select the .NET MAUI App item from the list:

Figure 6.2 – Create a new project

3. Click Next.
4. Complete the next step of the wizard by naming your project. We will be calling our application GalleryApp in this case. Move on to the next dialog box by clicking Next, as shown...

Summary

In this chapter, we focused on photos. We learned how to import photos from the platform-specific photo galleries and how we can display them as a grid using CollectionView and in carousels using CarouselView. This makes it possible for us to build other apps and provides multiple options for presenting data to users, as we can now pick the best method for the situation.

Additionally, we learned about permissions and how to check and request permission to use protected resources in our app.

If you are interested in extending the app even further, try creating a page to view the details of the photo, or to view the photo in full screen by tapping on the photo.

In the next chapter, we will build an app using location services and look at how to visualize location data on a map.