Xamarin.Forms Layout TwoPaneView

  • Articolo

La classe TwoPaneView rappresenta un contenitore con due visualizzazioni che consente di ridimensionare e posizionare il contenuto nello spazio disponibile, affiancandolo orizzontalmente o verticalmente. Il controllo TwoPaneView eredita da Grid, quindi è più semplice pensare a queste proprietà come se fossero applicate a una griglia.

Configurare il controllo TwoPaneView

Seguire queste istruzioni per creare un layout a doppio schermo nell'app:

  1. Seguire le istruzioni introduttive per aggiungere NuGet e configurare la classe Android MainActivity .

  2. Iniziare con un codice XAML di base TwoPaneView :

    <ContentPage
    xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen">
    <dualScreen:TwoPaneView>
        <dualScreen:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane1>
        <dualScreen:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane2>
    </dualScreen:TwoPaneView>
</ContentPage>

Suggerimento

Il codice XAML precedente omette molti attributi comuni dall'elemento ContentPage . Quando si aggiunge un oggetto TwoPaneView all'app, ricordarsi di dichiarare lo xmlns:dualScreen spazio dei nomi come illustrato.

Informazioni sulle modalità di TwoPaneView

Solo una di queste modalità può essere attiva:

  • SinglePane: è attualmente visibile un solo riquadro.
  • Wide: i due riquadri sono disposti orizzontalmente. Un riquadro si trova a sinistra e l'altro a destra. Con due schermi, questa è la modalità usata quando il dispositivo viene usato con orientamento verticale.
  • Tall: i due riquadri sono disposti verticalmente. Un riquadro si trova nella parte superiore e l'altro nella parte inferiore. Con due schermi, questa è la modalità usata quando il dispositivo viene usato con orientamento orizzontale.

Controllo TwoPaneView con un solo schermo

Quando il controllo TwoPaneView occupa un solo schermo si applicano le proprietà seguenti:

  • MinTallModeHeight indica l'altezza minima del controllo per passare alla modalità Tall.
  • MinWideModeWidth indica la larghezza minima del controllo per passare alla modalità Wide.
  • Pane1Length imposta la larghezza di Pane1 in modalità Wide, l'altezza di Pane1 in modalità Tall e non ha effetto in modalità SinglePane.
  • Pane2Length imposta la larghezza di Pane2 in modalità Wide, l'altezza di Pane2 in modalità Tall e non ha effetto in modalità SinglePane.

Importante

Se il controllo TwoPaneView è esteso su due schermi, queste proprietà non hanno alcun effetto.

Proprietà che si applicano per l'uso con uno o due schermi

Quando il controllo TwoPaneView occupa un solo schermo o due schermi si applicano le proprietà seguenti:

  • TallModeConfiguration indica, quando è in modalità alta, la disposizione Superiore/Inferiore o se si desidera visualizzare un singolo riquadro come definito da TwoPaneViewPriority.
  • WideModeConfiguration indica, quando è in modalità wide, la disposizione sinistra/destra o se si vuole visualizzare un solo riquadro come definito da TwoPaneViewPriority.
  • PanePriority indica se visualizzare Pane1 o Pane2 se in modalità SinglePane.