문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

SimpleComboBox 및 SimpleComboBoxItem(Blend에서 WPF 지원)

이 페이지는 WPF 프로젝트에만 적용됨

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



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

JJ170884.25309636-8547-4686-a578-9aa914190f01(ko-kr,VS.120).png

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

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

  • ContentSite로 이름이 지정된 ContentPresenter 요소 - Grid 내에 포함되어 있으며 선택한 항목을 표시하는 데 사용됩니다.

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

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

  • 팝업 컨트롤 내에 포함된 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 속성은 IsEnabledFalse일 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

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

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

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

  • ToggleButton 개체는 ToggleButtonControlTemplate이라는 별도의 템플릿을 사용합니다. 이 템플릿을 수정하려면 ToggleButton 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 항목 편집을 클릭합니다.

  • SimpleComboBoxItem 템플릿을 편집하려면 리소스 패널에서 SimpleComboBoxItem 스타일 옆에 있는 리소스 편집 단추를 클릭합니다. 그런 다음 스타일 편집 모드에서 개체 및 타임라인 패널의 Style을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다. SimpleComboBoxItem 템플릿을 편집하는 경우 IsHighlighted 트리거를 유지하거나 수정할 수 있습니다.

표시: