다음을 통해 공유

SimpleListBox 및 SimpleListBoxItem

  • 아티클

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

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

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

Cc295293.542edff2-bb86-4d80-902d-93810083b1a9(ko-kr,Expression.40).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 속성에 자동으로 바인딩됩니다.

속성 트리거 사용

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

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.