Building a News App Using .NET MAUI Shell

In this chapter, we will create a news app that leverages the Shell navigation functionality provided to us by the .NET MAUI team at Microsoft. The old way of doing this, which involved using ContentPage, FlyoutPage, TabbedPage, or NavigationPage as the main page, as we did in Chapter 2, still works, but we are sure that you will enjoy the new way of defining the structure of your app. Also, you can mix and match the old and new.

By the end of this chapter, you will have learned how to define an app structure using Shell, consume data from a REST API, configure navigation, and pass data between views using query-style routes.

So, what is Shell, then? In Shell, you define the structure of your app using Extensible Application Markup Language (XAML) instead of hiding it in spread-out pieces of code in your app. You can also navigate using routes, just like those fancy web developers are doing.

The following topics will be covered in...

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 workload components. See Chapter 1, Introduction to .NET MAUI, for more details on how to set up your environment.

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

Project overview

We will create a .NET MAUI project using the single-project feature as the code-sharing strategy. It will contain two parts, detailed as follows:

• In the first part, we will create views and make them navigable using Shell
• In the second part, we will add some content by consuming a REST API for news

The second part is not needed to learn about Shell, but it will take you a bit further down the road to a complete app.

The build time for this project is about 1.5 hours.

Building the news app

This chapter will be all about building a news app from the beginning. It will guide you through every step, but it will not go into every detail. For that, we recommend Chapter 2, Building Our First .NET MAUI App, which goes into more detail.

Happy coding!

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.

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 4.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 4.2 – Create a new project

3. Click Next...

Summary

In this chapter, we learned how to define a navigation structure using .NET MAUI Shell, how to navigate to views using routes, and how to pass arguments between views in the form of a query string. There is a lot more to Shell, but this should get you started and confident enough to start exploring the Shell APIs. Also, keep in mind that the Shell APIs are constantly evolving, so make sure you check out the latest features available.

We also learned how to create an API client for an arbitrary REST API, which always comes in handy since most of the apps you will write need to communicate with a server at some point. There is a very good chance that the server will expose its data and functionality through a REST API.

If you are interested in extending the app even further, try designing your own About page, or allow the News API key to be set through the settings.

The next project will be about creating a match-making app, and how to create a swiping-enabled yes/no...