TwoPaneView-Layout von Xamarin.Forms

  • Artikel

Download Sample Das Beispiel herunterladen

Die TwoPaneView-Klasse stellt einen Container mit zwei Ansichten dar, die den Inhalt dem verfügbaren Platz entsprechend nebeneinander oder übereinander positionieren und in der Größe anpassen. TwoPaneView erbt von Grid. Diese Eigenschaften funktionieren also so, als würden sie auf ein Raster angewendet werden.

Einrichten von TwoPaneView

Führen Sie die folgenden Anweisungen aus, um ein Dual-Screen-Layout in Ihrer App zu erstellen:

  1. Befolgen Sie die Anweisungen zu den ersten Schritten, um NuGet hinzuzufügen und die Android-Klasse MainActivity zu konfigurieren.

  2. Beginnen Sie mit einem einfachen TwoPaneView-Layout mithilfe des folgenden XAML-Codes:

    <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>

Tipp

Im obigen XAML-Code werden viele allgemeine Attribute aus dem ContentPage-Element ausgelassen. Denken Sie daran, den xmlns:dualScreen-Namespace wie gezeigt zu deklarieren, wenn Sie ein TwoPaneView-Layout zu Ihrer App hinzufügen.

Grundlegendes zu den TwoPaneView-Modi

Nur einer der folgenden Modi kann aktiv sein:

  • SinglePane: Nur ein Bereich ist sichtbar.
  • Wide: Beide Bereiche werden horizontal angeordnet. Ein Bereich befindet sich auf der linken Seite, der andere auf der rechten Seite. Bei zwei Bildschirmen und einem Gerät im Hochformat wird dieser Modus verwendet.
  • Tall: Beide Bereiche werden vertikal angeordnet. Ein Bereich befindet sich oben und der andere unten. Bei zwei Bildschirmen und einem Gerät im Querformat wird dieser Modus verwendet.

Steuern von TwoPaneView bei einem Bildschirm

Die folgenden Eigenschaften werden angewendet, wenn TwoPaneView auf einem einzelnen Bildschirm verwendet wird:

  • MinTallModeHeight: gibt die minimale Höhe an, die das Steuerelement aufweisen muss, um in den Tall-Modus wechseln zu können.
  • MinWideModeWidth: gibt die minimale Breite an, die das Steuerelement aufweisen muss, um in den Wide-Modus wechseln zu können.
  • Pane1Length: legt die Breite von Pane1 im Wide-Modus sowie die Höhe von Pane1 im Tall-Modus fest. Die Eigenschaft hat keine Auswirkungen im SinglePane-Modus.
  • Pane2Length: legt die Breite von Pane2 im Wide-Modus sowie die Höhe von Pane2 im Tall-Modus fest. Die Eigenschaft hat keine Auswirkungen im SinglePane-Modus.

Wichtig

Wenn TwoPaneView auf zwei Bildschirmen eingesetzt wird, sind diese Eigenschaften wirkungslos.

Eigenschaften, die unabhängig der Bildschirmanzahl gelten

Die folgenden Eigenschaften werden angewendet, wenn TwoPaneView auf einem einzelnen Bildschirm oder auf zwei Bildschirmen verwendet wird:

  • TallModeConfiguration: Im Tall-Modus gibt diese Eigenschaft an, welcher Bereich oben und welcher unten angeordnet wird. Sie können in „TwoPaneViewPriority“ auch definieren, dass nur ein einzelner Bereich angezeigt werden soll.
  • WideModeConfiguration: Im Wide-Modus gibt diese Eigenschaft an, welcher Bereich links und welcher rechts angeordnet wird. Sie können in „TwoPaneViewPriority“ auch definieren, dass nur ein einzelner Bereich angezeigt werden soll.
  • PanePriority: Diese Eigenschaft gibt an, ob im SinglePane-Modus Pane1 oder Pane2 angezeigt werden soll.