Creating a Razor component

In developing a .NET MAUI Blazor Hybrid application, we have the option to either construct the entire UI utilizing Blazor or combine Razor components with XAML components. We will initially explore the second option, as we have already completed a password manager application in the first part of this book.

Redesigning the login page using a Razor component

The first UI we aim to replace is the login page. We can accomplish this by utilizing a Razor page instead of the XAML page, thereby maintaining the same functionality.

In a Blazor Hybrid application, the BlazorWebView serves as the control that hosts Razor components. We can modify LoginPage.xaml to the following:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:b="clr-namespace:Microsoft.AspNetCore.Components...