ComboBox 컨트롤 스타일 지정 팁
기본 제공 ComboBox 컨트롤 템플릿을 사용하여 사용자 지정 ComboBox 템플릿을 만들 수 있습니다. Popup 컨트롤에는 사용자가 목록에서 항목을 선택할 수 있는 ListBox 컨트롤이 포함되어 있습니다. ComboBox 컨트롤의 기본 모양은 다음과 같습니다.
ComboBox 템플릿의 파트
ComboBox 템플릿에는 다음과 같은 파트가 있습니다.
파트 이름 | 개체 형식 |
---|---|
|
ContentPresenter |
|
FrameworkElement |
|
ToggleButton |
|
Popup |
![]() |
---|
템플릿의 파트를 보려면 템플릿을 수정하면서 파트 패널을 엽니다. |
콤보 상자 팁
콤보 상자는 항목 목록이 포함된 팝업 창(4), 현재 선택한 항목이 표시되는 영역(1) 및 팝업 창을 열고 닫을 때 사용되는 토글 단추(3)로 이루어져 있습니다.
ContentPresenter 파트
ContentPresenter 파트는 필수 요소이며 현재 항목을 표시하는 데 사용됩니다. 템플릿에서 ContentPresenter 파트 내부에 일부 콘텐츠를 넣으면 선택한 항목이 없을 경우 항상 해당 콘텐츠가 표시됩니다.
ContentPresenterBorder 파트
IsHitTestVisible 이 true인 경우 ContentPresenterBorder 파트를 클릭하여 팝업 창을 열고 닫을 수 있으며 팝업창은 ContentPresenterBorder 의 왼쪽 맨 아래에 있습니다(2). ContentPresenterBorder 파트에서는 레이아웃 패널이 적합합니다.
DropDownToggle 파트
DropDownToggle 파트는 선택 사항이지만 이 파트를 다른 방식으로 사용하여 팝업 창을 열고 닫을 수 있습니다.
Popup 파트
Popup 파트는 필수 요소이며, 항목이 표시되는 파트입니다. ItemsPresenter 는 항목이 표시되는 위치를 나타내는 데 사용됩니다. ItemsPresenter 는 ScrollViewer 파트 내부에 넣어야 합니다. 템플릿의 루트 개체 영역과 관련된 Popup 이 열립니다.
ComboBox 컨트롤의 상태
기본적으로 ComboBox 컨트롤의 상태는 CommonStates 상태 그룹에서 다음 세 가지 상태 중 하나일 수 있으며 상태는 ComboBox 템플릿을 수정할 때 상태 패널에 나타납니다.
상태 이름 | 설명 |
---|---|
Normal |
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를 선택합니다. 별도의 두 상태가 활성된 상태에서 컨트롤의 모양을 수정하려면 한 상태 그룹의 상태 미리보기를 고정하고 다른 상태 그룹의 상태를 수정합니다.
템플릿 바인딩
Background, BorderBrush, Foreground 또는 BorderThickness 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.
ComboBox 컨트롤로 개체 변환
다음 그림은 콤보 상자의 전체 디자인(comp)입니다.
[!참고]
위 그림은 ComboBox 컨트롤이 아니라 ComboBox 컨트롤과 유사한 아트워크입니다.
이 예에서는 다음 절차의 2단계에서 XAML 코드를 사용합니다.
새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(
/
)를 삭제합니다.<Grid x:Name="LayoutRoot" Background="White"/>
다음 코드를 복사하여 1단계에서 찾은 새 프로젝트의 코드 뒤에 붙여 넣습니다.
<Grid Height="70" Width="120"> <Rectangle x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" Height="20" VerticalAlignment="Top" /> <Rectangle Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" /> <Path Fill="White" Stretch="Fill" Width="8" Height="5" Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" HorizontalAlignment="Right" VerticalAlignment="Top" /> <Rectangle x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" Margin="0,20,0,0" /> <TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/> <TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/> </Grid>
붙여 넣은 코드 뒤에 닫는 Grid 태그(
</Grid>
)를 추가합니다.개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 ComboBox를 클릭한 다음 확인을 클릭합니다.
개체 및 타임라인 패널에서 Ctrl 키를 누른 다음 두 TextBlock 항목을 클릭합니다. 선택한 항목 중 하나를 마우스 오른쪽 단추로 클릭한 다음 잘라내기를 클릭합니다. 범위를 {0}(으)로 되돌립니다.
를 클릭한 다음 붙여넣기를 클릭합니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.
개체 및 타임라인 패널에서 ComboBox를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 현재 항목 편집을 클릭합니다.
개체 및 타임라인 패널에서 contentarea 를 마우스 오른쪽 단추로 클릭한 후 그룹으로 묶기를 클릭한 다음 Grid를 클릭합니다.
Grid를 마우스 오른쪽 단추로 클릭하고 ComboBox의 파트로 만들기를 클릭한 다음 ContentPresenterBorder를 클릭합니다.
파트 패널에서 ContentPresenter를 두 번 클릭합니다. 속성 패널의 레이아웃 범주에서 Margin을 다음과 같이 설정합니다.
Left 5
Right 5
Top 1
Bottom 0
개체 및 타임라인 패널에서 사각형을 클릭하고 Ctrl 키를 누른 다음 Path를 클릭합니다. 선택 항목을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 클릭한 다음 Grid를 클릭합니다.
개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭하고 ComboBox의 파트로 만들기를 클릭한 다음 DropDownToggle을 클릭합니다. 확인을 클릭합니다.
Path를 마우스 오른쪽 단추로 클릭한 다음 잘라내기를 클릭합니다. 범위를 {0}(으)로 되돌립니다.
를 클릭하고 DropDownToggle을 클릭한 다음 Ctrl+V를 눌러 붙여 넣습니다.
개체 및 타임라인 패널에서 Grid를 선택합니다. 파트 패널에서 Popup을 두 번 클릭합니다.
도구 패널에서 모눈을 두 번 클릭합니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.
개체 및 타임라인 패널에서 popupbackground를 클릭한 다음 방금 만든 모눈으로 끌어 옵니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height, HorizontalAlignment, VerticalAlignment 및 Margin에 대해 이 작업을 반복합니다.
개체 및 타임라인 패널에서 ScrollViewer를 새 모눈으로 끌어 옵니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height, HorizontalAlignment, VerticalAlignment 및 Margin에 대해 이 작업을 반복합니다.
범위를 {0}(으)로 되돌립니다.
를 클릭합니다. 속성 패널의 레이아웃 범주에서 Height를 20으로 설정합니다.
프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.
새 ComboBox 템플릿을 다른 ComboBox 개체로 적용하는 방법에 대한 자세한 내용은 리소스 적용 또는 제거를 참조하십시오.
참조
Microsoft Silverlight ComboBox 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight 컨트롤 갤러리 를 참조하십시오.
참조 항목
개념
공통 Silverlight 컨트롤의 스타일 지정 팁
SimpleComboBox 및 SimpleComboBoxItem
템플릿을 지원하는 컨트롤 스타일
Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.