Xamarin.Forms TwoPaneView 레이아웃

TwoPaneView 컨트롤은 Xamarin.Forms.DualScreen NuGet 미리 보기에서 사용할 수 있습니다. 다음 코드는 간단한 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>

기본적으로 TwoPaneView는 항상 두 창을 렌더링하려고 합니다. 즉, 앱이 단일 화면에서 실행될 때 보기가 두 창 간에 분할됩니다. 다음 속성을 사용하여 한 화면에서만 렌더링할 때 레이아웃에 영향을 줄 수 있습니다.

• MinTallModeHeight – 컨트롤이 긴 모드로 들어가는 데 필요한 최소 높이를 나타냅니다.
• MinWideModeWidth – 컨트롤이 와이드 모드로 들어가는 데 필요한 최소 너비를 나타냅니다.
• Pane1Length – 너비 모드에서 Pane1의 너비를 설정하고, 높이가 높은 모드에서 Pane1의 높이를 설정하며, SinglePane 모드에서는 영향을 주지 않습니다.
• Pane2Length – 와이드 모드에서 Pane2의 너비를 설정하고, 높이가 높은 모드에서 Pane2의 높이를 설정하며, SinglePane 모드에서는 영향을 주지 않습니다.

Surface Duo에서 애플리케이션은 두 화면에 걸쳐 있을 수 있습니다. TwoPaneView 컨트롤에는 두 창이 서로 관련하여 렌더링되는 위치(단일 또는 이중 화면)를 결정하는 추가 속성이 있습니다.

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

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

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

Xamarin 설명서에서 자세히 읽어보세요. UWP TwoPaneView 설명서의 디자인 고려 사항 중 일부는 Xamarin 컨트롤에도 적용됩니다.

문제 해결

예기치 않은 동작이나 레이아웃TwoPaneView이 관찰되는 경우 메서드 및 ConfigurationChanges 특성을 포함한 Init설정 지침을 확인합니다.