목록/세부 정보 패턴

목록/세부 정보 패턴에는 목록 창(일반적으로 목록 보기 포함) 및 콘텐츠에 대한 세부 정보 창이 있습니다. 목록의 항목을 선택하면 세부 정보 창이 업데이트됩니다. 이 패턴은 전자 메일 및 주소록에 자주 사용됩니다.

중요 API: ListView 클래스, SplitView 클래스

이것이 올바른 패턴인가요?

다음을 수행하려는 경우 목록/세부 정보 패턴이 잘 작동합니다.

• 목록 세부 정보 레이아웃을 기반으로 하는 전자 메일 앱, 주소록 또는 앱을 빌드합니다.
• 대량의 콘텐츠 컬렉션을 찾아 우선 순위를 지정합니다.
• 컨텍스트 간에 앞뒤로 작업하는 동안 목록에서 항목을 빠르게 추가하고 제거할 수 있습니다.

올바른 스타일 선택

목록/세부 정보 패턴을 구현할 때는 사용 가능한 화면 공간의 양에 따라 누적 스타일 또는 나란히 스타일을 사용하는 것이 좋습니다.

누적 스타일

누적 스타일에서는 목록 또는 세부 정보라는 하나의 창만 한 번에 볼 수 있습니다.

사용자는 목록 창에서 시작하고 목록에서 항목을 선택하여 세부 정보 창으로 "드릴다운"합니다. 사용자에게 목록 및 세부 정보 보기가 두 개의 개별 페이지에 있는 것처럼 표시됩니다.

계층형 목록/세부 정보 패턴 만들기

누적 목록/세부 정보 패턴을 만드는 한 가지 방법은 목록 창과 세부 정보 창에 별도의 페이지를 사용하는 것입니다. 목록 보기를 한 페이지에 배치하고 세부 정보 창을 별도의 페이지에 배치합니다.

목록 보기 페이지의 경우 목록 보기 컨트롤은 이미지와 텍스트를 포함할 수 있는 목록을 표시하는 데 적합합니다.

세부 정보 보기 페이지의 경우 가장 적합한 콘텐츠 요소를 사용합니다. 별도의 필드가 많은 경우 그리드 레이아웃을 사용하여 요소를 양식에 정렬하는 것이 좋습니다.

페이지 간 탐색은 Windows 앱에 대한 탐색 기록 및 뒤로 탐색을 참조하세요.

병렬 스타일

나란히 스타일에서 목록 창과 세부 정보 창이 동시에 표시됩니다.

목록 창의 목록에는 현재 선택한 항목을 나타내는 선택 시각적 개체가 있습니다. 목록에서 새 항목을 선택하면 세부 정보 창이 업데이트됩니다.

나란히 목록/세부 정보 패턴 만들기

나란히 목록/세부 정보 패턴을 만드는 한 가지 방법은 분할 보기 컨트롤을 사용하는 것입니다. 분할 보기 창에 목록 보기를 배치하고 세부 정보 보기를 분할 보기 콘텐츠에 배치합니다.

목록 창의 경우 목록 보기 컨트롤은 이미지와 텍스트를 포함할 수 있는 목록을 표시하는 데 적합합니다.

세부 정보 콘텐츠의 경우 가장 적합한 콘텐츠 요소를 사용합니다. 별도의 필드가 많은 경우 그리드 레이아웃을 사용하여 요소를 양식에 정렬하는 것이 좋습니다.

적응형 레이아웃

모든 화면 크기에 대한 목록/세부 정보 패턴을 구현하려면 적응형 레이아웃을 사용하여 반응형 UI를 만듭니다.

적응형 목록/세부 정보 패턴 만들기

적응형 레이아웃을 만들려면 UI에 대해 다른 VisualState를 정의하고 AdaptiveTriggers를 사용하여 다양한 상태에 대한 중단점을 선언합니다.

샘플 코드 가져오기

다음 샘플은 적응형 레이아웃을 사용하여 목록/세부 정보 패턴을 구현하고 정적, 데이터베이스 및 온라인 리소스에 대한 데이터 바인딩을 보여 줍니다.

• 마스터/상세 정보 샘플
• ListView 및 GridView 샘플
• 고객 주문 데이터베이스 샘플
• RSS 판독기 샘플

관련 문서

• 목록
• 앱 및 명령 모음
• ListView 클래스
• SplitView 클래스