Building a Weather App for Multiple Form Factors

.NET MAUI isn’t just for creating apps for phones; it can also be used to create apps for tablets and desktop computers. In this chapter, we will build an app that will work on all of these platforms and optimize the user interface for each form factor. As well as using three different form factors, we are also going to be working on four different operating systems: iOS, macOS, Android, and Windows.

The following topics will be covered in this chapter:

• Using FlexLayout in .NET MAUI
• Using VisualStateManager
• Using different views for different form factors
• Using behaviors

Let’s get started!

Technical requirements

To work on this project, we need to have Visual Studio for Mac or PC installed, as well as the necessary .NET MAUI components. 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 PC, you need to have a Mac connected. If you don’t have access to a Mac at all, you can choose to just work on the Windows and Android parts of this project. Similarly, if you only have a Mac, you can choose to work on only the iOS and Android parts of this project.

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

Project overview

Applications for iOS and Android can run on both phones and tablets. Often, apps are just optimized for phones. In this chapter, we will build an app that will work on different form factors, but we aren’t going to stick to just phones and tablets – we are going to target desktop computers as well. The desktop version will be for Window UI Library (WinUI) and macOS via Mac Catalyst.

The app that we are going to build is a weather app that displays the weather forecast based on the location of the user. For this chapter, we will be referencing Visual Studio for Mac in the instructions. If you are using Visual Studio for Windows, you should be able to follow along. Use one of the other chapters for reference if you need help.

Building the weather app

It’s time to start building the app. Create a new blank .NET MAUI app using the following steps for Visual Studio for Mac:

1. Open Visual Studio for Mac and click on New:

Figure 8.1 – Visual Studio 2022 for Mac start screen

2. In the Choose a template for your new project dialog, use the .NET MAUI App template, which is under Multiplatform | App, then click Continue:

Figure 8.2 – New project 

3. In the Configure your new .NET MAUI App dialog, ensure the .NET 7.0 target framework is selected, then click Continue:

Figure 8.3 – Choosing the target framework

4. In the Configure your new .NET MAUI App dialog, name the project Weather, then click Create:

Figure 8.4 – Naming the new app

If you run the app now, you should see something like the following:

...

Summary

In this chapter, we successfully created an app for four different operating systems – iOS, macOS, Android, and Windows – and three different form factors – phones, tablets, and desktop computers. To create a good user experience on all platforms and form factors, we used FlexLayout and VisualStateManager. We also learned how to handle different views for different form factors, as well as how to use Behaviors.

The next app we will build will be a game with real-time communication. In the next chapter, we will take a look at how we can use the SignalR service in Azure as the backend game service.