TreeView 웹 서버 컨트롤의 모양과 느낌 사용자 지정

아티클
10/22/2014

업데이트: 2007년 11월

TreeView 컨트롤의 렌더링은 완전히 사용자 지정할 수 있으므로 다양한 표시 스타일을 만들어 낼 수 있습니다.

TreeView 컨트롤의 모양과 느낌을 사용자 지정하려면 다음 작업을 수행합니다.

TreeView 컨트롤의 표시 및 렌더링에 영향을 주는 컨트롤 속성을 지정합니다.
런타임에 컨트롤을 렌더링할 기본 제공 이미지 집합을 선택하는 ImageSet 속성을 지정합니다.
TreeView 컨트롤 내에서 특정 TreeNode 개체 그룹에 대한 표시 및 렌더링 특성을 제어하는 개별 이미지 및 스타일 속성을 지정합니다.
Visual Studio의 자동 서식 기능을 사용하여 이미지 및 스타일 속성 집합을 한꺼번에 사용자 지정합니다.
응용 프로그램의 TreeView 컨트롤에 대해 런타임에 표시 및 렌더링 특성을 정의하는 미리 정의된 테마 또는 스킨을 지정합니다.

최상위 레이아웃 속성

TreeView 컨트롤은 BackColor 속성 같은 표준 서버 컨트롤 속성뿐만 아니라 TreeView 컨트롤의 모양을 정밀하게 제어하는 속성 집합을 노출합니다.

NodeIndent 속성

NodeIndent 속성은 모든 노드의 들여쓰기 수준을 지정합니다. TreeView 컨트롤이 렌더링되는 쪽에서 노드를 들여씁니다. 즉, 왼쪽에서 오른쪽으로 렌더링하는 로캘에 대해서는 왼쪽에서 들여쓰고 오른쪽에서 왼쪽으로 렌더링하는 로캘에 대해서는 오른쪽에서 들여씁니다.

NodeWrap 속성

NodeWrap 속성은 각 노드에 표시되는 텍스트를 다음 줄의 시작 부분으로 줄 바꿈할 것인지 아니면 공간이 부족할 때까지 같은 줄에 계속 유지할 것인지를 지정합니다.

ShowLines 속성

ShowLines 속성은 자식 노드와 부모 노드를 연결하는 선의 표시 여부를 지정합니다. 이 속성을 true로 설정하면 TreeView 컨트롤은 LineImagesFolder 속성에 의해 지정된 웹 액세스가 가능한 폴더에서 선 이미지를 검색합니다.

TreeNodeStyle 속성

TreeView 컨트롤은 고유한 속성 외에도 노드 형식별로 TreeNodeStyle 컨트롤의 속성을 지원합니다. 이러한 스타일 속성은 모든 노드 형식에 적용되는 NodeStyle 속성을 재정의합니다.

TreeView 컨트롤에도 모든 노드의 들여쓰기 수준을 지정하는 NodeIndent 속성이 있습니다. TreeView 컨트롤이 렌더링되는 쪽에서 노드를 들여씁니다. 즉, 왼쪽에서 오른쪽으로 렌더링하는 로캘에 대해서는 왼쪽에서 들여쓰고 오른쪽에서 왼쪽으로 렌더링하는 로캘에 대해서는 오른쪽에서 들여씁니다.

또한 노드를 선택하거나 마우스로 노드를 가리킬 때 서로 다른 스타일이 적용되도록 할 수 있습니다. 노드의 Selected 속성을 true로 설정하면 SelectedNodeStyle 속성이 적용되어 선택한 노드에 대해 선택하지 않은 모든 스타일 속성을 재지정합니다. 마우스로 노드를 가리키면 HoverNodeStyle 속성이 적용됩니다. 다음 이미지와 표에서는 TreeNodeStyle 속성을 설명합니다.

TreeNodeStyle 속성

노드 속성	설명
NodeSpacing	전체 현재 노드와 인접한 노드 위와 아래 사이의 세로 간격 크기를 지정합니다.
VerticalPadding	TreeNode 텍스트의 위쪽과 아래쪽에 렌더링되는 공간의 크기를 지정합니다.
HorizontalPadding	TreeNode 텍스트의 왼쪽과 오른쪽에 렌더링되는 공간의 크기를 지정합니다.
ChildNodesPadding	TreeNode의 자식 노드 위와 아래 공간의 크기를 지정합니다.
ImageUrl	TreeNode 옆에 표시되는 이미지 경로를 지정합니다.

Level Styles 컬렉션

NodeStyle 속성 같은 개별 스타일 속성을 설정하는 대신 LevelStyles 컬렉션을 사용할 수 있습니다. LevelStyles 컬렉션은 트리의 특정 수준에서 노드의 스타일을 제어합니다. 즉, 컬렉션의 첫 번째 스타일은 트리의 첫 번째 수준에 있는 노드의 스타일에 해당하며 컬렉션의 두 번째 스타일은 트리의 두 번째 수준에 있는 노드의 스타일에 해당하는 식입니다. 이 속성은 특정 수준의 노드가 자식 노드 유무와 상관없이 모양이 같아야 하는 경우 콘텐츠 스타일의 탐색 메뉴 테이블을 생성하는 데 주로 사용됩니다.

참고:
LevelStyles 컬렉션을 사용해 특정 수준에 대해 스타일을 정의하면 해당 수준의 노드에 대해 모든 루트, 부모 또는 리프 노드 스타일 설정이 재지정됩니다.

스타일 우선 순위

스타일 속성은 다음 우선 순위에 따라 적용됩니다.

NodeStyle
RootNodeStyle, ParentNodeStyle 또는 LeafNodeStyle(노드 형식에 따라). 이때 정의된 LevelStyles 컬렉션이 적용되어 다른 노드 스타일 속성을 재지정합니다.
SelectedNodeStyle
HoverNodeStyle

자동 서식

Visual Web Developer 같은 비주얼 디자인 도구를 사용하는 경우 TreeView 컨트롤은 자동 서식 기능을 노출합니다. 자동 서식 기능은 디자인 타임에 표시 속성 집합을 컨트롤에 적용합니다. 이러한 속성 설정은 이전에 설정한 모든 속성 값을 재정의하며 코드 디자이너에서 수정할 수 있습니다.

또한 자동 서식은 표준 스타일 특성 외에도 ImageSet 속성을 TreeView 컨트롤에 포함된 사용 가능한 이미지 집합 중 하나로 설정합니다. 자동 서식 기능을 사용하면 TreeView 컨트롤의 모양을 신속하게 변경하여 다음과 같은 잘 알려진 사용자 지정 트리를 모방할 수 있습니다.

Outlook 받은 편지함 폴더
Microsoft Windows 파일 시스템
MSN Messenger 대화 상대 목록
Outlook Express 뉴스 그룹 목록
MSDN 목차
Windows 도움말 목차
FAQ(질문과 대답)
Windows 이벤트 목록 뷰

자동 서식 기능에는 공통 트리 스타일 외에도 다양한 스타일의 글머리 목록이 포함되어 있습니다.

자동 서식 기능은 단일 컨트롤에 속성 집합을 적용하는 데 유용하지만 테마와 스킨을 사용하면 웹 사이트 내에서 여러 TreeView 컨트롤에 같은 모양과 느낌을 적용할 수 있습니다. 자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.

이미지 속성

대부분의 다른 컨트롤과 달리 TreeView 컨트롤에는 컨트롤에 그래픽 리소스 집합을 적용할 수 있다는 이점이 있습니다. 이미지는 노드를 표시하고 단추를 확장 및 축소하며 선을 연결하는 데 사용합니다.

ImageSet 속성을 설정하거나 사용자 지정 이미지를 만들어 개별 이미지 속성을 설정하면 TreeView 수준에서 이미지를 설정할 수 있습니다. 또한 TreeNode 수준에서 이미지를 설정하여 TreeView 컨트롤의 모양을 추가로 사용자 지정할 수 있습니다.

이미지 집합

TreeView 컨트롤에는 많은 공통 트리에 사용하는 이미지와 동일한 기본 제공 이미지 리소스 집합이 포함되어 있습니다. 다음 표에서는 사용할 수 있는 몇 가지 공통 이미지 집합을 보여 줍니다.

ImageSet 이름	설명
TreeViewImageSet.Contacts	MSN Messenger 이미지
TreeViewImageSet.Faq	FAQ 스타일 이미지
TreeViewImageSet.Inbox	Outlook 받은 편지함 이미지
TreeViewImageSet.News	Outlook Express 뉴스 그룹 이미지
TreeViewImageSet.Help	Microsoft Windows 도움말 시스템 이미지
TreeViewImageSet.XPFileExplorer	Microsoft Windows XP 파일 탐색기 이미지

사용자 지정 이미지 및 선

기본 제공 이미지 리소스를 사용하는 것 외에도 TreeView 컨트롤에 대해 사용자 지정 이미지 리소스 집합을 정의할 수 있습니다. 사용자 지정 이미지 집합을 사용하려면 두 가지 이미지 형식을 만들어야 합니다. 첫 번째는 확장 가능한 노드, 축소 가능한 노드 그리고 확장하거나 축소하지 않는 노드를 나타내는 노드 이미지입니다. 이러한 이미지는 Microsoft Paint 같은 프로그램에서 만들 수 있습니다. 선을 사용해 노드를 연결하는 경우에는 선 이미지 집합을 만들고 ShowLines 속성을 true로 설정해야 합니다. Visual Web Developer 같은 비주얼 디자이너를 사용하는 경우 선 이미지 만들기 도구를 사용하여 선 이미지를 만들 수 있습니다. 그렇지 않은 경우 Microsoft Paint 같은 프로그램을 사용해 선 이미지를 수동으로 만들어야 합니다.

노드 이미지를 만들었으면 이를 웹 사이트의 디렉터리에 넣은 다음 TreeView 컨트롤의 다음 속성을 설정하여 이미지를 참조하도록 합니다.

또한 선 이미지를 폴더에 넣은 후 LineImagesFolder 속성을 선 이미지의 폴더를 가리키도록 설정해야 합니다.

ImageSet 속성 및 사용 가능한 이미지 집합의 전체 목록에 대한 자세한 내용은 ImageSet을 참조하십시오.

선 이미지 및 모든 TreeView 컨트롤 이미지 목록에 대한 자세한 내용은 LineImagesFolder를 참조하십시오.

테마 및 스킨

테마와 스킨을 사용하면 속성 집합을 웹 사이트 내의 여러 컨트롤에 손쉽게 적용할 수 있습니다. 예를 들어 MyTheme이라는 테마를 만들고 이 테마 내에 MyTreeView라는 스킨을 정의하는 경우 이 스킨을 한 번만 정의하여 많은 TreeView 컨트롤에 적용할 수 있습니다.

자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.

참고 항목

참조

TreeView 웹 서버 컨트롤 개요

다음을 통해 공유