Building a Calculator Using .NET MAUI Blazor

In this chapter, we will explore a .NET Blazor app embedded within a .NET MAUI app. We will write part of the calculator app using Blazor and host that in .NET MAUI using BlazorWebView. We will also communicate between Blazor and .NET MAUI.

In this chapter, we are going to cover the following topics:

• What is Blazor?
• Exploring the differences between .NET MAUI projects and .NET MAUI Blazor projects
• Using HTML and CSS to define a UI
• Using XAML controls with HTML in a WebView
• Writing C# code that will integrate with XAML controls and HTML controls
• Working with the main .NET MAUI window to resize it to its contents

Technical requirements

You will need to have Visual Studio for Mac or PC installed, as well as the .NET MAUI components. See Chapter 1, Introduction to .NET MAUI, for more details on how to set up your environment. The source code for this chapter is available in this book’s GitHub repository: https://github.com/PacktPublishing/MAUI-Projects-3rd-Edition.

Project overview

In this chapter, you will discover .NET Blazor and how to use it with .NET MAUI to develop a UI for an app. We will explore the different options available for hosting a Blazor app within a .NET MAUI app. Communication between the two apps is a crucial part of the interoperability and this chapter’s project will show you how to send data from .NET MAUI to Blazor and vice versa.

What is Blazor?

.NET Blazor is a web framework built on top of .NET. Blazor applications run in the browser by using WebAssembly (WASM), or on a server using SignalR. Blazor is one part of the whole ASP.NET ecosystem, and it leverages Razor pages for developing the UI. Blazor uses HTML and CSS to render a rich UI. Blazor uses a component-based UI, where each component is a Razor markup page. Within a Razor page, you can mix and match HTML, CSS, and C# code. There are three deployment models for a Blazor app:

• Blazor Server: In a Blazor Server deployment, the application code runs on the server in an ASP.NET Core app, and it communicates with the UI running in a browser via SignalR.
• Blazor WebAssembly: For Blazor WebAssembly, the entire app runs in the browser via WASM. It is an open web standard that makes it possible to run .NET code safely in the browser. WASM provides interoperability with JavaScript.
• Blazor Hybrid: Blazor Hybrid is a blend of native .NET and web...

Creating the calculator app

In this chapter, we are going to build a calculator app. The UI for the calculator is built using Razor pages in Blazor, but the actual mechanics of the calculator reside in the .NET MAUI app.

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. Follow these steps:

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

Figure 11.1 – Visual Studio 2022

This will open the Create a new project wizard.

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

Figure 11.2 – Create a new project

3. Click Next.
4. Enter Calculator as the...

Summary

Excellent work! In this chapter, you completed a project that used the .NET MAUI Blazor template. You created a UI using HTML, updated it with C# code, and then implemented a service that was managed by .NET MAUI and injected it into a Razor page. Then, you used CollectionView to display a list of the previous calculations. Within CollectionView ItemTemplate, the SwipeView control was used to recall a previous calculation to the keypad for additional editing and reevaluation.

To extend this project even further, consider the following:

• Add an additional swipe action to delete a calculation from the collection
• Add an additional keypad layout for scientific calculations

In the next – and final – chapter, you will discover the world of AI as you build an object recognition app.