ListBox 컨트롤 스타일 지정 팁

아티클
10/11/2017

Ee371162.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(KO-KR,Expression.30).png

ListBox 컨트롤은 항목 컬렉션을 나타냅니다. ListBox 컨트롤은 데이터 원본에 바인딩하거나 바인딩되지 않은 항목을 표시하여 채울 수 있습니다. ListBox 컨트롤은 항목 컨트롤이므로 텍스트 또는 다른 컨트롤이 포함된 항목으로 채울 수 있습니다.

모든 컨트롤과 마찬가지로 ListBox 컨트롤 및 ListBox 개체에 포함된 각 ListBoxItem 컨트롤도 기본 모양과 매우 다르게 수정할 수 있습니다. ListBox 컨트롤의 기본 모양은 다음과 같습니다.

Ee371162.3cc2d3af-6781-4937-b068-c3448a56406d(KO-KR,Expression.30).png

원하는 ListBox 컨트롤 속성 설정

속성 패널의 공용 속성에서 SelectedIndex 속성을 설정하면 ListBox 컨트롤에서 선택한 항목을 설정할 수 있습니다. 값을 -1로 설정하면 항목이 선택되지 않은 ListBox 개체가 표시됩니다. 값을 0으로 설정하면 첫 번째 항목이 선택된 ListBox 개체가 표시됩니다.

ListBox 컨트롤에 항목을 추가하려면 ListBoxItem 개체를 수동으로 추가하거나 데이터 컬렉션을 ListBox 개체에 바인딩하여 항목이 자동으로 표시되도록 할 수 있습니다.

자세한 내용은 개체를 데이터에 바인딩 및 예제 데이터 만들기를 참조하십시오.

ListBox 템플릿의 파트

ListBox 컨트롤은 ListBox 템플릿이라는 단일 템플릿을 사용하여 해당 모양을 정의합니다. 이 템플릿의 단일 파트는 템플릿이 적용되는 ListBox 개체의 모양 및 동작에 영향을 줍니다.

팁:
ListBox 컨트롤에 포함된 항목의 스타일을 지정하려면 다른 템플릿을 수정해야 합니다. 예를 들어 ListBox 컨트롤이 데이터 바인딩된 컨트롤인 경우 컨트롤에 포함된 항목 스타일을 지정하는 데 사용되는 템플릿은 생성된 항목 템플릿(데이터 템플릿)입니다. 데이터 바인딩되지 않은 ListBox 컨트롤에는 포함된 항목에 적용되는 템플릿이 없습니다. 대신 ListBoxItem 템플릿 같은 항목 자체의 템플릿을 수정할 수 있습니다.

ListBox 컨트롤에 포함된 항목의 스타일을 지정하려면 다른 템플릿을 수정해야 합니다. 예를 들어 ListBox 컨트롤이 데이터 바인딩된 컨트롤인 경우 컨트롤에 포함된 항목 스타일을 지정하는 데 사용되는 템플릿은 생성된 항목 템플릿(데이터 템플릿)입니다. 데이터 바인딩되지 않은 ListBox 컨트롤에는 포함된 항목에 적용되는 템플릿이 없습니다. 대신 ListBoxItem 템플릿 같은 항목 자체의 템플릿을 수정할 수 있습니다.

ListBox 컨트롤의 모양을 설정하기 위해 다른 개체를 템플릿에 포함할 수도 있지만 다음 표에 나와 있는 파트와 해당 동작은 계약을 통해 연결되어 있습니다.

템플릿의 파트를 보려면 템플릿을 수정하면서 파트 패널을 엽니다. 개체 및 타임라인 패널에는 파트 패널에서 파트 역할을 수행하는 개체 옆에 아이콘 Ee371162.6cf58c39-edba-4a0e-acbc-1da272f9a387(KO-KR,Expression.30).png 이 나타납니다.

파트 이름	개체 형식	설명
ScrollViewer	ScrollViewer	스크롤 가능한 창에 항목을 표시하는 개체입니다. 필수 파트입니다.

ScrollViewer

스크롤 가능한 창에 항목을 표시하는 개체입니다.

필수 파트입니다.

ListBox 템플릿의 ScrollViewer 개체에는 수정된 템플릿을 적용할 수 있습니다. ScrollViewer 개체의 ScrollBar 개체에도 수정된 템플릿을 적용할 수 있습니다. 그러면 템플릿이 다음과 같은 방식으로 중첩됩니다.

Ee371162.b8a37dc0-a65e-4fe1-8a9f-df485bb1bbae(KO-KR,Expression.30).png

	ListBox 컨트롤입니다. ListBox 컨트롤은 항목 목록의 컨테이너이며 데이터 원본의 항목에 바운딩되었거나 개별적으로 바운딩되지 않은 개체를 표시합니다.
	ListBox 템플릿 내의 ScrollViewer 컨트롤입니다.
	ListBox 컨트롤의 바인딩되지 않은 항목입니다.
	ScrollViewer 템플릿 내의 세로 ScrollBar 컨트롤입니다.
	ScrollBar 템플릿 내의 세로 Thumb 컨트롤입니다.
	ScrollBar 컨트롤의 값을 큰 폭으로 줄이는 ScrollBar 템플릿 내의 세로 RepeatButton 컨트롤입니다.
	ScrollBar 컨트롤의 값을 작은 폭으로 줄이는 ScrollBar 템플릿 내의 세로 RepeatButton 컨트롤입니다.

ScrollViewer 및 ScrollBar 개체 스타일 지정에 대한 자세한 내용은 ScrollViewer 컨트롤 스타일 지정 팁 및 ScrollBar 컨트롤 스타일 지정 팁을 참조하십시오.

ListBox 컨트롤 상태

ListBox 컨트롤은 기본적으로 ValidationStates 상태 그룹의 다음 세 상태 중 하나일 수 있습니다.

상태 이름	설명
Valid	ListBox 컨트롤이 유효할 때의 모양입니다.
InvalidUnfocused	ListBox 컨트롤이 유효하지 않으며 키보드 초점이 없을 때의 모양입니다.
InvalidFocused	ListBox 컨트롤이 유효하지 않으며 키보드 초점이 있을 때의 모양입니다.

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 아트보드에서 기록 단추 Ee371162.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(KO-KR,Expression.30).png 를 클릭하거나 상태 패널에서 기준을 선택합니다.

개체를 ListBox 컨트롤로 변환

ListBox 컨트롤 템플릿을 수정하려면 다음 작업 중 하나를 수정합니다.

아트보드에 ListBox 컨트롤 을 그린 다음 기본 템플릿의 복사본을 만듭니다.

자세한 내용은 템플릿 만들기 또는 수정를 참조하십시오.
개체를 그리거나 아트를 가져온 다음 컨트롤로 만들기 명령을 사용하여 ListBox 컨트롤의 모양을 디자인합니다.

컨트롤로 만들기 명령을 사용하는 경우에는 다음 단계를 수행하여 ListBox 템플릿에 필요한 모든 개체를 만드십시오.

ListBox 컨트롤의 모양을 정의하려는 모든 개체를 Grid 컨트롤로 그룹화합니다. 이때 템플릿의 파트로 지정하지 않을 개체도 포함하십시오.
새 Grid 컨트롤을 선택하고 도구 메뉴에서 컨트롤로 만들기를 클릭합니다.
대화 상자가 나타나면 ListBox를 선택하고 템플릿 이름을 지정한 다음 템플릿을 저장할 위치를 선택합니다.

위치에 대한 자세한 내용은 리소스 만들기를 참조하십시오.
확인을 클릭하고 나면 Microsoft Expression Blend가 템플릿 편집 모드로 전환되며 ListBox 컨트롤을 구성하는 개체가 표시됩니다. 이 모드에서 템플릿을 계속 수정할 수 있습니다. 예를 들어 개체를 추가 또는 수정하거나, 상태 패널에서 상태를 선택해 해당 상태일 때의 템플릿 모양을 수정할 수 있습니다.
ScrollViewer 파트를 만들려면 파트 패널에서 ScrollViewer를 두 번 클릭합니다. 새 ScrollViewer 개체를 선택한 상태로 ItemsPresenter 컨트롤을 개체 안에 그립니다. 그런 다음 선택 도구 또는 속성 패널의 레이아웃 아래 속성을 사용하여 이러한 개체의 크기를 조정하고 템플릿 안으로 이동합니다.
템플릿에 있는 개체의 일부 브러시 속성을 템플릿을 사용할 ListBox 개체의 다음 속성에 바인딩할 수 있습니다.
- Background
- BorderBrush
- Foreground
- BorderThickness
자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.
템플릿 편집 모드를 종료하려면 아트보드 위쪽의 이동 경로 탐색 막대에서 **[ListBox]**를 클릭하거나 개체 및 타임라인 패널에서 범위를 UserControl1(으)로 되돌립니다.를 클릭합니다.

새 ListBox 템플릿을 다른 ListBox 개체에 적용하는 방법에 대한 자세한 내용은 리소스 적용 또는 제거를 참조하십시오.