A Matchmaking App with a Rich UX Using Animations

In this chapter, we will create the base functionality for a matchmaking app. We won’t be rating people, however, because of privacy issues. Instead, we will download images from a random source on the internet. This project is for anyone who wants an introduction to how to write reusable controls. We will also look at using animations to make our application feel nicer to use. This app will not be a Model-View-ViewModel (MVVM) application since we want to isolate the creation and usage of a control from the slight overhead of MVVM.

The following topics will be covered in this chapter:

• Creating a custom control
• Styling the app to look like a photo, with descriptive text beneath it
• Creating animations using .NET MAUI
• Subscribing to custom events
• Reusing the custom control over and over again
• Handling pan gestures

Technical requirements

To be able to complete this chapter’s 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.

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

Project overview

Many of us have been there, faced with the conundrum of whether to swipe left or right. All of a sudden, you may find yourself wondering: How does this work? How does the swipe magic happen? Well, in this project, we’re going to learn all about it. We will start by defining a MainPage file in which the images of our application will reside. After that, we will implement the image control, and gradually add the graphical user interface (GUI) and functionality to it until we have nailed the perfect swiping experience.

The build time for this project is about 90 minutes.

Creating the matchmaking app

In this project, we will learn more about creating reusable controls that can be added to an Extensible Application Markup Language (XAML) page. To keep things simple, we will not be using MVVM, but bare-metal .NET MAUI without any data binding. What we aim to create is an app that allows the user to swipe images, either to the right or the left, just as most popular matchmaking applications do.

Well, let’s get started by creating the project!

Setting up the project

This project, like all the rest, is a File | New | Project...-style project. This 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.

Let’s get started!

Creating the new project

So, let’s begin.

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

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

Figure 5...

Summary

Good job! In this chapter, we learned how to create a reusable, good-looking control that can be used in any .NET MAUI app. To enhance the user experience (UX) of the app, we used some animations that give the user more visual feedback. We also got creative with the use of XAML to define a GUI of the control that looks like a photo, with a hand-written description.

After that, we used events to expose the behavior of the control back to the MainPage page to limit the contact surface between your app and the control. Most importantly of all, we touched on the subject of GestureRecognizers, which can make our life much easier when dealing with common gestures.

Looking for ideas on how to make this app even better? Try this out: keep a history of the likes and dislikes and add a view to display each collection.

In the next chapter, we will create a photo gallery app using the CollectionView and CarouselView controls. The app will also allow you to favorite photos you...