다음을 통해 공유

SimpleListBox 및 SimpleListBoxItem

  • 아티클

This page applies to WPF projects only

목록 상자(ListBox)는 스크롤할 수 있는 목록 형식의 항목 컨트롤입니다. Microsoft Expression Blend에서는 목록 상자를 두 번 클릭한 후 사각형과 같은 요소를 그려 목록 상자에 콘텐츠를 넣을 수 있습니다. 개체 및 타임라인 패널에서 목록 상자를 마우스 오른쪽 단추로 클릭한 다음 SimpleListBoxItem 추가를 클릭하여 컬렉션에 개별 항목을 추가하거나 데이터에ItemsSource 바인딩을 클릭하여 데이터 원본에서 SimpleListBoxItem 요소 컬렉션을 생성할 수도 있습니다. 컬렉션에 개별 항목을 추가하는 경우 목록 상자를 두 번 클릭하여 활성화한 다음 항목을 끌어 항목의 순서를 원하는 대로 바꿀 수 있습니다. 목록 상자의 SelectedIndex 속성을 사용하여 선택 항목을 설정할 수 있습니다.

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

Cc295293.542edff2-bb86-4d80-902d-93810083b1a9(KO-KR,Expression.30).png

컨트롤 템플릿 분석

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

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

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

  • ScrollViewer 요소 목록이 너무 긴 경우 응용 프로그램 사용자가 스크롤할 수 있도록 하는 데 사용됩니다.

  • StackPanel ScrollViewer 요소 내에 포함되며 항목을 정렬합니다. StackPanel의 IsItemsHost 속성을 True로 설정하여 이 템플릿이 적용되는 목록 상자 컨트롤의 항목을 표시할 요소로 ScrollViewer를 식별합니다. 개체 및 타임라인 패널에서 StackPanel 요소를 마우스 오른쪽 단추로 클릭한 다음 레이아웃 형식 변경을 선택하여 StackPanel을 UniformGrid와 같은 다른 패널 요소로 변경할 수 있습니다.

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

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

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

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

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

    Cc295293.0ad09c5f-f7f2-474d-b236-4b7d3952e69f(KO-KR,Expression.30).pngCc295293.db944557-0b57-4b64-ba83-70c0cdd8f914(KO-KR,Expression.30).png

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 목록 상자에 대한 템플릿에서 목록 상자 항목의 IsSelected 속성이 True이면 항목의 배경색이 변경됩니다. 목록 상자 항목에 대한 템플릿에서 IsHighlighted 속성이 True이면 Border 요소의 Background 속성이 목록 상자에서 선택된 항목을 나타내도록 변경됩니다.

브러시 사용

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

  • Background 속성은 트리거가 활성화되지 않은 경우에는 WindowBackgroundBrush를, IsEnabled가 False인 경우에는 DisabledBackgroundBrush를 사용하여 설정됩니다.

  • BorderBrush 속성은 트리거가 활성화되지 않은 경우에는 SolidBorderBrush를, IsEnabled가 False인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

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

참조

작업

실습 정보: SimpleListBox의 선택 항목 모양 변경