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

Xamarin.Forms Макет TwoPaneView

  • Статья

Класс TwoPaneView — это контейнер с двумя представлениями, которые задают размер и расположение содержимого в рамках доступного на экране пространства: либо слева и справа, либо вверху и внизу. TwoPaneView наследует от элемента Grid, поэтому рекомендуется рассматривать свойства так же, как если бы они применялись к сетке.

Настройка TwoPaneView

Чтобы создать макет для двух экранов в приложении, выполните указанные ниже действия.

  1. Выполните начальные инструкции, чтобы добавить NuGet и настроить класс Android MainActivity.

  2. Начните с базового макета TwoPaneView, используя следующий код XAML:

    <ContentPage
    xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen">
    <dualScreen:TwoPaneView>
        <dualScreen:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane1>
        <dualScreen:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane2>
    </dualScreen:TwoPaneView>
</ContentPage>

Совет

В приведенном выше коде XAML в элементе ContentPage опущены многие стандартные атрибуты. При добавлении TwoPaneView в приложение не забудьте объявить пространство имен xmlns:dualScreen, как показано в примере.

Сведения о режимах TwoPaneView

Активным может быть только один из следующих режимов:

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

Управление TwoPaneView только на одном экране

Следующие свойства применяются, когда TwoPaneView занимает один экран:

  • MinTallModeHeight указывает минимальную высоту элемента управления для перехода в вертикальный режим.
  • MinWideModeWidth указывает минимальную ширину элемента управления для перехода в горизонтальный режим.
  • Pane1Length задает ширину области Pane1 в горизонтальном режиме (Wide) и высоту области Pane1 в вертикальном режиме (Tall). В режиме SinglePane не действует.
  • Pane2Length задает ширину области Pane2 в горизонтальном режиме (Wide), высоту области Pane2 в вертикальном режиме (Tall). В режиме SinglePane не действует.

Внимание

Если TwoPaneView размещается на двух экранах, эти свойства не действуют.

Свойства для одного и двух экранов

Следующие свойства применяются, когда TwoPaneView занимает один экран или два экрана:

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