TreeView 컨트롤 사용

  • 아티클

TreeView 컨트롤은 확장 가능한 노드로 구성된 트리에 중첩되거나 재귀되는 계층적 데이터 컬렉션을 표시할 수 있습니다.

TreeView 컨트롤에 대한 자세한 내용은 MSDN에서 TreeView 클래스 (System.Windows.Controls)을 참조하십시오.

TreeView 컨트롤에 표시할 예제 데이터 만들기

TreeView 컨트롤에는 모든 종류의 컬렉션을 사용할 수 있지만 TreeView 컨트롤의 기능을 완벽하게 활용하려면 계층적 컬렉션을 사용하는 것이 좋습니다. 이 항목의 뒷부분에 나오는 "TreeView 컨트롤 채우기" 절차에서 사용할 수 있는 데이터가 없는 경우 다음 절차에 따라 TreeView 컨트롤의 기능을 완벽하게 보여 주는 예제 데이터를 설정합니다.

TreeView 컨트롤에 표시할 예제 데이터 만들기

  1. 데이터 패널이 아직 표시되지 않은 경우 창 메뉴를 클릭한 다음 데이터를 클릭합니다.

  2. 데이터 패널에서 예제 데이터 만들기 JJ170840.30540d76-7256-43ce-b5d9-4b2edf3d339f(ko-kr,VS.120).png를 클릭한 다음 새 예제 데이터를 클릭합니다.

  3. 새 예제 데이터 대화 상자에서 데이터 집합의 기본 이름을 변경한 다음 데이터를 사용하도록 설정하려는 프로젝트의 파트를 선택할 수 있습니다.

  4. 응용 프로그램 실행 시 예제 데이터 사용 상자를 선택합니다.

    팁

    응용 프로그램 실행 시 예제 데이터 사용 상자를 선택하면 응용 프로그램 실행 시 프로젝트에서 예제 데이터를 표시할 수 있습니다.이 상자를 선택하지 않은 경우에는 Blend for Visual Studio에서 예제 데이터를 아트보드에만 표시합니다.

    자세한 내용은 응용 프로그램 실행 시 예제 데이터를 표시하도록 설정을 참조하십시오.

  5. 확인을 클릭합니다.

    문자열 JJ170840.0baebca0-a722-4aa2-ad58-a96325a0536d(ko-kr,VS.120).png, 부울 JJ170840.b09651ed-c8ae-4f66-b10c-d8478c5337c7(ko-kr,VS.120).png의 두 가지 속성 형식으로 구성된 컬렉션 JJ170840.B4_Data_CollectionIdentifier(ko-kr,VS.120).png이 포함된 예제 데이터 소스가 만들어집니다.

    JJ170840.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(ko-kr,VS.120).png

  6. JJ170840.B4_Data_CollectionIdentifier(ko-kr,VS.120).png 컬렉션옆의 ** 단순 속성 추가**JJ170840.203a14a5-0db2-486e-9b94-4fdf658d531b(ko-kr,VS.120).png옆에 있는 드롭다운 화살표를 클릭한 다음 계층적 컬렉션으로 변환을 클릭합니다.

    일반 컬렉션이 중첩된 컬렉션으로 변환되면 5단계 수준으로 중첩된 속성이 컬렉션에서 제공됩니다. 두 번째 수준 컬렉션의 이름이 편집 가능한 상태로 바뀝니다.

이제 TreeView 컨트롤에 표시할 수 있는 예제 데이터 컬렉션이 만들어졌습니다.

예제 데이터 수정 및 데이터 속성 추가에 대한 자세한 내용은 예제 데이터 수정을 참조하십시오.

TreeView 컨트롤 채우기

여러 가지 방법으로 아트보드의 컨트롤에 데이터를 바인딩할 수 있습니다. TreeView 컨트롤을 사용하는 경우 다음 절차를 통해 가장 빠르게 바인딩할 수 있습니다.

다른 방법을 보려면 개체를 데이터에 바인딩을 참조하십시오.

TreeView 컨트롤 채우기

  1. 도구 패널에서 자산 JJ170840.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png.을 클릭합니다.

    팁

    창 메뉴에서 자산을 클릭하여 자산 패널을 표시할 수도 있습니다.

  2. 자산 패널에서 컨트롤을 확장하고 모두를 클릭한 다음 TreeView 컨트롤JJ170840.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(ko-kr,VS.120).png을 클릭합니다.

    도구 패널의 자산 단추JJ170840.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png 아래에 있는 단추에 TreeView 컨트롤의 아이콘이 표시되고 해당 단추가 선택됩니다.

  3. 포인터를 사용하여 기본 문서의 아트보드에 큰 TreeView 개체를 그립니다.

  4. 데이터 패널에서 최상위 컬렉션(JJ170840.B4_Data_CollectionIdentifier(ko-kr,VS.120).png컬렉션)을 새 TreeView 개체로 끕니다.

    이 TreeView 개체는 예제 데이터 소스의 컬렉션을 표시하며 이미지 속성을 이미지 개체로 변환하고 부울 속성을 확인란으로 변환합니다.

  5. F5 키를 눌러 응용 프로그램을 실행합니다.

    이전 절차의 예제 데이터를 사용하여 응용 프로그램 테스트 시 이 예제 데이터를 사용할 수 있도록 하면 다음과 같이 나타납니다.

    JJ170840.b4ccdfe0-38ac-486f-a617-bd0044bce42b(ko-kr,VS.120).png

TreeView 컨트롤의 모양 변경

컨트롤의 속성을 수정하거나 컨트롤에 스타일을 적용하는 데 사용된 템플릿을 수정하여 컨트롤의 모양을 변경할 수 있습니다. 템플릿 전체를 수정하거나 각 행에 항목을 정렬하는 템플릿 및 기타 템플릿을 수정할 수 있습니다.

자세한 내용은 Blend에서 템플릿 만들기 또는 수정을 참조하십시오.

각 행의 항목 레이아웃 및 모양 변경

  1. 개체 및 타임라인 패널 또는 아트보드에서 TreeView 개체를 마우스 오른쪽 단추로 클릭하고 추가 템플릿 편집, 생성된 항목(ItemTemplate) 편집을 차례로 가리킨 다음 복사본 편집을 클릭합니다.

  2. 데이터 템플릿 리소스 만들기 대화 상자에서 확인을 클릭합니다.

    Blend에서 템플릿 편집 모드가 시작됩니다. 아트보드 위에 있는 이동 경로 탐색 막대는 TreeView 개체 내의 템플릿을 편집하는 중임을 표시합니다. 이동 경로 탐색 막대에서 TreeView 단추를 클릭하여 템플릿 편집 모드를 종료할 수 있습니다.

  3. 개체 및 타임라인 패널에서 StackPanel 개체에 항목이 정렬되는 것을 볼 수 있습니다. 쌓기 방향 및 순서를 변경할 수 있습니다. StackPanel을 Grid 또는 Canvas 레이아웃 패널과 같은 다른 레이아웃 패널로 변경할 수도 있습니다.

    자세한 내용은 다음 항목을 참조하십시오.

  4. 개체 및 타임라인 패널에서 템플릿에 다른 개체를 추가하거나 속성 패널에서 기존 개체의 속성을 수정합니다.

선택한 항목의 색 변경

  1. 개체 및 타임라인 패널 또는 아트보드에서 TreeView 개체를 마우스 오른쪽 단추로 클릭하고 추가 템플릿 편집, 생성된 항목 컨테이너(ItemContainerStyle) 편집을 차례로 가리킨 다음 복사본 편집을 클릭합니다.

  2. Style 리소스 만들기 대화 상자에서 확인을 클릭합니다.

    Blend에서 템플릿 편집 모드가 시작됩니다. 아트보드 위에 있는 이동 경로 탐색 막대는 TreeView 개체 내의 템플릿을 편집하는 중임을 표시합니다. 이동 경로 탐색 막대에서 TreeView 단추를 클릭하여 템플릿 편집 모드를 종료할 수 있습니다.

    팁

    템플릿 편집 모드가 처음 시작되는 경우 사용자와 컨트롤의 상호 작용이 없을 때의 컨트롤 모양이 템플릿 모양에 반영됩니다.사용자가 컨트롤과 상호 작용할 때의 컨트롤 모양을 수정하려면 템플릿 편집 모드에서 트리거(WPF(Windows Presentation Foundation) 프로젝트의 경우) 또는 상태(Microsoft Silverlight 프로젝트의 경우)를 선택해야 합니다.예를 들어 사용자가 TreeView 컨트롤에서 항목을 선택하는 경우 사용자와 컨트롤의 상호 작용에 의해 Selected 이벤트가 발생합니다.항목이 선택될 때의 컨트롤 모양을 수정하려면 Selected 이벤트에 해당하는 트리거 또는 상태를 선택한 상태에서 템플릿을 수정해야 합니다.

  3. 다음 작업 중 하나를 수행합니다.

    • WPF 프로젝트의 경우 트리거 패널에서 IsSelected = True 트리거를 클릭하여 Selected 이벤트에 대한 템플릿 편집 모드를 시작합니다. 개체 및 타임라인 패널에서 Bd 개체를 클릭합니다. 속성 패널의 브러시 아래에서 Bd 개체의 배경 색을 변경합니다. 작업을 마치면 트리거 패널에서 기본값을 클릭하여 트리거 기록을 해제합니다.

    • Silverlight 프로젝트의 경우 상태 패널에서 Selected 상태를 클릭하여 Selected 이벤트에 대한 템플릿 편집 모드를 시작합니다. 개체 및 타임라인 패널에서 Selection 개체를 클릭합니다. 속성 패널의 브러시 아래에서 Selection 개체의 Fill 및 Stroke 색을 변경합니다. 작업을 마치면 상태 패널에서 Base를 클릭하여 트리거 기록을 해제합니다.

    패널 열기에 대한 자세한 내용은 Blend에서 작업 영역 패널 추가 또는 제거를 참조하십시오.

    브러시 색 변경에 대한 자세한 내용은 Blend에서 색, 브러시 및 마스크 설정을 참조하십시오.

  4. F5 키를 눌러 응용 프로그램을 실행하고 트리에서 항목을 선택합니다.

확장 단추의 모양 변경

  1. 개체 및 타임라인 패널 또는 아트보드에서 TreeView 개체를 마우스 오른쪽 단추로 클릭하고 추가 템플릿 편집, 생성된 항목 컨테이너(ItemContainerStyle) 편집을 차례로 가리킨 다음 복사본 편집을 클릭합니다.

    팁

    이 템플릿을 이미 만든 경우에는 현재 템플릿 편집 명령이 활성화되어 복사본 편집 대신 이 명령을 선택할 수 있습니다.

  2. Style 리소스 만들기 대화 상자에서 확인을 클릭합니다.

    Blend에서 템플릿 편집 모드가 시작됩니다. 아트보드 위에 있는 이동 경로 탐색 막대는 TreeView 개체 내의 템플릿을 편집하는 중임을 표시합니다. 이동 경로 탐색 막대에서 [TreeView] 단추를 클릭하여 템플릿 편집 모드를 종료할 수 있습니다.

  3. 개체 및 타임라인 패널에서 Expander 개체(WPF 프로젝트) 또는 ExpandButton 개체(Silverlight 프로젝트)를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 항목 편집을 클릭합니다.

  4. 개체 및 타임라인 패널에서 노드를 확장하여 TreeView 컨트롤에 대한 확장 단추를 나타내는 Path 개체를 표시합니다. WPF 프로젝트의 경우 Path 개체의 이름이 ExpandPath로 지정됩니다. Silverlight 프로젝트의 경우 UncheckedVisual 및 CheckedVisual이라는 두 가지 Path 개체가 있습니다. 펜JJ170840.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ko-kr,VS.120).png 및 직접 선택JJ170840.6dd6571f-c116-451d-8dd2-1f88b8406362(ko-kr,VS.120).png 도구를 사용하여 이러한 패스의 모양을 수정할 수 있습니다. WPF 프로젝트의 경우 ExpandPath 개체에 종속된 트리거가 있으므로 해당 개체의 이름과 형식을 그대로 유지해야 합니다.

    자세한 내용은 Triggers을 참조하십시오.

    Silverlight 프로젝트의 경우 Checked 상태에서 Path 개체의 모양을 변경할 수 있으므로 해당 변경 내용을 수정할 수 있습니다.

    자세한 내용은 Blend에서 컨트롤에 대해 다른 시각적 상태 정의을 참조하십시오.

참고 항목

기타 리소스

예제 데이터 만들기

라이브 데이터에 연결

컨트롤의 데이터 표시