Compilación de una aplicación de .NET MAUIBlazor Hybrid con una aplicación web de Blazor

En este artículo se muestra cómo compilar una aplicación de .NET MAUIBlazor Hybrid con una aplicación web de Blazor que usa una interfaz de usuario compartida a través de una biblioteca de clases (RCL) de Razor.

Requisitos previos y pasos preliminares

Para conocer los requisitos previos y los pasos preliminares, consulte Compilación de una aplicación de .NET MAUIBlazor Hybrid. Se recomienda usar el tutorial de .NET MAUIBlazor Hybrid para configurar el sistema local para el desarrollo de .NET MAUI antes de usar las instrucciones de este artículo.

.NET MAUIBlazor Hybrid y aplicación de ejemplo de aplicación web

Obtener la aplicación de ejemplo denominada MauiBlazorWeb del repositorio de GitHub de ejemplos de Blazor (dotnet/blazor-samples) (.NET 8 o posterior).

La aplicación de ejemplo es una solución de inicio que contiene una aplicación de .NET MAUIBlazor Hybrid (nativa, multiplataforma), una aplicación web de Blazor y una biblioteca de clases de Razor (RCL) que contiene la interfaz de usuario compartida (componentes Razor) usada por las aplicaciones web y nativas.

Migración de una solución de .NET MAUIBlazor Hybrid

En lugar de usar la aplicación de ejemplo, puede migrar una aplicación .NET MAUIBlazor Hybrid existente con la guía de esta sección utilizando Visual Studio.

Agregue un nuevo proyecto a la solución con la plantilla de proyecto Blazor Aplicación Web. Seleccione las opciones siguientes:

• Nombre del proyecto: use el nombre de la solución con .Web anexado. En los ejemplos de este artículo se supone la siguiente nomenclatura:
  • Solución: MauiBlazorWeb
  • Proyecto MAUI: MauiBlazorWeb.Maui
  • Aplicación web Blazor:MauiBlazorWeb.Web
  • Biblioteca de clases (RCL) Razor (agregada en un paso posterior): MauiBlazorWeb.Shared
• Tipo de autenticación: Ninguno
• Configuración para https: Seleccionado (habilitado)
• Modo de representación interactiva: Servidor
• Ubicación de interactividad: Global
• Páginas de ejemplo: No seleccionado (deshabilitado)

La configuración de Ubicación de interactividad en Global es importante porque las aplicaciones MAUI siempre se ejecutan de forma interactiva y arrojan errores en páginas de componentes Razor que especifican explícitamente un modo de representación. Si no usa un modo de representación global, deberá aplicar el enfoque descrito en la sección Uso de Blazor modos de representación después de seguir las instrucciones de esta sección. Para obtener más información, vea BlazorWebView necesita una manera de habilitar la invalidación de ResolveComponentForRenderMode (dotnet/aspnetcore #51235).

Agregue un nuevo proyecto de Razor biblioteca de clases (RCL) a la solución. En los ejemplos de este artículo se supone que el proyecto se denomina MauiBlazorWeb.Shared. No seleccione Páginas y vistas de soporte técnico al agregar el proyecto a la solución.

Agregue referencias de proyecto al RCL desde el proyecto MAUI y el proyecto de aplicación web Blazor.

Mueva la carpeta Components y todo su contenido desde el proyecto MAUI a la RCL. Confirme que la carpeta Components se elimina del proyecto MAUI.

Sugerencia

Al mover una carpeta o un archivo en Visual Studio, use comandos de teclado o el menú contextual haciendo clic con el botón derecho para una operación de cortar y pegar. Arrastrar la carpeta en Visual Studio solo copia de una ubicación a otra, lo que requiere un paso adicional para eliminar el original.

Mueva la carpeta css de la carpeta wwwroot del proyecto MAUI a la carpeta wwwroot de la RCL.

Elimine los siguientes archivos de la carpeta wwwroot de la RCL:

• background.png
• exampleJsInterop.js

En la RCL, reemplace el archivo raíz _Imports.razor por el del Components de la RCL, sobrescribir el archivo existente en la RCL y eliminar el original en la carpeta Components. Después de mover el archivo, ábralo y cambie el nombre de las dos últimas instrucciones @using para que coincidan con el espacio de nombres del RCL. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

En la raíz del proyecto RCL, elimine los siguientes archivos:

• Component1.razor
• ExampleJsInterop.cs

En la RCL, abra el archivo Components/Routes.razor y cambie MauiProgram a Routes:

- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">

Abra el archivo MainPage.xaml en la raíz del proyecto. Agregue una referencia xmlns:shared a la RCL en los atributos ContentPage. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared. Establezca el valor correcto para el clr-namespace y el assembly:

xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"

Además, en el archivo MainPage.xaml, actualice el componente raíz BlazorWebViewComponentType de local a shared:

- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />

En el proyecto MAUI, abra el archivo wwwroot/index.html y cambie las hojas de estilos para que apunten a la ruta de acceso del recurso estático de la RCL.

Quite las siguientes líneas:

- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />

Reemplace las líneas anteriores por el marcado siguiente. En el ejemplo siguiente, la ruta de acceso del recurso estático de la RCL es _content/MauiBlazorWeb.Shared/:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

En la Aplicación web Blazor, abra el archivo _Imports.razor y añada las dos sentencias @using siguientes para la RCL. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

En el proyecto Blazor de la Aplicación web, abra el componente App (Components/App.razor). Quite la hoja de estilos app.css:

- <link rel="stylesheet" href="app.css" />

Reemplace la línea anterior por las referencias de hoja de estilos de recursos estáticos de RCL. En el ejemplo siguiente, la ruta de acceso del recurso estático de la RCL es _content/MauiBlazorWeb.Shared/:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

En el proyecto Blazor de la Aplicación web, elimine la carpeta y los archivos siguientes:

• Components/Layout
• Components/Routes.razor
• Components/Pages/Home.razor
• wwwroot/app.css

Abra el archivo Program.cs de la Aplicación web Blazor y agregue un ensamblado adicional para la RCL a la aplicación. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);

Ejecute el proyecto MAUI seleccionando el proyecto en Explorador de soluciones y mediante el botón inicio de Visual Studio.

Ejecute el proyecto Blazor de la Aplicación web seleccionando el proyecto de aplicación web de Blazor en explorador de soluciones y usando el botón inicio de Visual Studio con la configuración de compilación de https.

Si recibe un error de compilación que el ensamblado de la RCL no se puede resolver, compile primero el proyecto RCL. Si se producen errores de recursos del proyecto MAUI en la compilación, recompile el proyecto MAUI para borrar los errores.

Uso de los modos de representación de Blazor

Use las instrucciones de una de las siguientes subsecciones que coincidan con las especificaciones de la aplicación para aplicar Blazormodos de representación para una ubicación de interactividad determinada en la aplicación web Blazor, pero omita las asignaciones de modo de representación en el proyecto MAUI.

Subsecciones del modo de representación e interactividad:

• Interactividad del servidor global
• Interactividad global o WebAssembly
• Interactividad del servidor por página o componente
• Interactividad automática por página o componente
• Interactividad por página o componente de WebAssembly

Interactividad del servidor global

• Modo de representación interactiva: Servidor
• Ubicación de interactividad: Global
• Proyectos de solución
  • MAUI (MauiBlazorWeb.Maui)
  • Aplicación web Blazor (MauiBlazorWeb.Web)
  • RCL (MauiBlazorWeb.Shared): contiene los componentes de Razor compartidos sin establecer los modos de representación en cada componente.

Referencias de proyecto: MauiBlazorWeb.Maui y MauiBlazorWeb.Web tienen una referencia de proyecto a MauiBlazorWeb.Shared.

Interactividad global o WebAssembly

• Modo de representación interactiva: auto o WebAssembly
• Ubicación de interactividad: Global
• Proyectos de solución
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Aplicación web
    • Proyecto de servidor: MauiBlazorWeb.Web
    • Proyecto de cliente: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): contiene los componentes de Razor compartidos sin establecer los modos de representación en cada componente.

Referencias de proyecto:

• Los proyectos MauiBlazorWeb.Maui, MauiBlazorWeb.Web y MauiBlazorWeb.Web.Client tienen una referencia de proyecto a MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web tiene una referencia de proyecto a MauiBlazorWeb.Web.Client.

Interactividad del servidor por página o componente

• Modo de representación interactiva: Servidor
• Ubicación de la interactividad: Por página o componente
• Proyectos de solución
  • MAUI (MauiBlazorWeb.Maui): llama a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes en MauiProgram.cs.
  • Aplicación web Blazor (MauiBlazorWeb.Web): no establece un atributo de directiva @rendermode en los componentes HeadOutlet y Routes del componente App (Components/App.razor).
  • RCL (MauiBlazorWeb.Shared): contiene los componentes de Razor compartidos que establecen el modo de representación InteractiveServer en cada componente.

MauiBlazorWeb.Maui y MauiBlazorWeb.Web tienen una referencia de proyecto a MauiBlazorWeb.Shared.

Agregue la siguiente clase InteractiveRenderSettings a la RCL. Las propiedades de clase se usan para establecer los modos de representación de componentes.

El proyecto MAUI es interactivo de forma predeterminada, por lo que no se realiza ninguna acción en el nivel de proyecto del proyecto MAUI que no sea llamar a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Para la aplicación web Blazor en el cliente web, los valores de propiedad se asignan desde RenderMode. Cuando los componentes se cargan en un BlazorWebView para el cliente nativo del proyecto MAUI, los modos de representación no se asignan (null) porque el proyecto MAUI establece explícitamente las propiedades del modo de representación en null cuando se llama a ConfigureBlazorHybridRenderModes.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

En MauiProgram.CreateMauiApp de MauiProgram.cs, llame a ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

En el archivo _Imports.razor de la RCL, agregue la siguiente directiva estática global @using para que las propiedades de la clase estén disponibles para los componentes:

@using static InteractiveRenderSettings

Nota:

La asignación de modos de representación a través de las propiedades de clase InteractiveRenderSettings RCL difiere de una aplicación web Blazor independiente típica. En una aplicación web Blazor, los modos de representación normalmente se proporcionan mediante RenderMode a través de la instrucción @using static Microsoft.AspNetCore.Components.Web.RenderMode del archivo _Import de la Aplicación web Blazor.

Interactividad automática por página o componente

• Modo de representación interactiva: auto
• Ubicación de la interactividad: Por página o componente
• Proyectos de solución
  • MAUI (MauiBlazorWeb.Maui): llama a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes en MauiProgram.cs.
  • Blazor Aplicación web
    • Proyecto de servidor: MauiBlazorWeb.Web: no establece un atributo de directiva @rendermode en los componentes HeadOutlet y Routes del componente de App (Components/App.razor).
    • Proyecto de cliente: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): contiene los componentes de Razor compartidos que establecen el modo de representación InteractiveAuto en cada componente.

Referencias de proyecto:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Web y MauiBlazorWeb.Web.Client tienen una referencia de proyecto a MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web tiene una referencia de proyecto a MauiBlazorWeb.Web.Client.

Agregue la siguiente clase InteractiveRenderSettings se agrega a la RCL. Las propiedades de clase se usan para establecer los modos de representación de componentes.

El proyecto MAUI es interactivo de forma predeterminada, por lo que no se realiza ninguna acción en el nivel de proyecto del proyecto MAUI que no sea llamar a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Para la aplicación web Blazor en el cliente web, los valores de propiedad se asignan desde RenderMode. Cuando los componentes se cargan en un BlazorWebView para el cliente nativo del proyecto MAUI, los modos de representación no se asignan (null) porque el proyecto MAUI establece explícitamente las propiedades del modo de representación en null cuando se llama a ConfigureBlazorHybridRenderModes.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

En MauiProgram.CreateMauiApp de MauiProgram.cs, llame a ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

En el archivo _Imports.razor de la RCL, agregue la siguiente directiva estática global @using para que las propiedades de la clase estén disponibles para los componentes:

@using static InteractiveRenderSettings

Nota:

La asignación de modos de representación a través de las propiedades de clase InteractiveRenderSettings RCL difiere de una aplicación web Blazor independiente típica. En una aplicación web Blazor, los modos de representación normalmente se proporcionan mediante RenderMode a través de la instrucción @using static Microsoft.AspNetCore.Components.Web.RenderMode del archivo _Import de la Aplicación web Blazor.

Interactividad por página o componente de WebAssembly

• Modo de representación interactiva: WebAssembly
• Ubicación de la interactividad: Por página o componente
• Proyectos de solución
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Aplicación web
    • Proyecto de servidor: MauiBlazorWeb.Web: no establece un atributo de directiva @rendermode en los componentes HeadOutlet y Routes del componente de App (Components/App.razor).
    • Proyecto de cliente: MauiBlazorWeb.Web.Client
  • RCL
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: contiene los componentes de Razor compartidos que establecen el modo de representación InteractiveWebAssembly en cada componente. El RCL .Shared.Client se mantiene por separado de la RCL .Shared porque la aplicación debe mantener los componentes necesarios para ejecutarse en WebAssembly por separado de los componentes que se ejecutan en el servidor y que permanecen en el servidor.

Referencias de proyecto:

• MauiBlazorWeb.Maui y MauiBlazorWeb.Web tienen referencias de proyecto a MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web tiene una referencia de proyecto a MauiBlazorWeb.Web.Client.
• MauiBlazorWeb.Web.Client y MauiBlazorWeb.Shared tienen una referencia de proyecto a MauiBlazorWeb.Shared.Client.

Agregue el siguiente parámetro AdditionalAssemblies a la instancia del componente Router para el ensamblado del proyecto de MauiBlazorWeb.Shared.Client (a través de su archivo _Imports) en el archivo Routes.razor del proyecto de MauiBlazorWeb.Shared:

<Router AppAssembly="@typeof(Routes).Assembly" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Agregue el ensamblado del proyecto de MauiBlazorWeb.Shared.Client (a través de su archivo _Imports) con la siguiente llamada AddAdditionalAssemblies en el archivo Program.cs del proyecto MauiBlazorWeb.Web:

app.MapRazorComponents<App>()    
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly); 

Agregue la siguiente clase InteractiveRenderSettings se agrega a la RCL .Shared.Client. Las propiedades de clase se usan para establecer los modos de representación de componentes para los componentes basados en servidor.

El proyecto MAUI es interactivo de forma predeterminada, por lo que no se realiza ninguna acción en el nivel de proyecto del proyecto MAUI que no sea llamar a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Para la aplicación web Blazor en el cliente web, los valores de propiedad se asignan desde RenderMode. Cuando los componentes se cargan en un BlazorWebView para el cliente nativo del proyecto MAUI, los modos de representación no se asignan (null) porque el proyecto MAUI establece explícitamente las propiedades del modo de representación en null cuando se llama a ConfigureBlazorHybridRenderModes.

InteractiveRenderSettings.cs (RCL .Shared.Client):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

Se agrega una versión ligeramente diferente de la clase InteractiveRenderSettings a la RCL .Shared. En la clase agregada a la RCL .Shared , se llama a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes de la RCL .Shared.Client. Esto garantiza que el modo de representación de los componentes de WebAssembly representados en el cliente MAUI no estén asignados (null) porque son interactivos de forma predeterminada en el cliente nativo.

InteractiveRenderSettings.cs (RCL .Shared):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

En MauiProgram.CreateMauiApp de MauiProgram.cs, llame a ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

En el archivo _Imports.razor de la RCL .Shared.Client, agregue @using static InteractiveRenderSettings para que las propiedades de la clase InteractiveRenderSettings estén disponibles para los componentes:

@using static InteractiveRenderSettings

Nota:

La asignación de modos de representación a través de las propiedades de clase InteractiveRenderSettings RCL difiere de una aplicación web Blazor independiente típica. En una aplicación web Blazor, los modos de representación normalmente se proporcionan mediante RenderMode a través de la instrucción @using static Microsoft.AspNetCore.Components.Web.RenderMode del archivo _Import de la Aplicación web Blazor.

Uso de interfaces para admitir diferentes implementaciones de dispositivos

En el ejemplo siguiente se muestra cómo usar una interfaz para llamar a diferentes implementaciones en toda la aplicación web y la aplicación nativa (MAUI). En el ejemplo siguiente se crea un componente que muestra el factor de forma del dispositivo. Use la capa de abstracción MAUI para las aplicaciones nativas y proporcione una implementación para la aplicación web.

En la biblioteca de clases (RCL) Razor, una carpeta Interfaces contiene una interfaz IFormFactor.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

public interface IFormFactor
{
    public string GetFormFactor();
    public string GetPlatform();
}

El siguiente componente DeviceFormFactor está presente en la carpeta Components de la RCL.

Components/Pages/DeviceFormFactor.razor:

@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor

<PageTitle>Form Factor</PageTitle>

<h1>Device Form Factor</h1>

<p>You are running on:</p>

<ul>
    <li>Form Factor: @factor</li>
    <li>Platform: @platform</li>
</ul>

<p>
    <em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

En la RCL, una entrada para el componente DeviceFormFactor forma parte del menú de navegación del componente NavMenu.

En Components/Layout/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="device-form-factor">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
    </NavLink>
</div>

Las aplicaciones web y nativas contienen las implementaciones de IFormFactor.

En la aplicación web Blazor, una carpeta denominada Services contiene el siguiente archivo FormFactor.cs con la implementación FormFactor para el uso de la aplicación web.

Services/FormFactor.cs ( proyecto Blazor de la Aplicación web):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return "Web";
    }
    public string GetPlatform()
    {
        return Environment.OSVersion.ToString();
    }
}

En el proyecto MAUI, una carpeta denominada Services contiene el siguiente archivo FormFactor.cs con la implementación FormFactor para uso nativo. La capa de abstracciones MAUI se usa para escribir código que funciona en todas las plataformas de dispositivos nativas.

Services/FormFactor.cs (proyecto MAUI):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Maui.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return DeviceInfo.Idiom.ToString();
    }
    public string GetPlatform()
    {
        return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
    }
}

La inserción de dependencias se usa para obtener las implementaciones de estos servicios.

En el proyecto MAUI, el archivo MauiProgram.cs tiene las siguientes instrucciones using en la parte superior del archivo:

using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;

Inmediatamente antes de la llamada a builder.Build(), FormFactor se registra para agregar servicios específicos del dispositivo utilizados por la RCL:

builder.Services.AddSingleton<IFormFactor, FormFactor>();

En la aplicación web Blazor, el archivo Program tiene las siguientes instrucciones using en la parte superior del archivo:

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;  

Inmediatamente antes de la llamada a builder.Build(), FormFactor se registra para agregar servicios específicos del dispositivo utilizados por la aplicación web Blazor:

builder.Services.AddScoped<IFormFactor, FormFactor>();

Si la solución también tiene como destino WebAssembly a través de un proyecto .Web.Client, también se requiere una implementación de la API anterior en el proyecto .Web.Client.

También puede usar directivas de preprocesador del compilador en la RCL para implementar una interfaz de usuario diferente en función del dispositivo en el que se ejecuta la aplicación. En este escenario, la aplicación debe tener como destino múltiple la RCL igual que la aplicación MAUI. Para obtener un ejemplo, consulte el repositorio de GitHub BethMassi/BethTimeUntil.

Recursos adicionales

• Modos de representación de Blazor de ASP.NET Core
• Reutilización de componentes Razor en aplicaciones ASP.NET Core Blazor Hybrid