다음을 통해 공유

분할 보기 컨트롤

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

중요 API: SplitView 클래스

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

Microsoft Edge 분할 보기 예제

분할 보기의 콘텐츠 영역은 항상 표시됩니다. 창은 확장 및 축소되거나 열린 상태로 유지되며 앱 창의 왼쪽 또는 오른쪽에서 자신을 표시할 수 있습니다. 창에는 다음 네 가지 모드가 있습니다.

  • 오버레이

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

  • 인라인

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

  • CompactOverlay

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

  • CompactInline

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

이것이 올바른 컨트롤인가요?

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

확장/축소 단추와 탐색 항목 목록을 사용하여 탐색 메뉴를 빌드하려면 NavigationView 컨트롤을 사용합니다.

예시

UWP 갤러리용 WinUI
WinUI 갤러리

UWP 갤러리용 WinUI 앱이 설치되어 있는 경우 여기를 클릭하여 앱을 열고 작업 중인 SplitView를 확인합니다.

분할 보기 만들기

다음은 콘텐츠 옆에 열려 있는 창이 인라인으로 표시되는 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>

샘플 코드 가져오기

  • Last updated on