Rozložení .NET MAUI TwoPaneView

Článek
08/30/2024

Třída TwoPaneView představuje kontejner se dvěma zobrazeními, která mají velikost a umístění obsahu v dostupném prostoru, a to buď vedle sebe, nebo shora dolů. TwoPaneView dědí z Grid tak nejjednodušší způsob, jak se zamyslet nad těmito vlastnostmi, je, jako by byly použity v mřížce.

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

Ovládací prvek rozložení poskytuje balíček NuGet Microsoft.Maui.Controls.Foldable.

Přehled podpory skládacích zařízení

Skládací zařízení zahrnují zařízení Microsoft Surface Duo a Android od jiných výrobců. Překlenou mezeru mezi telefony a většími obrazovkami, jako jsou tablety a stolní počítače, protože aplikace můžou potřebovat upravit různé velikosti a orientace obrazovky na stejném zařízení, včetně přizpůsobení pantu nebo přeložení na obrazovce.

Další informace o vytváření aplikací, které cílí na skládací zařízení, včetně vzorů návrhu a uživatelského prostředí, najdete v dokumentaci pro vývojáře se dvěma obrazovkami. K dispozici je také emulátor Surface Duo, který si můžete stáhnout pro Windows, Mac a Linux.

Důležité

Ovládací TwoPaneView prvek se přizpůsobí jenom skládacím zařízením s Androidem, která podporují rozhraní API Správce oken Jetpack od Googlu (například Microsoft Surface Duo).

Na všech ostatních platformách a zařízeních (tj. na jiných zařízeních s Androidem, iOS, macOS, Windows) funguje jako konfigurovatelné a responzivní rozdělené zobrazení, které může dynamicky zobrazovat jedno nebo dvě podokna s poměrnou velikostí na obrazovce.

Přidání a konfigurace balíčku NuGet pro skládací podporu

Otevřete dialogové okno Správce balíčků NuGet pro vaše řešení.
Pod kartou Procházet vyhledejte Microsoft.Maui.Controls.Foldable.
Nainstalujte balíček Microsoft.Maui.Controls.Foldable do svého řešení.
Do metody přidejte metodu UseFoldable() inicializace (a obor názvů) volání třídy CreateMauiApp projektuMauiApp:
```
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();
}
```
Inicializace UseFoldable() se vyžaduje, aby aplikace dokázala rozpoznat změny ve stavu aplikace, jako je překrytí přes složenou záhybu.
[Activity(...)] Aktualizujte atribut třídy MainActivity v platformách/Androidu tak, aby obsahoval všechny tyto ConfigurationChanges možnosti:
```
ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
```
Tyto hodnoty jsou vyžadovány, aby změny konfigurace a stav rozsahu mohly být spolehlivěji hlášeny pro spolehlivou podporu duální obrazovky.

Nastavení TwoPaneView

TwoPaneView Přidání rozložení na stránku:

foldable Přidejte alias oboru názvů pro Foldable NuGet:

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

TwoPaneView Přidejte na stránce jako kořenový prvek a přidejte ovládací prvky do Pane1 aPane2:

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

Principy režimů TwoPaneView

Aktivní může být pouze jeden z těchto režimů:

SinglePane V současné době je viditelné jenom jedno podokno.
Wide obě podokna jsou rozložena vodorovně. Jedno podokno je vlevo a druhé je vpravo. Když je na dvou obrazovkách, jedná se o režim, kdy je zařízení na výšku.
Tall obě podokna jsou rozložena svisle. Jedno podokno je nahoře a druhé je dole. Když je na dvou obrazovkách, jedná se o režim, kdy je zařízení na šířku.

Ovládací prvek TwoPaneView, když je jen na jedné obrazovce

Následující vlastnosti platí, když TwoPaneView zabírá jednu obrazovku:

MinTallModeHeight určuje minimální výšku, musí být ovládací prvek pro vstup do Tall režimu.
MinWideModeWidth určuje minimální šířku, o které musí ovládací prvek přejít do Wide režimu.
Pane1Length nastaví šířku podokna1 v Wide režimu, výšku Pane1 v Tall režimu a nemá žádný vliv na SinglePane režim.
Pane2Length nastaví šířku Pane2 v Wide režimu, výšku Pane2 v Tall režimu a nemá žádný vliv na SinglePane režim.

Důležité

TwoPaneView Pokud je rozprostřený přes závěs nebo přeloží tyto vlastnosti, nemají žádný vliv.

Vlastnosti, které se vztahují na jednu obrazovku nebo dvě

Následující vlastnosti platí, když TwoPaneView zabírá jednu obrazovku nebo dvě obrazovky:

TallModeConfigurationoznačuje, pokud je v Tall režimu, uspořádání nahoře/dole nebo pokud chcete zobrazit pouze jedno podokno, jak je definováno .TwoPaneViewPriority
WideModeConfiguration označuje, pokud je v Wide režimu, uspořádání doleva/vpravo nebo pokud chcete, aby bylo viditelné pouze jedno podokno podle definice TwoPaneViewPriority.
PanePriority určuje, zda se má zobrazit Pane1 , nebo Pane2 zda je v SinglePane režimu.

Řešení problému

TwoPaneView Pokud rozložení nefunguje podle očekávání, pečlivě zkontrolujte pokyny k nastavení na této stránce. Běžné příčiny chyb jsou vynechání nebo nesprávná konfigurace UseFoldable() metody nebo ConfigurationChanges hodnot atributů.

Sdílet prostřednictvím