다음을 통해 공유

목록 세부 데이터 바인딩 만들기

  • 아티클

목록 세부 정보 디자인은 다음과 같은 두 부분으로 구성됩니다.

  • 항목 목록(일반적으로 데이터 컬렉션)을 표시하는 목록 보기

  • 목록의 선택된 항목에 대한 세부 정보를 표시하는 세부 정보 보기

본 사용자 가이드도 목차가 목록 보기이고 표시되는 항목이 세부 정보 보기인 일종의 목록 세부 정보 디자인입니다.

Microsoft Expression Blend에서는 두 가지 데이터 패널 모드를 제공함으로써 목록 세부 정보 디자인에서 아트보드에 데이터를 쉽게 추가할 수 있도록 합니다.

  • 목록 모드에서는 데이터 패널에서 항목을 끌어서 목록 보기를 만들 수 있습니다. ListBox , DataGrid 또는 TreeView 컨트롤로 항목을 끌 수 있습니다. 아트보드의 빈 영역으로 항목을 끌면 자동으로 ListBox 가 만들어집니다.

  • 세부 정보 모드에서는 데이터 패널에서 항목을 끌어서 Grid 레이아웃 패널에 세부 정보 보기를 만들 수 있습니다. 또는 Canvas 와 같은 다른 레이아웃 패널을 만들고 해당 패널로 항목을 끌 수 있습니다.

이 경우 보이지는 않지만 Expression Blend는 Grid 개체의 DataContext 속성을 목록 보기를 표시하는 개체의 SelectedItem 속성으로 설정하여 목록 보기와 세부 정보 보기 간의 관계를 자동으로 구성합니다. 이러한 관계를 직접 구성할 수도 있습니다.

tip note팁:

Expression Blend에는 단순한 목록 세부 정보 디자인을 보여 주고 목록 및 세부 개체의 모양을 사용자 지정하는 예제가 포함되어 있습니다. Expression Blend에서 예제를 열려면 도움말 메뉴에서 시작 화면을 클릭하고 샘플 탭을 클릭한 다음 ColorSwatchSL을 클릭합니다.

자동으로 목록 세부 정보 데이터 바인딩 만들기

  1. 사용할 수 있는 데이터 원본이 없으면 예제 데이터 원본을 만들어 런타임에 사용할 수 있도록 설정합니다.

    자세한 내용은 샘플 데이터 생성을 참조하십시오.

  2. 데이터 패널에서 목록 모드Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ko-kr,Expression.40).png를 클릭합니다.

    tip note팁:

    목록 모드에서는 사용자가 아트보드로 끈 데이터 항목을 독립 실행형 데이터 바인딩 또는 목록 보기의 파트로 간주합니다. 이 모드는 데이터 패널의 기본 모드입니다.

  3. 데이터 패널에서 데이터 컬렉션에 있는 하나 이상의 속성을 아트보드로 끌어서 ListBox 개체를 만들거나, 기존 ListBoxEe341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ko-kr,Expression.40).png, DataGridEe341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(ko-kr,Expression.40).png 또는 TreeViewEe341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(ko-kr,Expression.40).png 개체로 끕니다.

    [!참고]

    데이터 바인딩 만들기 대화 상자가 나타나면 목록 모드가 아닌 세부 정보 모드에 있을 수 있습니다.

    개체에 각 속성에 대한 데이터 컬렉션이 표시됩니다.

    목록 모드에서 데이터를 ListBox 개체로 끌기

    Ee341499.86a5a839-015a-4510-8617-94487f4adb09(ko-kr,Expression.40).png

    목록 모드에서 데이터를 DataGrid 개체로 끌기

    Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(ko-kr,Expression.40).png

    목록 모드에서 데이터를 TreeView 개체로 끌기

    Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(ko-kr,Expression.40).png

  4. 데이터 패널에서 세부 정보 모드Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ko-kr,Expression.40).png를 클릭합니다.

    tip note팁:

    세부 정보 모드에서는 사용자가 아트보드로 끈 데이터 항목이 세부 정보 보기의 일부로 간주됩니다. 각 데이터 항목에 대한 자식 개체를 표시하는 Grid 개체가 만들어집니다. Grid 개체는 목록 모드에서 만들어진 마지막 개체의 선택된 항목 및 데이터 컨텍스트를 사용하도록 자동으로 구성됩니다.

  5. 데이터 패널에서 데이터 컬렉션에 있는 하나 이상의 속성을 아트보드로 끌어서 Grid 레이아웃 패널을 만들거나, 기존 레이아웃 패널로 끕니다.

    레이아웃 패널에 TextBlock 컨트롤의 이름 및 각 속성의 값이 표시됩니다.

    ListBox 바인딩을 만든 후 세부 정보 모드에서 데이터 끌기

    Ee341499.50bc24c3-45a6-46cc-8baa-fe8e1640b245(ko-kr,Expression.40).png

    DataGrid 바인딩을 만든 후 세부 정보 모드에서 데이터 끌기

    Ee341499.7f71870f-8b3d-4de9-8ddf-258893b424a5(ko-kr,Expression.40).png

    TreeView 바인딩을 만든 후 세부 정보 모드에서 데이터 끌기

    Ee341499.b668febc-be6f-456f-8ad7-969d88f7aaea(ko-kr,Expression.40).png

  6. F5 키를 눌러 응용 프로그램을 테스트합니다. 목록 보기에서 항목을 클릭하면 클릭한 항목에 따라 업데이트된 세부 정보 보기가 표시됩니다.

    목록 컨트롤에서 항목을 선택하여 해당 세부 정보 보기 업데이트

    Ee341499.6c17e27b-5c6f-45c8-a961-fd177406042d(ko-kr,Expression.40).png

이 절차에서는 2단계 수준의 목록 세부 정보 보기를 만드는 방법에 대해 설명합니다. 또한 3단계 수준의 목록 세부 정보 보기를 만들 수 있습니다.

자세한 내용은 실습 정보: 목록 세부 정보 바인딩을 3단계 수준으로 만들기를 참조하십시오.

수동으로 목록 세부 정보 데이터 바인딩 만들기

  1. 사용할 수 있는 데이터 원본이 없으면 예제 데이터 원본을 만들어 런타임에 사용할 수 있도록 설정합니다.

    자세한 내용은 샘플 데이터 생성을 참조하십시오.

  2. 도구 패널에서 목록 보기를 표시하는 데 사용할 ComboBoxEe341499.b174a511-dd12-4a45-a986-034de7693de9(ko-kr,Expression.40).png와 같은 컨트롤을 선택한 다음 아트보드에 그립니다.

  3. 개체 및 타임라인 패널에서 새 개체를 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 클릭한 다음 새 이름을 입력하고 Enter 키를 누릅니다.

    tip note팁:

    개체를 만들 때 명시적 이름이 주어지지 않습니다. 개체의 이름을 지정하여 세부 정보 보기 개체의 DataContext 속성에서 참조할 수 있는 이름을 만듭니다.

  4. 데이터 패널에서 목록 모드Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ko-kr,Expression.40).png를 클릭합니다.

  5. 데이터 패널에서 데이터 컬렉션에 있는 하나 이상의 속성을 목록 개체로 끕니다.

    목록 모드에서 데이터를 ComboBox 개체로 끌기

    Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(ko-kr,Expression.40).png

  6. 데이터 패널에서 세부 정보 모드Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ko-kr,Expression.40).png를 클릭합니다.

  7. 데이터 패널에서 데이터 컬렉션에 있는 하나 이상의 속성을 아트보드로 끌어서 Grid 레이아웃 패널을 만들거나, 기존 레이아웃 패널로 끕니다.

    레이아웃 패널에 TextBlock 컨트롤의 이름 및 각 속성의 값이 표시됩니다.

    ComboBox 바인딩을 만든 후 세부 정보 모드에서 데이터 끌기

    Ee341499.96269f5b-09d6-4e4a-8fdb-c8f5fd3240f2(ko-kr,Expression.40).png

  8. F5 키를 눌러 응용 프로그램을 테스트합니다. 목록 개체의 다른 항목을 선택한 후 세부 정보 보기가 업데이트되지 않으면 다음 단계를 계속 진행합니다.

  9. 세부 정보 보기를 나타내는 레이아웃 패널(일반적으로 Grid 개체)을 선택합니다.

  10. 속성 패널의 DataContext 속성 옆에 있는 고급 옵션Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(ko-kr,Expression.40).png을 클릭한 다음 데이터 바인딩을 클릭합니다.

  11. 데이터 바인딩 만들기 대화 상자에서 요소 속성 탭을 클릭합니다.

  12. 장면 요소에서 목록 개체를 선택한 다음 속성에서 SelectedItem 속성을 선택합니다.

    세부 정보 개체와 목록 개체 간 관계 만들기

    Ee341499.ab312546-3416-42c8-83e5-610590939041(ko-kr,Expression.40).png

  13. 확인을 클릭하여 데이터 바인딩 만들기 대화 상자를 닫습니다.

    세부 정보 레이아웃 패널의 모든 자식 항목은 목록 개체의 선택된 항목에 대한 데이터 컨텍스트를 사용합니다.

  14. 세부 정보 레이아웃 패널의 자식 항목이 관련 데이터 속성에 바인딩되었는지 확인합니다. 일부 자식 항목은 데이터 속성의 이름만 표시하기 때문에 데이터에 바인딩되지 않습니다. 다른 자식 항목은 목록 개체에서 선택된 항목과 관련된 데이터를 표시하므로 데이터에 바인딩되어야 합니다. 예를 들어 데이터 속성 이름을 표시하지 않는 TextBlock 자식 항목 중 하나를 선택한 다음 속성 패널에서 Text 속성을 찾습니다. 속성 주위에 노란색 경계 상자가 없으면 TextBlock 개체가 데이터에 바인딩되지 않은 것입니다. TextBlock 개체 바인딩

    1. Text 속성 옆에 있는 고급 옵션Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(ko-kr,Expression.40).png을 클릭한 다음 데이터 바인딩을 클릭합니다.

    2. 데이터 바인딩 만들기 대화 상자에서 명시적 데이터 컨텍스트 탭을 클릭합니다.

    3. 필드에서 컬렉션을 확장한 다음 이 TextBlock 개체에 표시하려는 데이터 속성을 선택합니다.

      Ee341499.e7cf00b9-285a-45ab-a4d6-5b94881917fa(ko-kr,Expression.40).png

    4. 확인을 클릭하여 데이터 바인딩 만들기 대화 상자를 닫습니다.

      이제 속성이 데이터에 바인딩되었음을 나타내는 노란색 경계 상자가 Text 속성 주위에 나타납니다.

      Ee341499.9712d7c9-c15b-4fed-a816-881fa0809a61(ko-kr,Expression.40).png

  15. F5 키를 눌러 응용 프로그램을 테스트합니다.

참조 항목

작업

DataGrid 컨트롤 사용
TreeView 컨트롤 사용

개념

데이터를 표시하는 컨트롤의 스타일 지정

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.