.NET MAUI TwoPaneView-Layout

Das TwoPaneLayout-Steuerelement stellt einen adaptiven Layoutcontainer mit zwei untergeordneten Elementen bereit: Pane1 und Pane2. Auf Dual-Screen- und faltbaren Geräten positioniert das Steuerelement die Scheiben auf beiden Seiten des Scharniers oder faltet. Auf allen anderen Gerätetypen ist das Layoutverhalten konfigurierbar und kann gemäß den für das Steuerelement festgelegten Eigenschaften entweder einen oder beide Bereiche anzeigen.

Erste Schritte

Anweisungen zum Hinzufügen des TwoPaneView-Steuerelements zu Ihrem Projekt finden Sie in der .NET MAUI-Dokumentation, indem Sie microsoft.Maui.Controls.Foldable NuGet hinzufügen.

Der folgende Code ist ein einfaches XAML-Beispiel für TwoPaneView, das zeigt:

• foldable Erforderlicher Namespace im Stammelement
• Eigenschaften, die für das TwoPaneView-Element festgelegt sind (können auch eine Bindung verwenden oder programmgesteuert festgelegt werden)
• Pane1 und Pane2 Container, in denen Sie Ihre Layouts hinzufügen

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

Standardmäßig versucht TwoPaneView, immer beide Bereiche zu rendern. Wenn die App auf einem einzelnen Bildschirm ausgeführt wird, wird die Ansicht auf die beiden Bereiche aufgeteilt. Die folgenden Eigenschaften können verwendet werden, um das Layout zu beeinflussen, wenn es nur auf einem Bildschirm gerendert wird:

• MinTallModeHeight : Gibt die Mindesthöhe an, die das Steuerelement haben muss, um in den Tall-Modus zu wechseln.
• MinWideModeWidth : Gibt die Mindestbreite an, die das Steuerelement haben muss, um in den Wide-Modus zu wechseln.
• Pane1Length : Legt die Breite von Pane1 im Modus Breit fest, die Höhe von Pane1 im Hochformatmodus und hat keine Auswirkungen im SinglePane-Modus.
• Pane2Length : Legt die Breite von Pane2 im Modus Breit fest, die Höhe von Pane2 im Hochformatmodus und hat keine Auswirkungen im SinglePane-Modus.

Auf dem Surface Duo (und anderen faltbaren Geräten) können Anwendungen über ein Scharnier oder eine Faltung überspannt werden. Das TwoPaneView-Steuerelement verfügt über zusätzliche Eigenschaften, die bestimmen, wo die beiden Bereiche in Beziehung zueinander gerendert werden (sowohl bei einem einzelnen als auch bei zwei Bildschirmen):

• TallModeConfiguration : Im Hochformat können die Bereiche Top/Bottom, Bottom/Top oder nur ein einzelner Bereich angezeigt werden.
• WideModeConfiguration : Im Breitenmodus können die Bereiche links/rechts, Rechts/Links oder nur ein einzelner Bereich sein.
• PanePriority – gibt an, Pane1Pane2 ob der SinglePane-Modus für den Modus "Hoch" oder "Breit" ausgewählt wird.

Es gibt drei Anzeigemodi:

• SinglePane: Derzeit ist nur ein Bereich sichtbar.
• Wide: Die beiden Bereiche sind horizontal angeordnet. Ein Bereich befindet sich auf der linken Seite, der andere auf der rechten Seite. Auf dem Surface Duo befinden sich die beiden Bildschirme im Hochformatmodus.
• Tall: Die beiden Bereiche sind vertikal angeordnet. Ein Bereich befindet sich oben und der andere unten. Auf dem Surface Duo befinden sich die beiden Bildschirme im Querformat.

Beispiel

Laden Sie das TwoPaneView-Playgroundbeispiel von GitHub herunter, und führen Sie es aus. Dieser Screenshot zeigt, wie das Beispiel die verschiedenen Eigenschaften des TwoPaneView-Steuerelements für Experimente verfügbar macht:

Problembehandlung

Wenn Sie unerwartetes Verhalten oder Layout von TwoPaneViewfeststellen, überprüfen Sie die Setupanweisungen, einschließlich der Builder-Methode und des UseFoldable()ConfigurationChanges Attributs.