Horizontal Scroll ListBox 만들기 : 2. Item Template과 Sample Data Binding

새로운 ListBox를 하나 떨궈놓고,
아이템을 준비해보겠습니다.


Add Sample Data Source

1. Data Tab은 Project, This document 등 에 바인딩 되어있는 Data들이 정리 되어 보여지는 패널입니다.
우측상단의
Add Sample Date Source 아이콘(왼쪽)을 클릭하고,
Define New Sample Data... 를 선택합니다.



Data Tab > Add Sample Date Source > Define New Sample Data




Sample Data Source의 적당한 이름을 정해 주고 OK 누르면,


그림과 같이 무언가들이 잔뜩 생겨납니다.
SampleSDboys(샘플선덕보이즈+ㅁ+) 외 에도 Collection 이라는게-
생겨 났네요.

유용한 것이니, 슬쩍 살펴 보고 넘어 갈께요.

Collection

Collection 은 여러가지의 Property가 모여있는 Set라고 할 수 있어요.
Property의 오른쪽의 Change Property Type 버튼을 눌러 String, Number, Boolean, Image등 Option을 선택 할 수 있고-



String Type은 기본으로 위와 같은 Sample Date들을 가지고 있습니다.
물론 다 영문!



Image Type을 선택하면, Location에서 이미지들을 불러 올 수도 있는 모양!

그럼 다시 하던 것으로 돌아가-
선덕보이즈- 아이템이 되어줄 Sample Data를 만들어 보겠어요.



SampleSDBoys 오른 쪽 버튼을 클릭, Add Colletion Property 을 클릭해 새 Colletion을 하나 추가하고,



Colletion에 훈남들의 이름이 들어갈 String Type, 사진이 들어갈 Image type의 Property 각각 하나씩 추가 해 줍니다.



그리고 Image Property에선 미리 잘라두었던 이미지들이 있는 폴더를 선택 해 줍니다.

Data Binding
모든게 준비 되었다면, Data Binding은 항상 너무 쉽습니다.




1. 만들어 둔 SDboys Collection을 잡고 만들어둔 ListBox에 Drag and Drop 해주면, 끝.
Drag and Drop은 싫다면?


2. Objects 패널의 ListBox, 마우스 오른쪽 클릭! 하는 방법도 있습니다.



그럴싸한 것들이 들어있기 시작한 리스트 박스가 되었습니다.



지금 레이아웃 상태가 좀 답답하니까, ListBox의 크기를 Set to Auto 눌러 Auto로 바꿔주고보니,
훈남들의 이름이 전부 모르는 외쿡 남자이름으로 되어있군요!!!
이름을 바꿔주기 위해- Sample Data Source를 Edit합니다.

Sample Data Source Edit


Data 패널의 바인딩 되어있는 SampleSDBoy > SDboys 옆의 Edit sample values 아이콘을 클릭합니다.


Edit Sample Values창이 뜨고, 이 창에서 아이템이 총- 몇개까지 나열될 것인지와 더블클릭하면 각 Sample Value를 수정할 수 있습니다.
영문이름을 더블 클릭하여, 훈남들의 이름을 바꿔주고.
저의 SDboys는 총 8명이니 - 아래의 Number of records에서 10을 8로 바꿔주고 OK.

알맹이부터 디자인 적용을 해보아요.

Item Template


ListBox를 선택하고 Edit Addional Templates > Edit Generated Items (Item Template) > Edit Current 로 들어갑니다.


기본적으로 StackPanel안에 Image와 TextBlock이 들어있네요.
디자인 대로-


Image를 선택하고 사이즈를 조절(잘라논 png 사이즈가 114*152 였기 때문에-) 해주고,

TextBlock을 선택하고,

1. Text색 속성인 Foreground 를 선택하여, 
1-2. 색을 #FF818181로 셋팅
2. TextBlock의 너비는 글자수에 따라 자동으로 늘어나고 줄어 들 것이기 때문에 Width 는 Auto
3. HorizontalAlignment에서 Center정렬
4. 아래에 있는 사진으로 부터 Margin 8
5. 폰트는 맑은 고딕을 써볼까요-
6. 글씨 크기는 조금 키워서 10pt
7. B 아이콘을 클릭하여 Bold
8. 맑은고딕은 Built-in Silverlight font가 아니므로 프로젝트에 추가 해주어야 하니 Embed에 체크!


StackPanel를 선택하고 Item들간의 간격을 위해 10정도 셋팅해둡니다.

Item 디자인은 다 된 것 같군요.
Item template에서 빠져나와-


ItemsPanel

이제 아이템들이 가로 정렬 셋팅을 위해 


Edit Additional Templates > Edit Layout Items (ItemsPanel) > Create Empty 를 눌러-
ItemsPanel에 들어가봅니다.



Item들이 나열되는 Panel로 StackPanel 하나가 달랑 들어있습니다.
StackPanel을 선택하고 Oreientaion 을 Vertical -> Horizontal로 변경해줍니다.


여기까지! 그럭저럭 비슷한 모양이 되어가는 군요.

이제- ListBox의 Template을 수정해서 배경, ScrollBar의 디자인을 적용시키고, ScrollViewer의 구조를 살펴 보도록 합니다.
그리고 마우스와의 인터랙션 등 약간의 효과들을 적용시켜 선덕보이즈~ ListBox를 완성 시켜 보도록 해요.



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

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

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








저작자 표시 동일 조건 변경 허락
신고
posted by K8

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

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

저작자 표시 동일 조건 변경 허락
신고
posted by K8


티스토리 툴바