Układ elementu TwoPaneView dla platformy .NET MAUI

Artykuł
08/30/2024

Klasa TwoPaneView reprezentuje kontener z dwoma widokami, które mają rozmiar i umieść zawartość w dostępnym miejscu — obok siebie lub u góry do dołu. TwoPaneView dziedziczy z Grid tak najprostszym sposobem, aby myśleć o tych właściwościach jest tak, jakby były stosowane do siatki.

Surface Duo dual-screen emulator showing a basic TwoPaneView test app

Kontrolka układu jest dostarczana przez pakiet NuGet Microsoft.Maui.Controls.Foldable.

Omówienie obsługi składanych urządzeń

Urządzenia składane obejmują urządzenia Microsoft Surface Duo i Android od innych producentów. Łączą one luki między telefonami i większymi ekranami, takimi jak tablety i komputery stacjonarne, ponieważ aplikacje mogą wymagać dostosowania do różnych rozmiarów i orientacji ekranu na tym samym urządzeniu, w tym dostosowanie się do zawiasu lub składania ekranu.

Odwiedź dokumentację dla deweloperów z dwoma ekranami, aby uzyskać więcej informacji na temat tworzenia aplikacji przeznaczonych dla urządzeń składanych, w tym wzorców projektowych i środowisk użytkownika. Istnieje również emulator Surface Duo, który można pobrać dla systemów Windows, Mac i Linux.

Ważne

Kontrolka TwoPaneView dostosowuje się tylko do składanych urządzeń z systemem Android, które obsługują interfejs API Jetpack Window Manager dostarczony przez firmę Google (na przykład Microsoft Surface Duo).

Na wszystkich innych platformach i urządzeniach (np. innych urządzeniach z systemem Android, iOS, macOS, Windows) działa jak konfigurowalny i dynamiczny widok podziału, który może dynamicznie wyświetlać jedno lub dwa okienka, proporcjonalnie rozmiar na ekranie.

Dodawanie i konfigurowanie obsługiwanej przez funkcję składania pakietów NuGet

Otwórz okno dialogowe Menedżer pakietów NuGet dla swojego rozwiązania.
Na karcie Przeglądaj wyszukaj ciąg Microsoft.Maui.Controls.Foldable.
Zainstaluj pakiet w rozwiązaniu Microsoft.Maui.Controls.Foldable .
Dodaj metodę inicjowania UseFoldable() (i przestrzeń nazw) wywołanie do klasy projektu MauiApp w metodzie CreateMauiApp :
```
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();
}
```
Inicjalizacja UseFoldable() jest wymagana, aby aplikacja mogła wykrywać zmiany w stanie aplikacji, takie jak łączenie między fałdami.
[Activity(...)] Zaktualizuj atrybut w klasie w MainActivity obszarze Platformy/Android, aby zawierał wszystkie następujące ConfigurationChanges opcje:
```
ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
```
Te wartości są wymagane, aby zmiany konfiguracji i stan zakresu mogły być bardziej niezawodne zgłaszane w celu zapewnienia niezawodnej obsługi dwóch ekranów.

Konfigurowanie obiektu TwoPaneView

Aby dodać TwoPaneView układ do strony:

foldable Dodaj alias przestrzeni nazw dla narzędzia NuGet z możliwością składania:

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

Dodaj element TwoPaneView jako element główny na stronie i dodaj kontrolki do Pane1 elementów i Pane2:

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

Omówienie trybów TwoPaneView

Tylko jeden z tych trybów może być aktywny:

SinglePane obecnie widoczne jest tylko jedno okienko.
Wide dwa okienka są ułożone poziomo. Jedno okienko znajduje się po lewej stronie, a drugie znajduje się po prawej stronie. Gdy na dwóch ekranach jest to tryb, gdy urządzenie jest pionowe.
Tall dwa okienka są rozmieszczone w pionie. Jedno okienko znajduje się u góry, a drugie znajduje się na dole. Gdy na dwóch ekranach jest to tryb, gdy urządzenie jest poziome.

Kontrolka TwoPaneView, gdy znajduje się tylko na jednym ekranie

Następujące właściwości mają zastosowanie w przypadku TwoPaneView zajmowania jednego ekranu:

MinTallModeHeightwskazuje minimalną wysokość kontrolki musi być w trybie.Tall
MinWideModeWidthwskazuje minimalną szerokość kontrolki musi być w trybie.Wide
Pane1Length Ustawia szerokość okienka Pane1 w Wide trybie, wysokość Pane1 w Tall trybie i nie ma wpływu na SinglePane tryb.
Pane2Length ustawia szerokość Pane2 Wide trybu, wysokość Pane2 trybu Tall i nie ma wpływu na SinglePane tryb.

Ważne

Jeśli element TwoPaneView jest rozpięty na zawiasie lub składać te właściwości nie mają żadnego efektu.

Właściwości stosowane w przypadku jednego lub dwóch ekranów

Następujące właściwości mają zastosowanie w przypadku TwoPaneView zajmowania jednego lub dwóch ekranów:

TallModeConfiguration wskazuje, gdy jest w Tall trybie, układ Górny/Dolny lub jeśli chcesz, aby tylko jedno okienko było widoczne zgodnie z definicją w elemencie TwoPaneViewPriority.
WideModeConfiguration wskazuje, w Wide trybie, układ lewy/prawy lub jeśli chcesz, aby tylko jedno okienko było widoczne zgodnie z definicją w elemencie TwoPaneViewPriority.
PanePriority określa, czy pokazać Pane1 , czy Pane2 w SinglePane trybie.

Rozwiązywanie problemów

TwoPaneView Jeśli układ nie działa zgodnie z oczekiwaniami, sprawdź dokładnie instrukcje konfiguracji na tej stronie. Pomijanie lub błędne konfigurowanie UseFoldable() metody lub ConfigurationChanges wartości atrybutów są typowymi przyczynami błędów.

Udostępnij za pośrednictwem