Xamarin.Forms Layout twoPaneView

Scaricare l'esempio Scaricare l'esempio

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 il NuGet e configurare la classe Android.

  2. Iniziare con un elemento di TwoPaneView base usando il codice XAML seguente:

    <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 ContentPage dall'elemento . Quando si aggiunge un TwoPaneView oggetto all'app, ricordarsi di dichiarare lo spazio xmlns:dualScreen 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, in modalità Tall, la disposizione Top/Bottom o se si vuole che un solo riquadro sia visibile come definito da TwoPaneViewPriority.
  • WideModeConfiguration indica, in modalità wide, la disposizione sinistra/destra o se si vuole che un solo riquadro sia visibile come definito da TwoPaneViewPriority.
  • PanePriority indica se visualizzare Pane1 o Pane2 se in modalità SinglePane.