Layout .NET MAUI TwoPaneView

Il controllo TwoPaneLayout fornisce un contenitore di layout adattivo con due elementi figlio: Pane1 e Pane2. Nei dispositivi a doppio schermo e piegabili, il controllo posiziona i riquadri su entrambi i lati della cerniera o della piega. In tutti gli altri tipi di dispositivo il comportamento del layout è configurabile e può visualizzare uno o entrambi i riquadri in base alle proprietà impostate sul controllo.

Introduzione

Le istruzioni per aggiungere il controllo TwoPaneView al progetto sono disponibili nella documentazione di .NET MAUI aggiungendo Microsoft.Maui.Controls.Foldable NuGet.

Il codice seguente è un semplice esempio XAML di TwoPaneView, che mostra:

• foldable spazio dei nomi richiesto nell'elemento radice
• Proprietà impostate sull'elemento TwoPaneView (può anche usare l'associazione o essere impostata a livello di codice)
• Pane1 e Pane2 contenitori in cui si aggiungono i layout

<ContentPage xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable">
    <foldable:TwoPaneView
            TallModeConfiguration="SinglePane"
            WideModeConfiguration="LeftRight"
            PanePriority="Pane1">
        <foldable:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </foldable:TwoPaneView.Pane1>
        <foldable:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </foldable:TwoPaneView.Pane2>
    </foldable:TwoPaneView>
</ContentPage>

Per impostazione predefinita, TwoPaneView tenterà di eseguire sempre il rendering di entrambi i riquadri, ovvero quando l'app è in esecuzione in una singola schermata, la visualizzazione verrà divisa tra i due riquadri. Le proprietà seguenti possono essere usate per influire sul layout quando viene eseguito solo il rendering in una schermata:

• MinTallModeHeight : indica l'altezza minima che il controllo deve essere per immettere la modalità Tall.
• MinWideModeWidth : indica che la larghezza minima del controllo deve essere quella di immettere la modalità Wide.
• Pane1Length : imposta la larghezza di in modalità Wide, l'altezza di Pane1Pane1 in modalità Tall e non ha alcun effetto in modalità SinglePane.
• Pane2Length : imposta la larghezza di in modalità Wide, l'altezza di Pane2Pane2 in modalità Tall e non ha alcun effetto in modalità SinglePane.

In Surface Duo (e altri dispositivi piegabili), le applicazioni possono essere estese in una cerniera o in una piega. Il controllo TwoPaneView dispone di proprietà aggiuntive che determinano la posizione in cui viene eseguito il rendering dei due riquadri l'uno rispetto all'altro (con singolo o doppio schermo):

• TallModeConfiguration : quando in modalità alta, i riquadri possono essere Top/Bottom, Bottom/Top o un solo riquadro può essere visualizzato.
• WideModeConfiguration : quando in modalità wide, i riquadri possono essere Left/Right, Right/Left o un solo riquadro.
• PanePriority : se visualizzare Pane1 o se in modalità SinglePane viene scelto per la modalità alta o Pane2 wide.

Sono disponibili tre modalità di visualizzazione:

• SinglePane: è attualmente visibile un solo riquadro.
• Wide: i due riquadri sono disposti orizzontalmente. Un riquadro si trova a sinistra e l'altro a destra. In Surface Duo le due schermate sono in modalità verticale.
• Tall: i due riquadri sono disposti verticalmente. Un riquadro si trova nella parte superiore e l'altro nella parte inferiore. In Surface Duo le due schermate sono in modalità orizzontale.

Esempio

Scaricare ed eseguire l'esempio di playground TwoPaneView da GitHub. Questo screenshot mostra come l'esempio espone le varie proprietà del controllo TwoPaneView per la sperimentazione:

Risoluzione dei problemi

Se si osserva un comportamento o un layout imprevisto da TwoPaneView, controllare le istruzioni di configurazione, incluso il metodo del generatore e ConfigurationChanges l'attributoUseFoldable().