Поделиться через

Макет .NET MAUI TwoPaneView

  • Статья

Элемент управления TwoPaneLayout предоставляет контейнер адаптивного макета с двумя дочерними элементами: Pane1 и Pane2. На двухэкранных и складных устройствах элемент управления будет располагать панели по обе стороны от петли или сгиба. На всех других типах устройств поведение макета настраивается и может отображать одну или обе панели в соответствии со свойствами, заданными в элементе управления .

Начало работы

Инструкции по добавлению элемента управления TwoPaneView в проект см. в документации по .NET MAUI, добавив Microsoft.Maui.Controls.Foldable NuGet.

Следующий код представляет собой простой пример XAML TwoPaneView, который показывает:

  • foldable пространство имен, требуемое в корневом элементе
  • Свойства, заданные в элементе TwoPaneView (можно также использовать привязку или задать программно)
  • Pane1 и Pane2 контейнеры, в которые добавляются макеты
<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>

По умолчанию TwoPaneView будет пытаться всегда отображать обе панели. Это означает, что при запуске приложения на одном экране представление будет разделено между двумя панелями. Следующие свойства можно использовать, чтобы повлиять на макет, если он отображается только на одном экране:

  • MinTallModeHeight — указывает минимальную высоту элемента управления для входа в высокий режим.
  • MinWideModeWidth — указывает минимальную ширину элемента управления для входа в расширенный режим.
  • Pane1Length — задает ширину в режиме "Широкий Pane1 ", высоту Pane1 в режиме "Высокий" и не влияет на режим SinglePane.
  • Pane2Length — задает ширину Pane2 в широком режиме, высоту Pane2 в режиме tall и не влияет на режим SinglePane.

На Surface Duo (и других складных устройствах) приложения можно распределять по петлям или сгибам. Элемент управления TwoPaneView имеет дополнительные свойства, которые определяют расположение двух панелей по отношению друг к другу (при размещении как на одном, так и на двух экранах):

  • TallModeConfiguration — в режиме высокой высоты можно отображать области Сверху, Внизу, Снизу или Сверху.
  • WideModeConfiguration — в широком режиме панели могут быть левой, правой, левой или левой или одной.
  • PanePriority — отображение Pane1 или Pane2 выбор в режиме SinglePane для высокого или широкого режима.

Существует три режима отображения:

  • SinglePane — в данный момент отображается только одна панель.
  • Wide — две панели располагаются горизонтально. Одна панель находится слева, а другая — справа. На Surface Duo два экрана находятся в книжном режиме.
  • Tall — две панели располагаются вертикально. Одна панель находится вверху, а другая — внизу. На Surface Duo два экрана находятся в альбомном режиме.

Образец

Скачайте и запустите пример тестовой площадки TwoPaneView из GitHub. На этом снимке экрана показано, как в примере представлены различные свойства элемента управления TwoPaneView для экспериментов:

Surface Duo с примером тестовой площадки TwoPaneView

Устранение неполадок

Если вы наблюдаете непредвиденное поведение или макет из TwoPaneView, ознакомьтесь с инструкциями по настройкеUseFoldable(), включая метод построителя и ConfigurationChanges атрибут .