ComboBox 컨트롤 스타일 지정 팁

ComboBox 컨트롤은 편집할 수 없는 텍스트 상자와 Popup 컨트롤이 결합된 개체를 나타냅니다. Popup 컨트롤에는 사용자가 목록에서 항목을 선택할 수 있는 ListBox 컨트롤이 포함되어 있습니다.

다른 컨트롤과 마찬가지로 ComboBox 컨트롤(Popup 컨트롤, ListBox 컨트롤과 ComboBox 개체에 포함된 각 ComboBoxItem 컨트롤 포함)은 기본 모양이 아닌 다른 모양으로 새롭게 수정할 수 있습니다. 기본적으로 ComboBox 컨트롤의 모양은 다음과 같습니다.

ComboBox 컨트롤의 중요 속성

속성 패널의 공통 속성에서 SelectedIndex 속성을 설정하여 ComboBox 컨트롤에서 선택되는 항목을 설정할 수 있습니다. -1을 선택하면 선택 항목 없이 ComboBox 개체가 표시됩니다. 0을 선택하면 첫 번째 항목이 선택된 상태로 ComboBox 개체가 표시됩니다.

ComboBox 컨트롤에 항목을 추가할 때 ComboBoxItem 개체를 직접 추가하거나 항목이 자동으로 나타나도록 ComboBox 개체에 데이터 컬렉션을 바인딩할 수 있습니다.

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

ComboBox 템플릿의 파트

ComboBox 컨트롤은 하나의 템플릿, 즉, ComboBox 템플릿을 사용하여 드롭다운 상자, 드롭다운 화살표 및 팝업 창의 모양을 정의합니다. 이 템플릿의 각 파트는 템플릿이 적용되는 ComboBox 개체의 모양과 동작에 영향을 끼칩니다.

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

템플릿 내에는 ComboBox 컨트롤의 모양을 지정하는 다른 개체가 있을 수 있지만 다음 표에 나열된 파트들은 계약상 컨트롤의 동작에 연결되어 있습니다.

템플릿의 파트를 보려면 템플릿을 수정하면서 파트 패널을 엽니다. 개체 및 타임라인 패널의 파트 패널에서 파트 역할을 수행하는 개체 옆에 아이콘이 나타납니다.

파트 이름	개체 형식	설명
ContentPresenter	ContentPresenter	ComboBox 컨트롤이 확장되지 않는 상태에서 현재 선택된 항목을 나타내는 개체. 이 파트는 필수 요소입니다.
ContentPresenterBorder	FrameworkElement	ComboBox 컨트롤의 위쪽 부분이 포함되는 레이아웃 패널. 이 파트는 필수 요소입니다.
DropDownToggle	ToggleButton	클릭하면 ComboBox 컨트롤을 확장하는 단추. 기본적으로 이 단추에는 화살표를 나타내는 Path 개체가 포함되지만 원하는 이미지로 바꿀 수 있습니다.
Popup	Popup	ComboBox 컨트롤의 내용을 표시하는 Popup 개체. 이 파트는 필수 요소입니다.

ComboBox 컨트롤의 상태

기본적으로 ComboBox 컨트롤의 상태는 CommonStates 상태 그룹에서 다음 세 가지 상태 중 하나일 수 있으며 상태는 ComboBox 템플릿을 수정할 때 상태 패널에 나타납니다.

상태 이름	설명
일반	컨트롤과 아무런 상호 작용이 없을 때 ComboBox 컨트롤의 모양.
MouseOver	사용자가 포인터를 컨트롤 위에 놓았을 때 ComboBox 컨트롤의 모양.
Disabled	IsEnabled 속성이 False로 설정된 경우 ComboBox 컨트롤의 모양.

ComboBox 컨트롤은 FocusStates 상태 그룹에서 다음 세 가지 상태 중 하나일 수 있습니다.

상태 이름	설명
Unfocused	키보드 포커스가 없을 때 ComboBox 컨트롤의 모양.
Focused	키보드 포커스가 있고 ComboBox 컨트롤이 확장되지 않았을 때 ComboBox 컨트롤의 모양. 예를 들어 사용자가 ComboBox 컨트롤에 키보드 포커스가 올 때까지 Tab 키를 눌러 응용 프로그램내의 여러 개체를 교대로 선택할 수 있습니다.
FocusedDropDown	키보드 포커스가 있고 ComboBox 컨트롤이 확장되었을 때 ComboBox 컨트롤의 모양.

ComboBox 컨트롤은 ValidationStates 상태 그룹에서 다음 세 가지 상태 중 하나일 수 있습니다.

상태 이름	설명
Valid	유효 상태인 경우의 ComboBox 컨트롤의 모양.
InvalidUnfocused	유효하지 않은 상태이며 키보드 포커스가 없을 때 ComboBox 컨트롤의 모양.
InvalidFocused	유효하지 않은 상태이며 키보드 포커스가 있을 때 ComboBox 컨트롤의 모양.

팁:
상태 그룹에는 일부 논리 범주의 한 부분이며 동시에 표시될 수 없는 가상 상태가 포함되어 있습니다. 예를 들어 CommonStates 그룹에는 마우스와 같은 입력 장치와 사용자의 상호 작용에 관련된 상태가 포함되어 있습니다. 상태 그룹의 상태는 한 번에 하나만 표시될 수 있지만 다른 상태 그룹의 상태와는 관계 없이 동시에 표시될 수 있습니다.

상태를 선택하면 상태 기록이 설정되며 변경하는 모든 사항은 해당 상태에 기록됩니다. 상태 기록을 해제하려면 아트보드의 기록 단추 를 클릭하거나 상태 패널에서 Base를 선택합니다. 별도의 두 상태가 활성된 상태에서 컨트롤의 모양을 수정하려면 한 상태 그룹의 상태 미리보기를 고정하고 다른 상태 그룹의 상태를 수정합니다.

ComboBox 컨트롤로 개체 변환

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

• 아트보드에서 ComboBox 를 그린 다음 기본 템플릿의 사본을 만듭니다.

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

• 개체를 그리고 아트를 가져와 ComboBox 컨트롤의 모양을 디자인한 다음 컨트롤로 만들기 명령을 사용합니다.

컨트롤로 만들기 명령을 사용하는 경우 다음 단계에 따라 ComboBox 템플릿에 필요한 모든 개체를 생성해야 합니다.

1. Grid 컨트롤에서 ComboBox 컨트롤의 모양을 정의하려는 모든 개체를 그룹화합니다.

2. 새 Grid 컨트롤을 선택한 다음 도구 메뉴에서 컨트롤로 만들기를 클릭합니다.

3. 대화 상자가 나타나면 ComboBox를 선택하고 템플릿의 이름을 지정한 다음 템플릿을 저장할 위치를 선택합니다.

   위치에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

4. 확인을 클릭하면 Microsoft Expression Blend는 템플릿 편집 모드를 시작하고 ComboBox 컨트롤을 구성하는 개체를 표시합니다. 이 모드에서 템플릿을 계속 수정할 수 있습니다. 예를 들어 특정 상태의 템플릿 모양을 수정하기 위해 상태 패널에서 상태를 선택하거나 개체를 추가 및 수정할 수 있습니다.

5. 원래 개체 그룹에 TextBlock 개체 가 포함된 경우 이 TextBlock 개체는 ComboBox 컨트롤 템플릿에서 ContentPresenter 개체 로 변환됩니다. 따라서 ComboBox 개체가 테스트를 표시할 수 있게 됩니다. 원래 개체에 TextBlock 개체가 포함되어 있지 않은 경우 ContentPresenter 개체는 자동으로 템플릿에 추가됩니다.

   ContentPresenter 개체가 템플릿에서 해당 파트에 아직 지정되지 않은 경우 ContentPresenter 개체를 마우스 오른쪽 단추로 클릭하고 ComboBox의 파트로 만들기를 가리킨 다음 ContentPresenter를 클릭합니다.

   현재 선택한 항목이 없는 경우에도 ComboBox 컨트롤에 개체가 표시되도록 하려면 ContentPresenter 개체 안에 해당 개체를 추가하거나 이동시킬 수 있습니다.

6. ComboBox 컨트롤의 드롭다운 화살표로 사용할 개체나 아트워크가 있는 경우 다음 작업을 수행합니다.

   1. 개체나 아트워크를 레이아웃 패널로 그룹화합니다.

   2. 레이아웃 패널을 마우스 오른쪽 단추로 클릭합니다.

   3. ComboBox의 파트로 만들기를 가리킵니다.

   4. DropDownToggle을 클릭합니다.

      이렇게 하면 사용자의 개체가 ToggleButton 개체로 바뀌며 사용자의 개체를 사용하여 ToggleButton 개체에 적용될 스타일과 템플릿이 만들어집니다.

   5. 파트로 만들기 대화 상자에 만들어질 ToggleButton 스타일의 이름을 입력합니다.

   6. 스타일을 저장할 위치를 선택한 다음 확인을 클릭합니다.

      새 ToggleButton 개체가 템플릿 편집 모드 상태인 경우 ToggleButton 개체에 텍스트를 표시하지 않기 위해 ContentPresenter 개체를 삭제하거나, 특정 상태의 ToggleButton 개체 모양을 수정하기 위해 상태 패널에서 해당 상태를 선택하는 등 계속해서 수정할 수 있습니다.

   7. ComboBox에 대한 템플릿 편집 모드로 다시 돌아가려면 개체 및 타임라인 패널에서 상위 범위로 이동 을 클릭하거나 아트보드의 맨 위에 있는 이동 경로 탐색 막대에서 DropDownToggle을 클릭합니다.

   [!참고]

   DropDownToggle 파트는 ContentPresenterBorder를 클릭하여 ComboBox 컨트롤 항목 목록을 열 수도 있고 클릭할 수 있는 범위가 더 넓으므로 사용하지 않을 수도 있습니다.

7. Popup 파트에는 ComboBox 컨트롤의 항목이 표시됩니다. 일반적으로 ItemsPresenter 개체는 항목 목록을 표시하기 위해 사용되며 대개 스크롤링 기능을 구현하기 위해 ScrollViewer 컨트롤의 내부에 표시됩니다. Popup 파트를 만들려면 다음 작업을 수행합니다.

   1. 개체 및 타임라인 패널에서 루트 레이아웃 패널을 선택합니다.

   2. Parts 패널에서 Popup 파트를 두 번 클릭하여 템플릿의 루트에 Popup 개체를 만듭니다.

   3. 새 Popup 개체 내부에 새 ItemsPresenter 컨트롤을 그립니다.

   4. 선택 도구 를 사용하여 팝업의 크기와 위치를 수정합니다.

8. ContentPresenterBorder 파트를 만들려면 ContentPresenter와 선택 사항인 ToggleButton만 선택하고 개체 메뉴에서 그룹으로 묶기를 가리킨 다음 레이아웃 패널을 선택합니다. 새 레이아웃 패널 개체를 마우스 오른쪽 단추로 클릭하고 ComboBox 파트로 만들기를 가리킨 다음 ContentPresenterBorder를 클릭합니다.

9. 템플릿에서 개체의 일부 브러시 속성을 템플릿을 최종적으로 사용할 ComboBox 개체의 다음 속성에 바인딩하는 것이 좋습니다.

   • Background

   • BorderBrush

   • Foreground

   • BorderThickness

   자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.

10. 템플릿 편집 모드를 종료하려면 아트보드 맨 위에 있는 이동 경로 탐색 막대에서 **[ComboBox]**를 클릭하거나 개체 및 타임라인 패널에서 상위 범위로 이동 을 클릭합니다.

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

참조

Microsoft Silverlight ComboBox 컨트롤의 속성과 이벤트에 대한 자세한 내용은 MSDN에서 Silverlight 컨트롤 갤러리를 참조하십시오.

참조

개념

공통 Silverlight 컨트롤의 스타일 지정 팁

SimpleComboBox 및 SimpleComboBoxItem

템플릿을 지원하는 컨트롤의 스타일 지정