Usare le schede con le pagine nello stack di esplorazione

  • 5 minuti

L’esplorazione con riquadri a comparsa e con schede sono solo due modi per consentire a un utente di spostarsi tra i dati presentati da un'app. Un'altra tecnica consiste nell'usare lo spostamento in stack. Ogni tipo di spostamento è adatto a diversi tipi di relazioni tra le pagine.

Puoi usare lo spostamento tra stack in combinazione con riquadri a comparsa e schede. In questa unità vengono esaminate brevemente le differenze tra lo spostamento tramite schede e riquadri a comparsa e lo spostamento in stack, quindi viene descritto come creare app che combinano entrambe le tecniche.

Revisione dello spostamento tramite riquadri a comparsa e schede

I riquadri a comparsa e lo spostamento tramite schede offrono un meccanismo utile per consentire all'utente di selezionare la pagina da visualizzare in qualsiasi momento. L'utente si sposta su una pagina semplicemente selezionando la scheda o il riquadro a comparsa appropriato. Questa forma di spostamento è utile per gli elementi di dati che hanno una relazione peer. Nell'app Astronomy le pagine Sun, Moon e About sono tutte di tipo peer e non c'è alcuna relazione diretta tra loro.

Per i dati gerarchici, tuttavia, lo spostamento in stack può essere più appropriato. Lo spostamento in stack consente all'utente di eseguire il drill-down di una serie di pagine, serie in cui la pagina successiva nello stack offre una visualizzazione più dettagliata di un elemento selezionato nella pagina precedente.

Prendi in considerazione lo scenario seguente:

Si aggiunge una nuova pagina all'app Astronomy che mostra corpi astronomici. Si desidera che l'utente tocchi uno di questi oggetti celesti e quindi visualizzi le informazioni relative. La pagina in cui sono elencati i corpi astronomici viene presentata meglio come elemento di pari livello delle pagine dedicate alla fase lunare e all'alba. Le informazioni dettagliate sul corpo astronomico sono presentate meglio come una serie di passaggi che usano lo spostamento in stack. Questo meccanismo consente inoltre all'utente di tornare alla pagina dei corpi astronomici principali semplicemente toccando un pulsante Indietro.

.NET Multi-platform App UI (MAUI) Shell include un'esperienza di spostamento basata su URI che usa le route per spostarsi su qualsiasi pagina dell'app, senza che sia necessario seguire una gerarchia di spostamento definita. Inoltre, la shell consente di spostarsi all'indietro senza dover visitare tutte le pagine dello stack di spostamento.

La classe Shell definisce le proprietà correlate allo spostamento seguenti:

  • BackButtonBehavior, di tipo BackButtonBehavior, una proprietà associata che definisce il comportamento del pulsante Indietro.
  • CurrentItem, di tipo ShellItem, l'elemento attualmente selezionato.
  • CurrentPage, di tipo Page, la pagina attualmente presentata.
  • CurrentState, di tipo ShellNavigationState, lo stato di spostamento corrente di Shell.
  • Current, di tipo Shell, un alias con cast del tipo per Application.Current.MainPage.

Lo spostamento viene eseguito richiamando il metodo GoToAsync dalla classe Shell.

Route

Lo spostamento viene eseguito in un'app Shell specificando un URI a cui passare. Gli URL di spostamento possono essere composti da tre componenti:

  • Una route, che definisce il percorso del contenuto esistente nell'ambito della gerarchia visiva di Shell.
  • Una pagina. Le pagine che non esistono nella gerarchia visiva di Shell possono essere inserite nello stack di spostamento da qualsiasi posizione all'interno di un'app Shell. Una pagina dei dettagli, ad esempio, non viene definita nella gerarchia visiva di Shell, ma può essere inserita nello stack di spostamento in base alle esigenze.
  • Uno o più parametri di query. I parametri di query possono essere passati alla pagina di destinazione durante lo spostamento.

Quando un URI di spostamento include tutti i componenti, la struttura è la seguente: //route/page?queryParameters

Registrare le route

Le route possono essere definite in oggetti FlyoutItem, TabBar, Tab e ShellContent tramite le relative proprietà Route:

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

Per spostarsi sulla route moonphase, l'URI assoluto della route è //astronomy/moonphase

Registrare le route di dettaglio

Nel costruttore della sottoclasse Shell o in qualsiasi altra posizione eseguita prima che venga richiamata una route, puoi registrare in modo esplicito una route usando il metodo Routing.RegisterRoute per le pagine di dettaglio che non sono rappresentate nella gerarchia visiva della shell.

Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));

Per spostarsi a AstronomicalBodyPage è necessario quindi richiamare:

await Shell.Current.GoToAsync("astronomicalbodydetails");`

Spostamento indietro

Per eseguire lo spostamento indietro, è possibile specificare ".." come argomento al metodo GoToAsync:

await Shell.Current.GoToAsync("..");

Passaggio di dati

I dati primitivi possono essere passati come parametri di query basati su stringa quando si esegue lo spostamento programmatico basato su URI. Passa i dati aggiungendo ? dopo una route, seguita da un ID parametro di query, = e un valore:

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

Il questo esempio, la route è astronomicalbodydetails, il parametro è bodyName e il valore deriva dalla variabile celestialName.

Recupero dei dati

I dati di spostamento possono essere ricevuti decorando la classe ricevente con un elemento QueryPropertyAttribute per ogni parametro di query basato su stringa e per ogni parametro di spostamento basato su oggetto:

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

In questo esempio, il primo argomento per QueryPropertyAttribute specifica il nome della proprietà che riceve i dati, con il secondo argomento che specifica l'ID del parametro.

Verificare le conoscenze

1.

Come si inviano dati a una pagina quando si usa lo spostamento basato su route della shell di .NET MAUI?