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 속성에 자동으로 바인딩됩니다.

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 콤보 상자에 대한 템플릿에서 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의 확장 단추 모양 사용자 지정

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.