Horizontal Scroll ListBox 만들기 : 1. ListBox의 구조

Horizontal Scroll ListBox 만들기 : 1. ListBox의 구조

프로젝트를 진행하다 보면, 매우 빈번하게 쓰이는 ListBox -
하지만 이 ListBox, 처음엔 친해지기가 조금 까다롭지 않습니까?!
(아아- 나만? ;ㅁ;)

지금부터 ListBox를 주물러 보기 위해,
먼저- 요즘 열광중인 선덕여왕의 ㅇㄷㅇㄷ하고 훈훈한 ListBox를 간단하게 디자인 해보았어요.

작업이 즐거울 것 같습니다!! +ㅁ+
승호가 저를 보고 있습니다!!

흠흠...
그럼 Blend를 열어 새프로젝트를 만들어 ListBox 하나를 떨어 뜨려 봅니다.

텅텅 빈 ListBox 입니다.
이 ListBox에 먼저 그려둔 디자인을 적용하기 위해 ListBox 컨트롤의 구조를 볼께요.

ListBox의 구조

1. Edit Templete 을 눌러 ListBox 컨트롤의 구조를 살펴봅니다.

2. 그림과 같이 Grid안에 
Validation ErrorElement 가 숨어있고(Collapsed)
Layout 패널, Border가 있고 그 안에 ScrollViewer가 있고 ItemsPresenter가 차례로 들어있습니다.

이 ItemsPresenter가 아이템들을 나란히나란히 뿌려줄 것이며,
아이템들은 ScrollViewer에서 스크롤 되어 보이는 구조 입니다.

좀 더 직관적으로 보기 위해 Border와 ScrollViewer의 Padding을 각각 10씩 주고 다른색을 채워 보겠습니다.

위 그림과 같이 ListBox의 ControlTemplate에서는 위와 같이 아이템 모두가 담겨 있는 컨테이너의 겉모양을 디자인 할 수 있습니다.
그럼 승호의 사진은 어디로??


Edit Additional Template
Item template, Item Container, ItemsPanel

ListBox의 Item들의 레이아웃, 효과 등을 디자인 하기 위해 우리는 Edit Additional Template를 사용합니다.

항상 Edit Template를 보며, 궁금해 했던 이 아이!!
각각,

Edit Generated Items (Item Template) - > 보여질 아이템 개개 항 목 자체 입니다.
Edit Generated Item Container (ItemContainerStyle) - > 아이템 하나하나의 Container이고
Edit Layout of Items (ItemsPanel) - > 보여지는 아이템 목록 전체를 담는 Panel 입니다.

알아보기 쉽게 ListBox에 SampleData를 적용하고,
각각 컬러로 표시 해 보겠습니다.

이제 우리는 대략- ListBox가 어떤 구조인지 알 수 있게 되었군요.
항상 조금씩 헷갈려서 말입니다-

구조를 알았으면, 거의 다 한거나 마찬가지 :-q
그럼 이제 본격적으로 디자인을 적용,

훈남들 부터 차곡차곡 아이템으로 넣어보아요.

이런식으로 미리 잘라놓은 png 파일들을 아이템으로 직접 넣는 방법도 있지만,
모처럼이니, ItemTemplate과 Sample Data Binding을 이용하여 넣어보도록 할께요.

 ItemTemplate과 Sample Date는 다음 강좌로 -


---------------------------

1. ListBox의 구조
2. Item Template과 Sample Data Binding
3. ScrollViewer와 ScrollBar

---------------------------