SimpleComboBox 및 SimpleComboBoxItem

콤보 상자(ComboBox)는 드롭다운 목록 형식의 항목 컨트롤입니다. Microsoft Expression Blend에서는 콤보 상자를 두 번 클릭한 다음 SimpleComboBoxItem과 같은 요소를 그려 콤보 상자에 콘텐츠를 넣을 수 있습니다. 개체 및 타임라인에서 콤보 상자를 마우스 오른쪽 단추로 클릭한 다음 SimpleComboBoxItem 추가를 클릭하여 컬렉션에 개별 항목을 추가하거나 데이터에 ItemsSource바인딩을 클릭하여 데이터 원본에서 ComboBoxItem 요소 컬렉션을 생성할 수도 있습니다. 아트보드에서 확장된 콤보 상자를 보려면 개체 및 타임라인에서 콤보 상자 또는 콤보 상자 항목을 마우스 오른쪽 단추로 클릭한 다음 ComboBox 확장을 클릭합니다.

두 항목이 추가된 후 SimpleComboBox 컨트롤의 아트보드 보기

컨트롤 템플릿 분석

SimpleComboBox 컨트롤 템플릿은 다음 항목으로 구성됩니다.

• Grid 패널 콤보 상자 내에 여러 자식 요소를 넣는 데 사용됩니다. 또한 Grid를 사용하면 응용 프로그램 UI(사용자 인터페이스) 디자이너가 템플릿에 더 많은 요소를 손쉽게 추가할 수 있습니다.

• ContentSite로 명명된 ContentPresenter 요소 Grid 내에 포함되며 선택한 항목을 표시하는 데 사용됩니다.

• PART_EditableTextBox로 명명된 텍스트 상자 Grid 내에 포함되며 사용자가 콤보 상자 내 텍스트를 편집하는 데 사용할 수 있습니다. PART_EditableTextBox 이름은 클래스에서 텍스트 상자를 찾는 데 사용하므로 변경해서는 안 됩니다. 기본적으로 텍스트 상자는 축소되어 있으며, 이 컨트롤 템플릿이 적용되는 콤보 상자에서 IsEditable이 True로 설정되면 표시됩니다.

• 팝업 토글 단추 컨트롤 콤보 상자의 확장되는 부분을 만드는 데 사용됩니다. 팝업 컨트롤은 다른 컨트롤을 기준으로 위치가 자체 조정되며 다른 모든 컨트롤 위에서 렌더링됩니다. 이 컨트롤은 몇 가지 기본 제공 애니메이션도 지원합니다.

• 팝업 컨트롤 내에 포함된 Grid 컨트롤 항목 목록을 스크롤할 수 있는 ScrollViewer가 포함됩니다. ScrollViewer의 StackPanel에서 각 항목의 위치를 지정합니다. StackPanel의 IsItemsHost 속성을 True로 설정하여 콤보 상자 컨트롤이 StackPanel 내에서 자식 요소의 위치를 지정할 수 있도록 합니다. 항목이 표시되는 방식을 변경하려면 개체 및 타임라인에서 드롭다운 모눈을 마우스 오른쪽 단추로 클릭한 다음 레이아웃 형식 변경을 선택하여 UniformGrid와 같은 다른 패널로 이 레이아웃 패널을 변경할 수 있습니다.

SimpleComboBoxItem 컨트롤 템플릿은 다음 항목으로 구성됩니다.

• Grid 패널 콤보 상자 항목 내에 여러 자식 요소를 넣는 데 사용됩니다. 또한 Grid를 사용하면 디자이너가 템플릿에 더 많은 요소를 손쉽게 추가할 수 있습니다.

• Border 요소 이 템플릿이 적용되는 단추 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

• ContentPresenter 요소 Grid 요소 내에 포함되며 이 템플릿이 적용되는 항목 컨트롤의 Content 속성에 자동으로 바인딩됩니다.

  개체 보기: SimpleComboBox 컨트롤(왼쪽) 및 SimpleComboBoxItem 컨트롤(오른쪽)의 기본 구성 요소(템플릿)

  

맨 위로 이동

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 인터랙션 패널의 트리거 아래 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 콤보 상자에 대한 템플릿에서 HasItems 속성이 False이면 DropDownBorder 요소의 최소 높이가 95로 설정되어 콤보 상자를 클릭하면 빈 드롭다운 창이 나타납니다. 최소 높이가 0으로 설정된 경우에는 매우 작은 드롭다운 창이 나타나게 됩니다. 콤보 상자 항목에 대한 템플릿에서 IsHighlighted 속성이 True이면 Border 요소의 Background 속성이 콤보 상자에서 선택된 항목을 나타내도록 변경됩니다.

맨 위로 이동

브러시 사용

SimpleComboBox 및 SimpleComboBoxItem 템플릿에서는 SimpleStyles.xaml 리소스 사전의 다음과 같은 브러시 리소스가 사용됩니다.

• DropDownBorder 요소의 Background 속성은 WindowBackgroundBrush를 사용하여 설정됩니다.

• DropDownBorder 요소의 BorderBrush 속성은 SolidBorderBrush를 사용하여 설정됩니다.

• Foreground 속성은 IsEnabled가 False인 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

• SimpleComboBoxItem 템플릿을 사용하는 항목으로 SimpleComboBox를 채우는 경우 항목의 Background 속성은 항목을 선택할 때 SelectedBackgroundBrush를 사용하여 설정되고, Foreground 속성은 IsEnabled가 False인 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

맨 위로 이동

모범 사례 및 디자인 지침

• 일반적으로 디자이너가 컨트롤에 시각적 요소를 더 추가할 수 있도록 하려면 템플릿의 루트로 Grid 컨트롤을 사용합니다. 기본적으로 Expression Blend에서는 Grid 컨트롤과 같은 레이아웃 패널을 찾아 활성화함으로써 아트보드에 추가되는 새 요소가 해당 레이아웃 패널의 자식 요소가 되도록 합니다.

• 이 컨트롤 템플릿이 적용되는 콤보 상자의 IsDropDownOpen 속성에 ToggleButton의 IsChecked 속성과 팝업의 IsOpen 속성을 모두 바인딩하여 콤보 상자의 확장을 설정합니다. ToggleButton이나 팝업을 편집하는 경우 이 템플릿 바인딩이 유지되도록 해야 합니다.

• ToggleButton 요소에서는 ToggleButtonControlTemplate이라는 별도의 템플릿을 사용합니다. 이 템플릿을 수정하려면 ToggleButton 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집이나 복사본 편집을 클릭합니다.

• SimpleComboBoxItem 템플릿을 편집하려면 리소스 패널에서 SimpleComboBoxItem 스타일 옆에 있는 리소스 편집 단추를 클릭합니다. 그런 다음 스타일 편집 모드에서 개체 및 타임라인 아래의 Style을 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집이나 복사본 편집을 클릭합니다. SimpleComboBoxItem 템플릿을 수정하면 IsHighlighted 트리거를 유지하거나 수정해야 할 수 있습니다.

맨 위로 이동

참조

개념

실습 정보: SimpleComboBox의 확장 단추 모양 사용자 지정