Introdução: Crie um aplicativo híbrido Blazor com .NET MAUI

Este tópico fornece instruções passo a passo para criar aplicativos .NET MAUI Blazor com Ignite UI for Blazor usando o Visual Studio 2022.

What is Blazor Hybrid?

Blazor hybrid é algo entre Blazor Server e Blazor Web Assembly. Ele simplifica o desenvolvimento, o código e os processos, pois reúne os recursos de frameworks de cliente nativos para desktop e dispositivos móveis. Essa tecnologia permite que você aplique suas habilidades em C# e .NET ao criar aplicativos de cliente nativos.

Mas para poder usá-lo em seus aplicativos, você precisa do .NET MAUI.

What is .NET MAUI?

.NET MAUI (.NET Multi-platform App UI) é uma estrutura de código aberto e multiplataforma para criar aplicativos nativos de desktop e móveis a partir de uma única base de código compartilhada. Com ela, você pode desenvolver mais facilmente aplicativos Blazor que rodam em diferentes dispositivos e sistemas operacionais, incluindo Android, iOS, macOS e Windows usando C# e XAML.

Prerequisites

.NET SDK 7 ou superior
Visual Studio 2022 17.4 ou superior, com as seguintes cargas de trabalho:
- Desenvolvimento móvel com .NET
- ASP.NET e Desenvolvimento Web

Create and Run a Blazor Hybrid App with .Net Maui and Ignite UI for Blazor

As etapas abaixo descrevem como criar um novo projeto .NET MAUI Blazor. Se você quiser adicionar Ignite UI for Blazor a um aplicativo existente, vá para a seção Install Ignite UI for Blazor Package.

Inicie o Visual Studio 2022 e clique em Criar um novo projeto na página inicial, selecione o modelo.NET MAUI Blazor App e clique em Avançar.

Forneça um nome e local para o projeto e clique em Criar

Install Ignite UI for Blazor

Ignite UI for Blazor é entregue por meio de pacotes NuGet. Para usar os componentes Ignite UI for Blazor em seus aplicativos Blazor, você deve primeiro instalar os pacotes NuGet apropriados.

No Visual Studio, abra o gerenciador de pacotes NuGet selecionando Tools → NuGet Package Manager → Manage NuGet Packages for Solution. Procure e instale o pacote IgniteUI.Blazor NuGet.

Para obter mais informações sobre como instalar Ignite UI for Blazor usando o NuGet, leia o tópico Instalando Ignite UI for Blazor.

Register Ignite UI for Blazor

1 - Abra o arquivo MauiProgram.cs e registre o Ignite UI for Blazor Service chamando a função builder.Services.AddIgniteUIBlazor:

2 - Adicione o namespace IgniteUI.Blazor.Controls no arquivo_Imports.razor:

@using IgniteUI.Blazor.Controls

3 - Adicione a Folha de Estilo no elemento <head> do arquivo wwwroot/index.html:

<head>
    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

4 - Adicione referência de script ao arquivo wwwroot/index.html:

	<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
	<script src="_framework/blazor.webview.js" autostart="false"></script>

Add Ignite UI for Blazor Component

Adicione um componente Ignite UI for Blazor à sua página do Razor:

<IgbCard style="width:350px">
    <IgbCardMedia>
        <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
    </IgbCardMedia>
    <IgbCardHeader>
        <h4>Jane Doe</h4>
        <h6>Professional Photographer</h6>
    </IgbCardHeader>
    <IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
        Photography is a way of feeling, of touching,
        of loving. What you have caught on film is captured forever...
        it remembers little things, long after you have
        forgotten everything.</IgbCardContent>
    <IgbCardActions>
        <IgbButton>More Info</IgbButton>
    </IgbCardActions>
</IgbCard>

Crie e execute o aplicativo .NET MAUI Blazor para Windows.

[!Note] For more information about building corss platform applications with .NET MAUI, visit the Microsoft Documentation.