Blend에서 Silverlight 컨트롤에 대한 ComboBox 컨트롤 스타일 지정 팁

기본 제공 ComboBox 컨트롤 템플릿을 사용하여 사용자 지정 ComboBox 템플릿을 만들 수 있습니다. Popup 컨트롤에는 사용자가 목록에서 항목을 선택할 수 있는 ListBox 컨트롤이 포함되어 있습니다. ComboBox 컨트롤의 기본 모양은 다음과 같습니다.

ComboBox 템플릿의 파트

ComboBox 템플릿에는 다음과 같은 파트가 있습니다.

콤보 상자 팁

콤보 상자는 항목 목록이 포함된 팝업 창(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 템플릿을 수정할 때 상태 패널에 나타납니다.

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

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

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 아트보드에서 기록 단추 상태 패널에서 기준을 선택합니다. 별개의 두 상태가 활성화되었을 때의 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정한 상태에서 다른 상태 그룹의 상태를 수정할 수 있습니다.

템플릿 바인딩

Background, BorderBrush, Foreground 또는 BorderThickness 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 Blend에서 개체 속성을 템플릿으로 연장을 참조하십시오.

ComboBox 컨트롤로 개체 변환

다음 그림은 콤보 상자의 전체 디자인(comp)입니다.

이 예에서는 다음 절차의 2단계에서 XAML 코드를 사용합니다.

1. 새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. 다음 코드를 복사하여 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>
   

3. 붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.

4. 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 ComboBox를 클릭한 다음 확인을 클릭합니다.

5. 개체 및 타임라인 패널에서 Ctrl 키를 누른 다음 두 TextBlock 항목을 클릭합니다. 선택한 항목 중 하나를 마우스 오른쪽 단추로 클릭한 다음 잘라내기를 클릭합니다. 범위 반환를 클릭한 다음 붙여넣기를 클릭합니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.

6. 개체 및 타임라인 패널에서 ComboBox를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 현재 항목 편집을 클릭합니다.

7. 개체 및 타임라인 패널에서 contentarea를 마우스 오른쪽 단추로 클릭한 후 그룹으로 묶기를 클릭한 다음 Grid를 클릭합니다.

8. Grid를 마우스 오른쪽 단추로 클릭하고 ComboBox의 파트로 만들기를 클릭한 다음 ContentPresenterBorder를 클릭합니다.

9. 파트 패널에서 ContentPresenter를 두 번 클릭합니다. 속성 패널의 레이아웃 범주에서 Margin을 다음과 같이 설정합니다.

   • Left   5

   • Right   5

   • Top   1

   • Bottom   0

10. 개체 및 타임라인 패널에서 사각형을 클릭하고 Ctrl 키를 누른 다음 Path를 클릭합니다. 선택 항목을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 클릭한 다음 Grid를 클릭합니다.

11. 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭하고 ComboBox의 파트로 만들기를 클릭한 다음 DropDownToggle을 클릭합니다. 확인을 클릭합니다.

12. Path를 마우스 오른쪽 단추로 클릭한 다음 잘라내기를 클릭합니다. 범위 반환를 클릭하고 DropDownToggle을 클릭한 다음 Ctrl+V를 눌러 붙여 넣습니다.

13. 개체 및 타임라인 패널에서 Grid를 선택합니다. 파트 패널에서 Popup을 두 번 클릭합니다.

14. 도구 패널에서 모눈을 두 번 클릭합니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.

15. 개체 및 타임라인 패널에서 popupbackground를 클릭한 다음 방금 만든 모눈으로 끌어 옵니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height, HorizontalAlignment, VerticalAlignment 및 Margin에 대해 이 작업을 반복합니다.

16. 개체 및 타임라인 패널에서 ScrollViewer를 새 모눈으로 끌어 옵니다. 속성 패널의 레이아웃 범주에서 너비 옆에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height, HorizontalAlignment, VerticalAlignment 및 Margin에 대해 이 작업을 반복합니다.

17. 범위 반환을 클릭합니다. 속성 패널의 레이아웃 범주에서 Height를 20으로 설정합니다.

18. 프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

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

참조

Microsoft Silverlight ComboBox 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의Silverlight 컨트롤 갤러리 에서 확인할 수 있습니다.

참고 항목

개념

Blend에서 공용 Silverlight 컨트롤의 스타일 지정 팁

SimpleComboBox 및 SimpleComboBoxItem(Blend에서 WPF 지원)

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