Xamarin.Forms TwoPaneView 레이아웃

  • 아티클

Download Sample 샘플 다운로드

TwoPaneView 클래스는 사용 가능한 공간에서 나란히 또는 위아래로 콘텐츠의 크기와 위치를 지정하는 2개의 보기가 있는 컨테이너를 나타냅니다. TwoPaneView는 Grid에서 상속되므로 속성이 그리드에 적용되는 것이라고 생각하면 쉽습니다.

TwoPaneView 설정

앱에서 이중 화면 레이아웃을 만들려면 다음 지침을 따르세요.

  1. 시작 지침에 따라 NuGet을 추가하고 Android MainActivity 클래스를 구성합니다.

  2. 다음 XAML을 사용하여 기본 TwoPaneView를 시작합니다.

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

팁

위의 XAML은 ContentPage 요소에서 많은 공통 특성을 생략합니다. TwoPaneView를 앱에 추가할 때는 표시된 대로 xmlns:dualScreen 네임스페이스를 선언해야 합니다.

TwoPaneView 모드 이해

다음 모드 중 하나만 활성화할 수 있습니다.

  • SinglePane - 현재 창 하나만 볼 수 있습니다.
  • Wide - 두 창이 가로로 배치됩니다. 하나의 창은 왼쪽에 있고 나머지는 오른쪽에 있습니다. 두 개 화면에서는 이것이 디바이스가 세로 방향일 때의 모드입니다.
  • Tall - 두 창이 세로로 배치됩니다. 하나의 창은 위쪽에 있고 나머지는 아래쪽에 있습니다. 두 개 화면에서는 이것이 디바이스가 가로 방향일 때의 모드입니다.

한 화면에만 표시될 때 TwoPaneView 제어

다음 속성은 TwoPaneView가 하나의 화면을 차지하고 있는 경우에 적용됩니다.

  • MinTallModeHeight는 컨트롤이 세로 모드가 되려면 필요한 최소 높이를 나타냅니다.
  • MinWideModeWidth는 컨트롤이 가로 모드가 되려면 필요한 최소 너비를 나타냅니다.
  • Pane1Length는 가로 모드에서 Pane1의 너비를, 세로 모드에서 Pane1의 높이를 설정하며 SinglePane 모드에서는 적용되지 않습니다.
  • Pane2Length는 가로 모드에서 Pane2의 너비를, 세로 모드에서 Pane2의 높이를 설정하며 SinglePane 모드에서는 적용되지 않습니다.

Important

TwoPaneView가 두 개 화면에 걸쳐 있는 경우 이들 속성은 적용되지 않습니다.

한 화면 또는 두 화면에 표시될 때 적용되는 속성

다음 속성은 TwoPaneView가 하나의 화면 또는 두 개의 화면을 차지하고 있는 경우에 적용됩니다.

  • TallModeConfiguration은 세로 모드일 때 위쪽/아래쪽 정렬을 나타내거나 TwoPaneViewPriority에서 정의한 대로 단일 창만 표시할지 여부를 나타냅니다.
  • WideModeConfiguration은 가로 모드일 때 왼쪽/오른쪽 정렬을 나타내거나 TwoPaneViewPriority에서 정의한 대로 단일 창만 표시할지 여부를 나타냅니다.
  • PanePriority는 SinglePane 모드일 경우 Pane1와 Pane2 중 어느 것을 표시할지를 정합니다.