.NET MAUI TwoPaneView 레이아웃

  • 아티클

TwoPaneLayout 컨트롤은 및 Pane2의 두 자식 Pane1 이 있는 적응형 레이아웃 컨테이너를 제공합니다. 이중 화면 및 폴더블 디바이스에서 컨트롤은 힌지 또는 접기의 양쪽에 창을 배치합니다. 다른 모든 디바이스 유형에서는 레이아웃 동작을 구성할 수 있으며 컨트롤에 설정된 속성에 따라 하나 또는 두 개의 창을 모두 표시할 수 있습니다.

시작

프로젝트에 TwoPaneView 컨트롤을 추가하는 지침은 Microsoft.Maui.Controls.Foldable NuGet을 추가하여 .NET MAUI 설명서에서 사용할 수 있습니다.

다음 코드는 TwoPaneView의 간단한 XAML 예제입니다. 이 예제는 다음과 같습니다.

  • foldable 루트 요소에 필요한 네임스페이스
  • TwoPaneView 요소에 설정된 속성(바인딩을 사용하거나 프로그래밍 방식으로 설정할 수도 있습니다).
  • Pane1Pane2 레이아웃을 추가하는 컨테이너
<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 하며 SinglePane 모드에서는 영향을 주지 않습니다.

Surface Duo(및 기타 폴더블 장치)에서 응용 프로그램은 힌지 또는 접기를 통해 확장될 수 있습니다. TwoPaneView 컨트롤에는 두 창이 서로 관련하여 렌더링되는 위치(단일 또는 이중 화면)를 결정하는 추가 속성이 있습니다.

  • TallModeConfiguration – 키가 큰 모드인 경우 창은 위쪽/아래쪽, 아래쪽/위쪽이거나 단일 창만 표시할 수 있습니다.
  • WideModeConfiguration – 와이드 모드인 경우 창은 왼쪽/오른쪽, 오른쪽/왼쪽 또는 단일 창만 될 수 있습니다.
  • PanePriority – SinglePane 모드를 표시 Pane1Pane2 할지, 아니면 와이드 모드로 선택했는지 여부입니다.

디스플레이 모드에는 다음 세 가지가 있습니다.

  • SinglePane – 현재 하나의 창만 표시됩니다.
  • Wide – 두 창이 가로로 배치됩니다. 하나의 창은 왼쪽에 있고 나머지는 오른쪽에 있습니다. Surface Duo에서 두 화면은 세로 모드입니다.
  • Tall - 두 창이 세로로 배치됩니다. 하나의 창은 위쪽에 있고 나머지는 아래쪽에 있습니다. Surface Duo에서 두 화면은 가로 모드입니다.

샘플

GitHub에서 TwoPaneView 플레이그라운드 샘플을 다운로드하고 실행합니다. 이 스크린샷은 샘플이 실험을 위해 TwoPaneView 컨트롤의 다양한 속성을 노출하는 방법을 보여줍니다.

TwoPaneView 플레이그라운드 샘플을 실행하는 Surface Duo

문제 해결

에서 TwoPaneView예기치 않은 동작 또는 레이아웃을 관찰하는 경우 작성기 메서드 및 ConfigurationChanges 특성을 비롯한 UseFoldable()설정 지침을 확인합니다.