Макет .NET MAUI TwoPaneView

Статья
08/30/2024

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

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

Элемент управления макетом предоставляется пакетом NuGet Microsoft.Maui.Controls.Foldable.

Общие сведения о поддержке свертываемых устройств

Свертываемые устройства включают устройства Microsoft Surface Duo и Android от других производителей. Они мостят разрыв между телефонами и большими экранами, такими как планшеты и настольные компьютеры, так как приложения могут потребоваться настроить различные размеры экрана и ориентацию на одном устройстве, включая адаптацию к петли или сворачиванию на экране.

Дополнительные сведения о создании приложений, предназначенных для свертываемых устройств, включая шаблоны проектирования и взаимодействие с пользователями, см. в документации разработчика с двумя экранами. Существует также эмулятор Surface Duo, который можно скачать для Windows, Mac и Linux.

Важно!

Элемент TwoPaneView управления адаптируется только к складным устройствам Android, поддерживающим API Jetpack Window Manager, предоставляемым Google (например, Microsoft Surface Duo).

На всех других платформах и устройствах (т. е. на других устройствах Android, iOS, macOS, Windows) он действует как настраиваемое и гибкое разделенное представление, которое может динамически отображать одну или две панели пропорционального размера на экране.

Добавление и настройка поддержки NuGet с поддержкой Foldable

Откройте диалоговое окно Диспетчер пакетов NuGet для вашего решения.
Откройте вкладку Обзор и найдите Microsoft.Maui.Controls.Foldable.
Установите пакет Microsoft.Maui.Controls.Foldable в решении.
UseFoldable() Добавьте вызов метода инициализации (и пространства имен) в класс проекта MauiApp в методе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();
}
```
Инициализация UseFoldable() необходима для того, чтобы приложение могло обнаруживать изменения в состоянии приложения, например охватывать по свертке.
[Activity(...)] Обновите атрибут в MainActivity классе в Platform/Android, чтобы он включает все следующие ConfigurationChanges параметры:
```
ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
```
Эти значения необходимы, чтобы изменения конфигурации и состояние диапазона могли быть более надежными для надежной поддержки двухэкранных экранов.

Настройка TwoPaneView

Чтобы добавить макет на страницу TwoPaneView , выполните следующие действия.

foldable Добавьте псевдоним пространства имен для свертываемого NuGet:
```
xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"
```

Добавьте корневой TwoPaneView элемент на странице и добавьте элементы управления в Pane1 и 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>

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

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

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

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

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

MinTallModeHeight указывает, что минимальная высота элемента управления должна быть введена в Tall режим.
MinWideModeWidth указывает, что минимальная ширина элемента управления должна быть введена в Wide режим.
Pane1Length задает ширину Панели1 в Wide режиме, высоту Pane1 в Tall режиме и не влияет на SinglePane режим.
Pane2Lengthзадает ширину режимаWide, высоту Pane2 Pane2 в Tall режиме и не действует в SinglePane режиме.

Важно!

TwoPaneView Если диапазон между петлями или свертывания этих свойств не действует.

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

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

TallModeConfigurationуказывает, когда в Tall режиме, расположение сверху или внизу или требуется только одна панель, видимая как определено.TwoPaneViewPriority
WideModeConfigurationуказывает, когда в Wide режиме, в левом или правом расположении, или если требуется только одна панель, видимая как определено.TwoPaneViewPriority
PanePriorityопределяет, следует ли отображать или Pane2 если Pane1 в режимеSinglePane.

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

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

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