Eccoci qui alla penultima parte di questa piccola serie in cui ho blaterato un pò sulle MAUI HybridView.

Nella scorso puntata abbiamo impostato il progetto Blazor per usare per le proprie pagine un progetto shared.

Per comodità abbiamo usato Interactive Render Mode = Server, ma nulla o poco sarebbe cambiato se avessimo usato altri tipi di Render Mode.

L’intento è quello di usare lo stesso progetto anche per un progetto MAUI.

Parte 2 – Aggiunta progetto MAUI
Aggiungere alla solution creata un progetto MAUI HybridView chiamato MauiAppHybrid, e con Framework il solito DotNetCore 8.

Osservazione importante: si può partire da un progetto MAUI “classico”, ma partendo da un progetto MAUI HybridView otteniamo un progetto con diverse cose già impostate e configurate.

Una volta creato il progetto occorre per semplicità cancellare totalmente la cartella Pages, e quindi aggiungere un reference al progetto RazorCLib.

Per comodità anche in questo caso è meglio aggiungere in fondo al file _Imports.razor che trovate dentro la cartella Components il namespace che identifica le pagine poste nella libreria condivisa RazorCLib.

@using RazorCLib.Pages

Quindi per ultimo modificare Router.razor in modo perfettamente uguale a quanto visto nel caso del progetto Blazor.

Basta: non occorre fare null’altro.

A questo punto della storia abbiamo ottenuto un progetto MAUI che utilizza dei componenti razor posti in un progetto separato: gli stesso componenti sono utilizzabili anche dal progetto Blazor.

Non è fantastico ?

Parte 3 – Visualizzare solo un singolo componente
Ora volevo mostrare una cosa veramente banale, ma che se Vi approcciate la prima all’argomento potrebbe non essere così scontato.

Con quanto fatto prima otteniamo che la BlazorWebView permette di navigare tra l’insieme di TUTTE le pagine: in pratica abbiamo abilitata la navigazione completa con tanto di menù.

Però spesso e volentieri si vuole fare una cosa diversa: cioè visualizzare all’interno del componente BlazorWebView in MAUI SOLO un componente razor tra tutti quelli disponibili.

Ecco che si vuole ottenere questo risultato occorre modiifcare la pagina MainPage.xaml come nel seguito

Cosa abbiamo fatto ? In sostanza abbiamo aggiunto il namespace extlib e modificato il parametro ComponentType.

In questo modo abbiamo fatto “puntare” la BlazorWebView al singolo componente.

Scusate la banalità ma mi sembrava interessante evidenziarlo !

Nel prossimo post vedremo ancora alcune cose interessanti sull’argomento, e che evidenziano ancora di più come un possibile futuro di MAUI sia nelle HybridView.

Linkografia

Gptucci Github Repo
MAUI: un futuro nelle HybridView ? Parte 1
MAUI: un futuro nelle HybridView ? Parte 2
MAUI: un futuro nelle HybridView ? Parte 3
MAUI: un futuro nelle HybridView ? Parte 4