.NET MAUI Blazor Hybrid - Usando o MudBlazor

 Neste tutorial vou mostrar como criar uma aplicação Blazor Hybrid usando o MudBlazor.
 
Vamos iniciar fazendo as apresentações : O .NET MAUI é um framework para construção de aplicativos de  multiplatafor e o Blazor é um framework da web para construção de aplicativos web interativos usando C# e .NET.

Um aplicativo .NET MAUI Blazor Hybrid combina o poder de ambas as tecnologias, permitindo que os desenvolvedores criem aplicativos que podem ser executados em várias plataformas, incluindo Windows, macOS, iOS e Android.

Já o MudBlazor é uma biblioteca de componentes de UI de código aberto para aplicativos Blazor que fornece um conjunto de componentes reutilizáveis e personalizáveis que os desenvolvedores podem usar para criar interfaces de usuário modernas e responsivas em seus projetos Blazor.

Esses componentes incluem botões, formulários, caixas de diálogo, grades de dados e muito mais. O MudBlazor visa simplificar o processo de desenvolvimento, oferecendo uma ampla gama de componentes pré-construídos com estilo e funcionalidade integrados, tornando mais fácil para os desenvolvedores criarem aplicativos consistentes e visualmente atraentes.

A seguir vamos criar uma pequena aplicação usando o template .NET MAUI Blazor Hybrid App e usar o MudBlazor.

Criando o projeto no Visual Studio

Abra o VS 2022 e crie um novo projeto usando o template .NET MAUI Blazor Hybrid App nomeando-o como MauiAppMudBlazor.

Na janela Solution Explorer teremos o projeto conforme a figura:

Estando na pasta do projeto vamos instalar o pacote do MudBlazor no projeto usando o comando:  Install-Package MudBlazor

A seguir inclua a referência ao MudBlazor no arquivo _Imports.razor :

@using MudBlazor

Agora inclua as referências às fontes e estilos na seção head no arquivo Index.html dentro de wwwroot:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

No mesmo arquivo inclua a referência a biblioteca javascript do MudBlazor:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Podemos remover a referência ao Bootstrap do arquivo Index.html pois elas não são necessárias e também a pasta bootstrap que esta dentro de wwwroot/css:

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

No arquivo MauiProgram vamos registrar o serviço do MudBlazor incluindo o código a seguir:

 builder.Services.AddMudServices();

Criando o componente MudBlazor

Agora vamos incluir layout básico no arquivo MainLayout.razor usando o componente <ThemeProvider> que é essencial para o MudBlazor:

@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Href="https://mudblazor.com/" Target="_blank" />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/arbems/.NET-MAUI-Blazor-Hybrid-app-with-MudBlazor" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">MyApplication</MudText>
        </MudDrawerHeader>
        <NavMenu />
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.Large" Class="my-5 pt-5">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>
@code {
    bool _drawerOpen = true;
    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

Atualize agora o arquivo MavMenu.razor que é nosso menu de navegação :

<MudNavMenu>
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
<MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
<MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
</MudNavMenu>

Atualize o arquivo Home.razor :

@page "/"

<PageTitle>Index</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor!</MudText>
<MudAlert Severity="Severity.Normal">You can find documentation and examples on our website here:
<MudLink Href="https://mudblazor.com" Typo="Typo.body2" Color="Color.Inherit"><b>www.mudblazor.com</b></MudLink></MudAlert>

Atualize agora o arquivo Counter.razor :

@page "/counter"

<h1>Counter</h1>

<PageTitle>Counter</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Counter</MudText>
<MudText Class="mb-4">Current count: @currentCount</MudText>
<MudButton Color="Color.Primary" Variant="Variant.Filled" @onclick="IncrementCount">Click me</MudButton>

Finalmente atualize o arquivo Weather.razor :

<PageTitle>Weather forecast</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
{
    <MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
   <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
      <HeaderContent>
         <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)  </MudTableSortLabel></MudTh>
          <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
         <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
</HeaderContent>
<RowTemplate>
      <MudTd DataLabel="Date">@context.Date</MudTd>
     <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
     <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
      <MudTd DataLabel="Summary">@context.Summary</MudTd>
</RowTemplate>
<PagerContent>
     <MudTablePager PageSizeOptions="new int[]{50, 100}" />
</PagerContent>
</MudTable>
}

Para executar o aplicativo no emulador Android do visual studio, certifique-se de ter as versões necessárias do Android instaladas. Vá em “Ferramentas” > “Android SDK Manager” e configure o emulador Android. Após isso você pode iniciar o emulador.

Para executar a partir de um dispositivo Android físico, faça o seguinre:

1. Habilite a depuração USB no dispositivo:

No seu dispositivo Android, vá em “Configurações” > “Sobre o telefone” e toque repetidamente no número da versão até que a mensagem “Agora você é um desenvolvedor” apareça.

Nas opções do desenvolvedor, habilite “Depuração USB”.

2. Usando um cabo USB, conecte seu dispositivo Android ao computador.
3. No dispositivo, pode ser solicitado que você aceite a conexão USB e permita a depuração.
4. E finalmente, no Visual Studio, selecione o dispositivo Android conectado como destino de execução antes de iniciar a depuração.

Para executar selecione no menu do Visual Studio : Android Emuladors e o emulador que você configurou :

Executando o projeto teremos o resultado abaixo:

E estamos conversados...

"Porque o Senhor Deus é um sol e escudo; o Senhor dará graça e glória; não retirará bem algum aos que andam na retidão"
Salmos 84:11

Referências:

José Carlos Macoratti