Creating a Razor component

To develop a .NET MAUI Blazor app, we can choose to build all user interfaces using Blazor or a mix of Razor components with XAML components. We will start with the second option first since we already have a completed password manager app from Chapter 6, Introducing Dependency Injection and Platform-Specific Services.

Redesigning the login page using a Razor component

The user interface that we want to replace first is the login page. We can use a Razor page to replace the XAML page to perform the same function.

In the Blazor Hybrid app, BlazorWebView is the control that hosts Razor components. We can change 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.
  ...