DockLayout

Статья
11/11/2023

DockLayout — это макет, в котором представления можно закрепить на сторонах контейнера макета.

На рисунке ниже показано, как DockLayout концептуально структурировано. Дочерние представления закреплены на одном из 4 возможных позиций прикрепления: сверху, вниз, слева или вправо (эквивалентно DockPosition.Top, DockPosition.Bottomи DockPosition.LeftDockPosition.Right). Представления, не закрепленные явным образом (или сDockPosition.None) отображаются в центре (или между верхним / и левым / правым позициями).

DockLayout concept

Создание DockLayout

В следующих разделах описывается использование DockLayout как в C#, так и в XAML.

XAML

Включение пространства имен XAML

Чтобы использовать набор средств в XAML, xmlns необходимо добавить на страницу или представление следующее:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Поэтому следующее:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Будет изменено, чтобы включить следующее xmlns :

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Использование DockLayout

Базовый DockLayout можно создать в XAML, как показано здесь:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyContentPage">

    <toolkit:DockLayout>
        <Button toolkit:DockLayout.DockPosition="Top" Text="Top" HeightRequest="50" />
        <Button toolkit:DockLayout.DockPosition="Bottom" Text="Bottom" HeightRequest="70" />
        <Button toolkit:DockLayout.DockPosition="Left" Text="Left" WidthRequest="80" />
        <Button toolkit:DockLayout.DockPosition="Right" Text="Right" WidthRequest="90" />
        <Button Text="Center" />
    </toolkit:DockLayout>
    
</ContentPage>

Для закрепления WidthRequest слева направо / необходимо указать. / При закреплении HeightRequest верхнего нижнего края определяется размер дочернего представления вдоль направления закрепления. Ортогональные направления всегда вычисляются неявно менеджером DockLayout .

C#

Можно DockLayout создать удобно в C#, как показано ниже:

using CommunityToolkit.Maui.Layouts;

var page = new ContentPage
{
    Content = new DockLayout
    {
        { new Button { Text = "Top", HeightRequest = 50 }, DockPosition.Top },
        { new Button { Text = "Bottom", HeightRequest = 70 }, DockPosition.Bottom },
        { new Button { Text = "Left", WidthRequest = 80 }, DockPosition.Left },
        { new Button { Text = "Right", WidthRequest = 90 }, DockPosition.Right },
        { new Button { Text = "Center" } },
    }
};

Примечание. DockPosition.None Значение по умолчанию и может быть опущено.

Настройка позиции док-станции

Чтобы задать позицию закрепления из C#, используйте для DockLayout.SetDockPosition(IView, DockPosition) применения присоединенного DockPosition свойства.

var button = new Button { Text = "Top", HeightRequest = 50 };
DockLayout.SetDockPosition(button, DockPosition.Top);

Настройка DockLayout

Контейнер DockLayout поддерживает произвольные Padding , а также несколько DockLayoutсвойств для настройки. Ниже приведен пример в XAML со всеми доступными параметрами:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyContentPage">

    <toolkit:DockLayout HeightRequest="400"
                    WidthRequest="600"
                    Padding="10,20,30,40"
                    VerticalSpacing="10"
                    HorizontalSpacing="15"
                    ShouldExpandLastChild="False">
        ...
    </toolkit:DockLayout>
    
</ContentPage>

Свойства

Свойство	Type	Описание
`Padding`	`Thickness`	Возвращает или задает заполнение вокруг контейнера макета (наследуется от `Layout`).
`HorizontalSpacing`	`double`	Возвращает или задает горизонтальный интервал между закрепленными представлениями.
`VerticalSpacing`	`double`	Возвращает или задает вертикальный интервал между закрепленными представлениями.
		`HorizontalSpacing`и `VerticalSpacing` применяется между соседними представлениями в .`DockLayout` Например, `HorizontalSpacing` добавляется между представлениями Left, None и Right , а также между соседними представлениями, `DockPosition` такими как несколько представлений, закрепленных слева. `VerticalSpacing` отрисовывается между вертикальными представлениями в верхней части, нет и нижней позиции.
`ShouldExpandLastChild`	`bool`	Если значение true, последний дочерний элемент развернут, чтобы заполнить оставшееся пространство (по умолчанию: `true`).

Дополнительные замечания

Если DockLayout используется в пространственно ограниченном месте (особенно с размером, указанным через HeightRequest контейнер или WidthRequest в контейнере), приоритет присваивается порядком добавления дочерних представлений в DockLayout контейнер. Следовательно, всякий раз, когда не хватает места для отображения всех дочерних представлений, при отрисовке будут удалены дочерние дочерние элементы с наименьшим приоритетом (которые были добавлены последним). По этой причине всегда следует проверка, что размер контейнера охватывает по крайней мере минимальный размер всех дочерних представлений.

Примеры

Пример функции можно найти в действии DockLayout в сообществе .NET MAUI набор средств пример приложения.

API

Исходный код DockLayout можно найти в репозитории сообщества .NET MAUI набор средств GitHub в DockLayout и DockLayoutManager.

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