.NET MAUI TwoPaneView-Layout

Durchsuchen Sie den Beispielcode

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.

Das Layoutsteuerelement wird durch das Microsoft.Maui.Controls.Foldable NuGet-Paket bereitgestellt.

Übersicht über faltbare Geräteunterstützung

Faltbare Geräte umfassen die Microsoft Surface Duo- und Android-Geräte von anderen Herstellern. Sie schließen die Lücke zwischen Telefonen und größeren Bildschirmen wie Tablets und Desktops, da sich Anwendungen auf ein und demselben Gerät an verschiedene Bildschirmgrößen und -ausrichtungen anpassen müssen, einschließlich der Anpassung an ein Scharnier oder eine Faltung des Bildschirms.

Besuchen Sie die Doppelbildschirm-Entwicklerdokumentation für weitere Informationen über die Entwicklung von Apps für faltbare Geräte, einschließlich Designmuster und Benutzererfahrungen. Es gibt auch einen Surface Duo-Emulator, den Sie für Windows, Mac und Linux herunterladen können.

Wichtig

Das TwoPaneView-Steuerelement passt sich nur an faltbare Android-Geräte an, die die von Google bereitgestellte Jetpack Window Manager-API unterstützen (z. B. Microsoft Surface Duo).

Auf allen anderen Plattformen und Geräten (d. h. anderen Android-Geräten, iOS, macOS, Windows) funktioniert es als konfigurierbare und reaktionsfähige geteilte Ansicht, die dynamisch ein oder zwei Bereiche in proportionaler Größe auf dem Bildschirm anzeigen kann.

Hinzufügen und Konfigurieren der NuGet-Unterstützung für Foldable

1. Öffnen Sie das Dialogfeld NuGet-Paket-Manager für Ihre Projektmappe.

2. Suche auf der Registerkarte Durchsuchen nach Microsoft.Maui.Controls.Foldable.

3. Installieren Sie das Paket Microsoft.Maui.Controls.Foldable in Ihrer Projektmappe.

4. Fügen Sie den Aufruf der Initialisierungsmethode UseFoldable() (und des Namespace) in der Klasse MauiApp des Projekts in die Methode CreateMauiApp ein:

   using Microsoft.Maui.Foldable; // ADD THIS NAMESPACE
   ...
   public static MauiApp CreateMauiApp()
   {
       var builder = MauiApp.CreateBuilder();
       ...
       builder.UseFoldable(); // ADD THIS LINE TO THE TEMPLATE
       return builder.Build();
   }
   

   Die Initialisierung von UseFoldable() ist notwendig, damit die App Änderungen im Zustand der App erkennen kann, z. B. wenn sie über eine Falte gestreckt wird.

5. Aktualisieren Sie das [Activity(...)]-Attribut der MainActivity-Klasse in Plattformen/Android, sodass es alle diese ConfigurationChanges-Optionen enthält:

   ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
       | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
   

   Diese Werte sind erforderlich, damit Konfigurationsänderungen und der Spannenstatus für eine zuverlässige Dual-Screen-Unterstützung zuverlässiger gemeldet werden können.

Einrichten von TwoPaneView

So fügen Sie das TwoPaneView-Layout zu Ihrer Seite hinzu:

1. Fügen Sie einen foldable-Namespacealias für das Foldable NuGet hinzu:

   xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"
   

2. Fügen Sie TwoPaneView als Stammelement der Seite hinzu und fügen Sie Steuerelemente zu Pane1 und Pane2 hinzu:

   <foldable:TwoPaneView x:Name="twoPaneView">
       <foldable:TwoPaneView.Pane1
           BackgroundColor="#dddddd">
           <Label
               Text="Hello, .NET MAUI!"
               SemanticProperties.HeadingLevel="Level1"
               FontSize="32"
               HorizontalOptions="Center" />
       </foldable:TwoPaneView.Pane1>
       <foldable:TwoPaneView.Pane2>
           <StackLayout BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}">
               <Label Text="Pane2 StackLayout"/>
           </StackLayout>
       </foldable:TwoPaneView.Pane2>
   </foldable:TwoPaneView>
   

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 Mindesthöhe an, die die Steuerung haben muss, um in den Modus Tall zu gelangen.
• MinWideModeWidth gibt die Mindestbreite an, die die Steuerung haben muss, um in den Modus Wide zu gelangen.
• Pane1Length bestimmt die Breite von Pane1 im Modus Wide, die Höhe von Pane1 im Modus Tall und hat keine Auswirkung im Modus SinglePane.
• Pane2Length bestimmt die Breite von Pane2 im Modus Wide, die Höhe von Pane2 im Modus Tall und hat keine Auswirkung im Modus SinglePane.

Wichtig

Wenn die TwoPaneView über ein Scharnier oder eine Falte gespannt ist, haben diese Eigenschaften keine Wirkung.

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 bestimmt die Anordnung oben/unten im Modus Tall oder ob nur ein Bereich sichtbar sein soll, wie in der TwoPaneViewPriority definiert.
• WideModeConfiguration bestimmt die Anordnung links/rechts im Modus Wide oder wenn nur ein Bereich sichtbar sein soll, wie in der TwoPaneViewPriority definiert.
• PanePriority bestimmt, ob im Modus SinglePane Pane1 oder Pane2 angezeigt werden soll.

Problembehandlung

Wenn das Layout TwoPaneView nicht erwartungsgemäß funktioniert, überprüfen Sie die Anweisungen zur Einrichtung auf dieser Seite noch einmal. Das Auslassen oder fehlerhafte Konfigurieren der UseFoldable()-Methode oder der ConfigurationChanges-Attributwerte sind häufig die Ursache für Fehler.