Cosa è MAUI.net SHELL

Cosa è MAUI.net SHELL

Cosa è MAUI.net SHELL

In questo articolo trovate una panoramica tecnica sulle SHELL, con esempi di codice e casi d’uso pratici per ingegneri informatici e sviluppatori .NET.

.NET Multi-platform App UI (MAUI) Shell è un livello di astrazione incluso in .NET MAUI che semplifica radicalmente lo sviluppo di applicazioni multi-pagina fornendo funzionalità fondamentali come navigazione, gerarchia visiva unica e ricerca integrata. In questo articolo vedremo:

1. Breve introduzione a .NET MAUI
2. Definizione e scopo di Shell
3. Come creare un’app Shell in MAUI.net
4. Gerarchia visiva (FlyoutItem, TabBar, Tab, ShellContent)
5. Elementi fondamentali: Popup, Schede (TabBar/Tab), Pagine, Navigazione, Ricerca
6. Ciclo di vita di un’app Shell

Breve introduzione a .NET MAUI

.NET MAUI (Multi-platform App UI) è il framework cross-platform di Microsoft per creare applicazioni native su Windows, macOS, iOS, Android e Tizen con un’unica codebase in C# e XAML . .NET MAUI è il successore di Xamarin.Forms e sfrutta WinUI 3 su Windows e Mac Catalyst su macOS, offrendo una potente engine di layout e binding dati avanzato .

Cosa è MAUI.net SHELL e a cosa serve

MAUI.net SHELL è un’estensione di .NET MAUI che:

• Fornisce un unico file (AppShell) per descrivere la gerarchia visiva dell’app .
• Implementa un’esperienza di navigazione comune basata su flyout e tab .
• Utilizza un URL-based routing per navigare a qualsiasi pagina senza vincoli di stack .
• Integra un SearchHandler per la ricerca in-app .

Questi meccanismi riducono la complessità di progetti con molte pagine e pattern di navigazione variegati, standardizzando e accelerando lo sviluppo.

Come programmare un’app Shell

• Creazione del progetto

dotnet new maui -n MyShellApp

Oppure in Visual Studio: scegli “.NET MAUI App” e abilita la generazione di Shell

• Definizione della classe AppShell

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       x:Class="MyShellApp.AppShell">
  <!-- FlyoutItem, TabBar, ecc. -->
</Shell>

Tutta la gerarchia dell’app verrà descritta qui .

• Registrazione di rotte aggiuntive
  Se serve navigazione verso pagine non direttamente nella gerarchia Shell:

Routing.RegisterRoute(nameof(InfoPage), typeof(InfoPage));

Poi:

await Shell.Current.GoToAsync(nameof(InfoPage));
``` :contentReference[oaicite:8]{index=8}.  

Gerarchia visiva dell’app Shell MAUI.net

La classe Shell può contenere tre tipi di oggetti gerarchici:

1. FlyoutItem o TabBar
   • FlyoutItem: crea un menu laterale (flyout) .
   • TabBar: crea una barra di tab in basso .
2. Tab
   Raggruppa contenuti navigabili tramite tab inferiori.
3. ShellContent
   Mappa ciascun tab o voce di flyout a una ContentPage .

Esempio in AppShell.xaml:

<FlyoutItem Title="Home">
  <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
</FlyoutItem>
<TabBar>
  <Tab Title="Settings">
    <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
  </Tab>
</TabBar>

Elementi fondamentali della Shell MAUI.net

Popup

Esempio XAML:

<toolkit:Popup xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               x:Class="MyShellApp.SimplePopup">
  <VerticalStackLayout>
    <Label Text="Messaggio importante!" />
    <Button Text="OK" Clicked="OnOkClicked" />
  </VerticalStackLayout>
</toolkit:Popup>

Codice per aprire:

this.ShowPopup(new SimplePopup());

Chiudere con:

popup.Close();
``` :contentReference[oaicite:15]{index=15}.  

### Schede (TabBar e Tab)  
- **TabBar**: definisce i tab inferiori.  
- **Tab**: raggruppa più `ShellContent`.  

```xml
<TabBar>
  <Tab Title="News">
    <ShellContent ContentTemplate="{DataTemplate local:NewsPage}" />
  </Tab>
  <Tab Title="Profile">
    <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
  </Tab>
</TabBar>

Pagine

Le pagine sono classi ContentPage:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             x:Class="MyShellApp.HomePage">
  <StackLayout>
    <Label Text="Benvenuto in Home" />
  </StackLayout>
</ContentPage>
``` :contentReference[oaicite:16]{index=16}.

### Navigazione e ricerca  
- **Navigazione**: `await Shell.Current.GoToAsync("route")` usando rotte basate su URI :contentReference[oaicite:17]{index=17}.  
- **SearchHandler**: integrato in Shell, si aggiunge così:
  ```xml
  <Shell.SearchHandler>
    <local:MySearchHandler />
  </Shell.SearchHandler>

Dove MySearchHandler estende SearchHandler e popola suggerimenti e logica di selezione.

Ciclo di vita dell’app Shell MAUI.net

• Eventi di pagina: OnAppearing(), OnDisappearing() propagati da Shell .
• Stati dell’app: Window solleva eventi Activated, Deactivated, Stopped secondo il ciclo di vita cross-platform di MAUI .

protected override void OnAppearing()
{
  base.OnAppearing();
  // logica di inizializzazione
}

Conclusioni

MAUI.net Shell è uno strumento potente per gestire navigazione, gerarchia visiva e ricerca in modo dichiarativo e centralizzato, riducendo boilerplate e complessità. Grazie a Flyout, TabBar, SearchHandler e Popup del Community Toolkit, è possibile implementare rapidamente pattern di navigazione avanzati con poche righe di XAML e C#.

(fonte)

Innovaformazione, scuola informatica specialistica promuove lo sviluppo in MAUI.net in maniera consapevole accompagnando le aziende nella formazione IT con il Corso MAUI.net .

Per altri articoli tecnici consigliamo invece di navigare sul nostro blog QUI.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)