DockLayout

아티클
11/11/2023

DockLayout 는 레이아웃 컨테이너의 측면에 뷰를 도킹할 수 있는 레이아웃입니다.

아래 이미지는 개념적으로 구조화되는 방법을 DockLayout 보여줍니다. 자식 보기는 위쪽, 아래쪽, 왼쪽 또는 오른쪽(DockPosition.Top, , DockPosition.BottomDockPosition.Left및DockPosition.Right)의 4가지 가능한 도킹 위치 중 하나에 도킹됩니다. 명시적으로 도킹되지 않은 보기(또는 포함DockPosition.None)는 가운데(또는 위쪽 / 아래쪽 및 왼쪽 / 오른쪽 위치) 사이에 표시됩니다.

DockLayout concept

DockLayout 빌드

다음 섹션에서는 C# 및 XAML 모두에서 사용하는 DockLayout 방법을 설명합니다.

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

다음과 같이 XAML에서 기본 DockLayout 을 만들 수 있습니다.

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

왼쪽 / 오른쪽 도킹의 경우 a를 WidthRequest 지정해야 합니다. 위쪽 / 아래쪽 도킹의 HeightRequest 경우 도킹 방향을 따라 자식 보기의 크기를 정의합니다. 직교 방향은 항상 관리자가 암시적으로 계산합니다 DockLayout .

C#

A는 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#에서 도킹 위치를 설정하려면 연결된 DockPosition 속성을 적용하는 데 사용합니다DockLayout.SetDockPosition(IView, 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`없음 및 오른쪽* 보기 사이에* 추가되지만 왼쪽에 `DockPosition` 도킹된 여러 보기와 같은 인접 보기 사이에도 추가됩니다. `VerticalSpacing`는 위쪽, 없음 및 아래쪽* 위치의* 세로로 누적 보기 간에 렌더링됩니다.
`ShouldExpandLastChild`	`bool`	true이면 마지막 자식이 다시 기본 공간을 채우도록 확장됩니다(기본값: `true`).

추가 참고 사항

공간적으로 제한된 위치(특히 컨테이너를 통해 HeightRequest 또는 WidthRequest 컨테이너에 지정된 크기)에서 사용되는 경우 DockLayout 자식 뷰가 컨테이너에 추가되는 순서에 따라 우선 순위가 DockLayout 지정됩니다. 따라서 모든 자식 보기를 렌더링할 공간이 부족할 때마다 렌더링 시 가장 낮은 우선 순위 자식(마지막으로 추가된 자식)이 제거됩니다. 이러한 이유로 컨테이너의 크기가 모든 자식 보기의 최소 크기를 포함하는지 항상 검사 합니다.

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 작동 중인 기능의 DockLayout 예를 찾을 수 있습니다.

API

DockLayout 및 DockLayoutManager 의 .NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 DockLayout 소스 코드를 찾을 수 있습니다.

Share via