Split view 컨트롤

  • 아티클

split view 컨트롤에는 확장 가능/축소 가능한 창과 콘텐츠 영역이 있습니다.

중요 API: SplitView 클래스

다음은 SplitView를 사용하여 허브를 표시하는 Microsoft Edge 앱의 예입니다.

Microsoft Edge split view example

split view의 콘텐츠 영역은 항상 표시됩니다. 창은 열려 있는 상태에서 확장 및 축소 또는 현상 유지를 할 수 있으며, 앱 창의 왼쪽 또는 오른쪽에서 자신을 표시할 수 있습니다. 창에는 다음 네 가지 모드가 있습니다.

  • Overlay

    창은 열릴 때까지 숨겨집니다. 창이 열리면 콘텐츠 영역이 오버레이됩니다.

  • 인라인

    창은 항상 표시되며 콘텐츠 영역을 오버레이하지 않습니다. 창과 콘텐츠 영역은 사용 가능한 화면 공간을 나눕니다.

  • CompactOverlay

    창의 좁은 부분은 아이콘을 표시할 수 있을 만큼 충분히 넓은 이 모드에서 항상 표시됩니다. 기본 닫힌 창 너비는 48px로, 수정할 수도 있습니다 CompactPaneLength. 창이 열리면 콘텐츠 영역이 오버레이됩니다.

  • CompactInline

    창의 좁은 부분은 아이콘을 표시할 수 있을 만큼 충분히 넓은 이 모드에서 항상 표시됩니다. 기본 닫힌 창 너비는 48px로, 수정할 수도 있습니다 CompactPaneLength. 창이 열리면 콘텐츠에 사용할 수 있는 공간이 줄어들어 콘텐츠가 밖으로 밀려납니다.

올바른 컨트롤인가요?

분할 보기 컨트롤을 사용하여 사용자가 보조 창을 열고 닫을 수 있는 “서랍” 환경을 만들 수 있습니다. 예를 들어 SplitView를 사용하여 목록/세부 패턴을 빌드할 수 있습니다.

확장/축소 단추 및 탐색 항목 목록을 통해 탐색 메뉴를 빌드하려는 경우 NavigationView 컨트롤을 사용합니다.

예제

WinUI 2 갤러리
WinUI Gallery

WinUI 2 갤러리 앱이 설치된 경우, 여기를 클릭하여 앱을 열고 액션 중인 SplitView를 확인합니다.

split view 만들기

다음은 Content 옆에 열려 있는 창이 인라인으로 표시되는 SplitView 컨트롤입니다.

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

샘플 코드 가져오기