문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

실습 정보: 목록 세부 정보 바인딩을 3단계 수준으로 만들기

목록 세부 데이터 바인딩 만들기 항목에서는 2단계 수준의 목록 세부 정보 데이터 바인딩을 만드는 방법을 설명했습니다. 또한 3단계 수준의 목록 세부 정보 보기를 만들 수 있습니다. 예를 들어 음악 컬렉션에 대해 3단계 수준의 목록 세부 정보 보기를 사용할 수 있습니다. 첫 번째 목록(ListBox)은 아티스트의 이름 목록입니다. 두 번째 목록(두 번째 ListBox)은 선택한 아티스트의 앨범 목록입니다. 세부 정보 보기에는 선택한 앨범의 이름 및 선택한 앨범의 표지 이미지가 표시됩니다.

팁

ListBox 에서는 목록과 세부 정보 보기를 결합합니다. 목록 자체가 목록 보기이며 목록의 각 항목이 세부 정보 보기입니다.

3단계 수준의 목록 세부 정보 데이터 바인딩 만들기

  1. 데이터 패널에서 새 예제 데이터를 클릭합니다. 새 예제 데이터 대화 상자의 데이터 소스 이름 상자에 예제 데이터 이름을 입력한 다음 확인을 클릭합니다.

  2. 데이터 패널에서 컬렉션을 클릭하여 텍스트 상자를 활성화한 다음 Artists를 입력합니다.

  3. Property1을 클릭하여 텍스트 상자를 활성화한 다음 ArtistName을 입력합니다. 속성 형식 변경 JJ171013.c4968582-0dae-407e-961b-80ffa2838f3b(ko-kr,VS.120).png을 클릭합니다. 형식 드롭다운 목록에서 이름을 클릭합니다.

  4. Property2를 마우스 오른쪽 단추로 클릭한 다음 "Property2" 제거를 클릭합니다.

  5. Artists 오른쪽에서 다음을 수행합니다.

    1. 더하기 기호 JJ171013.203a14a5-0db2-486e-9b94-4fdf658d531b(ko-kr,VS.120).png 옆의 화살표를 클릭한 다음 표시되는 드롭다운 메뉴에서 컬렉션 속성 추가를 클릭합니다.

    2. 컬렉션을 클릭하여 텍스트 상자를 활성화한 다음 Albums를 입력합니다.

  6. Albums 오른쪽에서 다음을 수행합니다.

    1. 단순 속성 추가  JJ171013.203a14a5-0db2-486e-9b94-4fdf658d531b(ko-kr,VS.120).png를 클릭합니다. Property1을 클릭하여 텍스트 상자를 활성화한 다음 AlbumName을 입력합니다.

    2. 속성 형식 변경  JJ171013.c4968582-0dae-407e-961b-80ffa2838f3b(ko-kr,VS.120).png을 클릭하고 최대 단어수2로 설정합니다.

  7. Albums 오른쪽에서 다음을 수행합니다.

    1. 단순 속성 추가  JJ171013.203a14a5-0db2-486e-9b94-4fdf658d531b(ko-kr,VS.120).png를 클릭합니다. Property1을 클릭하여 텍스트 상자를 활성화한 다음 AlbumCover를 입력합니다.

    2. 속성 형식 변경 JJ171013.c4968582-0dae-407e-961b-80ffa2838f3b(ko-kr,VS.120).png을 클릭합니다. 형식 드롭다운 목록에서 이미지를 클릭합니다.

    3. 위치 상자에서 찾아보기를 클릭하여 이미지 폴더를 찾습니다(선택 사항).

  8. 데이터 패널의 맨 위에서 목록 모드를 클릭합니다.

  9. 데이터 패널에서 아트보드의 왼쪽으로 Artists를 끌어와 [ListBox] 만들기 및 Artists에 ItemsSource 속성 바인딩 도구 설명이 나타날 때 Artists 컬렉션을 놓습니다.

  10. 데이터 패널의 맨 위에서 세부 정보 모드를 클릭합니다.

  11. 도구 패널에서 모눈을 클릭합니다. 아트보드의 가운데에 Grid 개체를 그립니다.

  12. 데이터 패널에서 방금 만든 Grid 개체로 Artists를 끌어와 Artists[0]에 [Grid].d:DataContext 데이터 바인딩 도구 설명이 나타날 때 Artists 컬렉션을 놓습니다.

  13. 데이터 패널의 맨 위에서 목록 모드를 클릭합니다.

  14. 데이터 패널에서 Grid 개체로 Albums를 끌어와 [ListBox] 만들기 및 Albums에 ItemsSource 속성 바인딩 도구 설명이 나타날 때 Albums 컬렉션을 놓습니다.

  15. 데이터 패널의 맨 위에서 세부 정보 모드를 클릭합니다.

  16. Ctrl 키를 누른 상태 데이터 패널에서 AlbumCoverAlbumName을 클릭합니다. 아트보드의 오른쪽으로 AlbumCoverAlbumName을 끌어와 세부 정보 보기 만들기 도구 화면이 나타날 때 이 두 속성을 놓습니다.

  17. F5 키를 눌러 프로그램을 빌드하고 실행합니다.

이제 왼쪽에 있는 첫 번째 목록의 항목을 클릭하면 두 번째 목록이 업데이트됩니다. 두 번째 목록에서 항목을 선택하면 세부 정보 보기가 업데이트됩니다.

표시: