:::no-loc(Xamarin.Forms)::: Layout di TwoPaneView:::no-loc(Xamarin.Forms)::: TwoPaneView layout

  • 2 minuti per la lettura

Scarica esempio Scaricare l'esempioDownload Sample Download the sample

La classe TwoPaneView rappresenta un contenitore con due visualizzazioni che consente di ridimensionare e posizionare il contenuto nello spazio disponibile, affiancandolo orizzontalmente o verticalmente.The TwoPaneView class represents a container with two views that size and position content in the available space, either side-by-side or top-to-bottom. Il controllo TwoPaneView eredita da Grid, quindi è più semplice pensare a queste proprietà come se fossero applicate a una griglia.TwoPaneView inherits from Grid so the easiest way to think about these properties is as if they are being applied to a grid.

Configurare il controllo TwoPaneViewSet up TwoPaneView

Seguire queste istruzioni per creare un layout a doppio schermo nell'app:Follow these instructions to create a dual-screen layout in your app:

  1. Seguire le istruzioni introduttive per aggiungere NuGet e configurare la classe Android MainActivity .Follow the get started instructions to add the NuGet and configure the Android MainActivity class.

  2. Iniziare con una base TwoPaneView usando il codice XAML seguente:Start with a basic TwoPaneView using the following XAML:

    <ContentPage
    xmlns:dualScreen="clr-namespace::::no-loc(Xamarin.Forms):::.DualScreen;assembly=:::no-loc(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' ContentPage elemento.The above XAML omits many common attributes from the ContentPage element. Quando si aggiunge un oggetto TwoPaneView all'app, ricordarsi di dichiarare lo xmlns:dualScreen spazio dei nomi come illustrato.When adding a TwoPaneView to your app, remember to declare the xmlns:dualScreen namespace as shown.

Informazioni sulle modalità di TwoPaneViewUnderstand TwoPaneView modes

Solo una di queste modalità può essere attiva:Only one of these modes can be active:

  • SinglePane: è attualmente visibile un solo riquadro.SinglePane only one pane is currently visible.
  • Wide: i due riquadri sono disposti orizzontalmente.Wide the two panes are laid out horizontally. Un riquadro si trova a sinistra e l'altro a destra.One pane is on the left and the other is on the right. Con due schermi, questa è la modalità usata quando il dispositivo viene usato con orientamento verticale.When on two screens this is the mode when the device is portrait.
  • Tall: i due riquadri sono disposti verticalmente.Tall the two panes are laid out vertically. Un riquadro si trova nella parte superiore e l'altro nella parte inferiore.One pane is on top and the other is on bottom. Con due schermi, questa è la modalità usata quando il dispositivo viene usato con orientamento orizzontale.When on two screens this is the mode when the device is landscape.

Controllo TwoPaneView con un solo schermoControl TwoPaneView when it's only on one screen

Quando il controllo TwoPaneView occupa un solo schermo si applicano le proprietà seguenti:The following properties apply when the TwoPaneView is occupying a single screen:

  • MinTallModeHeight indica l'altezza minima del controllo per passare alla modalità Tall.MinTallModeHeight indicates the minimum height the control must be to enter tall mode.
  • MinWideModeWidth indica la larghezza minima del controllo per passare alla modalità Wide.MinWideModeWidth indicates the minimum width the control must be to enter wide mode.
  • Pane1Length imposta la larghezza di Pane1 in modalità Wide, l'altezza di Pane1 in modalità Tall e non ha effetto in modalità SinglePane.Pane1Length sets the width of Pane1 in Wide mode, the height of Pane1 in Tall mode, and has no effect in SinglePane mode.
  • Pane2Length imposta la larghezza di Pane2 in modalità Wide, l'altezza di Pane2 in modalità Tall e non ha effetto in modalità SinglePane.Pane2Length sets the width of Pane2 in Wide mode, the height of Pane2 in Tall mode, and has no effect in SinglePane mode.

Importante

Se il controllo TwoPaneView è esteso su due schermi, queste proprietà non hanno alcun effetto.If the TwoPaneView is spanned across two screens these properties have no effect.

Proprietà che si applicano per l'uso con uno o due schermiProperties that apply when on one screen or two

Quando il controllo TwoPaneView occupa un solo schermo o due schermi si applicano le proprietà seguenti:The following properties apply when the TwoPaneView is occupying a single screen or two screens:

  • TallModeConfiguration indica, in modalità alta, la disposizione superiore/inferiore o se si desidera che un singolo riquadro sia visibile come definito da TwoPaneViewPriority.TallModeConfiguration indicates, when in tall mode, the Top/Bottom arrangement or if you only want a single pane visible as defined by the TwoPaneViewPriority.
  • WideModeConfiguration indica, in modalità "wide", la disposizione a sinistra/destra o se si vuole che un solo riquadro sia visibile come definito da TwoPaneViewPriority.WideModeConfiguration indicates, when in wide mode, the Left/Right arrangement or if you only want a single pane visible as defined by the TwoPaneViewPriority.
  • PanePriority indica se visualizzare Pane1 o Pane2 se in modalità SinglePane.PanePriority determines whether to show Pane1 or Pane2 if in SinglePane mode.