Data Panel의 List Mode와 Detail Mode를 살펴보면서 완전(!) 간단한 예제 하나 만들어 보겠습니다.

List mode와 Detail mode를 사용하면 간단하게 ListBox의 selected item의 data를 binding해 줄 수 있어요.

 

1. Silverlight Application 을 하나 만들어 줍니다.

 



2. ListBox 에 Binding할 Sample Data를 추가해서 준비를 해봅니다.

 



3. Collection 에서 Add simple property 버튼을 클릭해서 Property 하나 더 추가 해줍니다.

 



4. 새로 추가한 Property 의 Type을 Image로 바꿔 줍니다.




5. Layout Root , Grid를 Selection 툴을 사용해서 칸을 나눠 줍시다.
왼쪽에는 ListBox를 넣고 오른쪽에는 Select된 Item을 보여 줄 Layout panel을 넣을꺼에요.

 



6. Sample data source의 collection을 Grid왼쪽칸으로 Drag n drop하여 ListBox를 간단하게 추가 해줍니다.


 

Data 패널에 data binding이 활성화되어 노란테두리가 생깁니다.

 

 

7. 오른쪽 Selected Item을 보여줄 Layout panel로 StackPanel을 추가 해줍니다.

 

 

8. Stack Panel 안에 Asset Library 를 열어서 Selected Item중에 Image부분이 Binding 될 Image 컨트롤을 추가해 줍니다.


 

위 그림과 같이 layout을 적절히 조절해 줍니다.

 

 

9. Stack Panel안에 Selected Item 중에 Text 가 Binding 될 TextBlock을 추가해 줍니다.

 

 

TextBlock도 위 그림과 같이 Layout을 적절히 설정해 줍니다.

 

 



10. Data Panel을 두개의 탭을 살펴 볼께요

  • List Mode : 항목목록 (일반적인 데이터 컬렉션)을 표시하는 마스터 보기.

    ListBox, DataGrid, TreeView 컨트롤로 항목을 끌 수 있고, 아트보드로 collection항목을 끌면 자동으로 ListBox가 만들어 집니다.

  • Detail Mode : 목록의 선택된 항목에 대한 세부 정보를 표시하는 세부정보보기

    Grid, Canvas등 LayoutPanel에 항목을 끌 수 있고, 아트보드로 Collection항목을 끌면 Grid와 자식객체로 세부정보보기를 만들 수 있습니다.

    *. 이때 Expression Blend는 Grid 개체의 DataContext속성을 마스터 보기를 표시하는 개체의 SelectedItem 속성으로 설정하여 마스터 보기와 세부 정보보기의 관계를 자동으로 구성합니다.

 

쉽네요. 자동으로 된답니다.

그럼 Detail Mode에서 Item들에 Binding만 시켜주면 되겠어요.

 


11. Detail Mode 선택하면, Collection앞의 아이콘이 바뀌죠! Property 3(Image type)을 추가해둔 Image Control로 Drag n Drop해서 Binding 시켜 줍니다.

 

 

12. Property1(string type)은 TextBlock으로 Drag n Drop해서 Binding 시켜 줍니다.

 


13. F5 눌러서 Run Project해봅니다.

 

원하는 결과물이 나왔나요?

응용하기 위해선 XAML코드를 열어 Detail항목과 List항목이 Binding될때 코드들을 잘 살펴 보세요 :D

신고
posted by K8

이어서 ScrollBar 에 디자인을 적용해 볼께요.

2까지는 ListBox Template안의 ScrollViewer의 Template을 Edit 하고있었죠-

ScrollBar Template
이 ScrollViewer의 Template에서 디자인을 적용할 VerticalScrollBar를 선택합니다.


1. VerticalScrollBar > Edit Template > Edit a Copy...



2. VerticalScrollBar의 Template에서 구조를 보면 그림과 같이 Vertical, Horizontal  Scroll모두 가지고 있는 모습을 볼 수 있습니다. 현재 디자인으로는 ScrollBar의 Small Decrease와 Small Increase만 필요하기때문에 나머지 엘리먼트들은 지워버려도 됩니다.



3. 이 Small ~ 부분은 우리가 어디서나 볼 수 있는 ScrollBar의 화살표가 있는 버튼 부분과 같은 기능을 하며, 이 부분 하나로 또 하나의 컨트롤을 구성하고 있기때문에 Template을 수정 할 수 있습니다.
VerticalSmallIncrease > Edit Template > Create Empty...
기본 컨트롤의 구조와는 전혀 다른 버튼을 만들어 보기 위해 Create Empty를 선택해 봅니다.



4. 위 그림과 같이 Control에 Grid하나만 달랑 들어 있는 구조로 Template 이 새로 만들어 졌습니다.
여기에 버튼의 바탕 부분이 될 Eclipse를 하나 그려줍니다.



5. Brushes 속성의
1) Fill 선택
2) Gradient Brush선택
3) Radial Gradient선택
해주고 컬러바에서 그림처럼 컬러를 지정 해 봅니다.



6. 버튼에 빛나는 부분을 만들어 주기 위해서  Eclipse를 하나 더 그려주고 Fill 속성의 컬러에 alpha값을 지정해줍니다.



7. Pen tool을 이용하여 화살표를 그려 줍니다.

이제 이 버튼의 State를 설정 해볼께요.


8. MouseOver State를 선택하고 Grid의 Scale x,y를 1.1 정도로 설정 해줍니다.

Tip. 위 상황과 같이 버튼의 현재크기와 상관없이 일정비율로 늘어나거나 줄어드는 Transform일 때는 Scale을 넣어주고,
Size가 특정크기로 커지거나 줄어들때는 Width, Height값을 조정 해줍니다.



9. Pressed State를 선택하고 Grid의 Scale을 0.9로 설정 해 줍니다.
이제, 버튼에 Rollover가 됐을때 버튼이 약간 커지고 Press를 선택했을때 눌러지는 효과처럼 약간 작아지게 되었습니다.



10. 좀 더 자연스러운 press 느낌을 주기 위해 화살표 부분 path의 컬러를 조금 진하게 만들어 줍니다.

EasingFunction
Silverlight에서만 사용 할 수 있는 이 Easing Function은 StoryBoard나 Visual State의 Transition에서 자연스러운 애니메이션을 쉽게 설정 할 수 있게 해줍니다.
미리 설정 되어있는 가속,감속 그래프들이 제공되며 그래프를 선택을 하면 적용됩니다.



11. Common States의 Transiton에서 각 State들이 쫀득(!) 하게 움직이게 해주기 위하여 EasingFunction을 설정해 주겠어요.
EasingFunction  버튼을 눌러 봅니다.



12. 위 그림과 같이 여러가지의 그래프가 미리 설정되어 있고 이 중 원하는 그래프를 선택해줍니다.
이 디자인에서는 탄성이 있는 버튼 처럼 보여지기 위해 Back의 Out그래프를 선택해줍니다.



13. 그리고 Transition 타임을 0.2s 정도 설정 해주고-



14. Object panel의 Return버튼을 눌러 Template 에서 빠져 나가 봅시다.

현재 decrease버튼과 increase버튼이 똑같이 생기고 화살표 방향만 틀리기 때문에 방금 만든 Template을 적용하고 화살표 Path의 모양만 바꿔줄꺼에요.



15. Tempate이 지정되지 않은 나머지 버튼을 선택하고 Edit Template > Apply Resource > RepeatButtonControlTemplate1(방금작업했던 Template)을 선택합니다.



16. 그리고 화살표를 수정할 버튼을 선택하고 > Edit Template > Edit a Copy...를 선택합니다.



17. 수정을 화살표 path 를 선택하고 Transform에서 Flip > Flip Y axis를 선택하여 path를 Y축으로 반전 시켜 줍니다.

버튼들의 Template 은 다 되었으니 Object panel의 Return 버튼을 눌러 ScrollBar Template 으로 돌아가서,
VerticalRoot Grid의 필요없는 Row 를 삭제하여 레이아웃을 바로 잡아 봅니다.



18. VerticalRoot 를 선택하고 Properties panel의 Layout 의 아래 화살표 버튼을 눌러 확장하여,
RowDefinitions(Collection) 의 오른쪽 버튼을 클릭합니다.



19. 위 그림과 같이 Grid의 Row를 한번에 관리 할 수 있는 창이 뜹니다. small~버튼들이 들어있는 0, 4 Row는 빼고 나머지는 다 Remove item 버튼을 클릭하여, 삭제 해줍니다. (다중선택 안됩니다.)



20. Small ~ 친구들의 사이즈를  60*60정도로 설정해주어 적당하게 레이아웃을 설정 해주면 끝.


History Scope에서 ListBox를 선택하여 Template 에서 빠져 나온다음,


Run Project로 실행 해 봅니다!
잘 돌아가고 있나요?


띄엄띄엄썼더니, 흐름이 원활한지 모르겠네요!
잘안되는부분있으면 질문주세요 +ㅁ+

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

Horizontal Scroll ListBox 만들기를 통해 ListBox의 구조를 약간 파악하셨고- 조금 친해졌다면!!
ListBox와 친해지기 2탄!!!
'냠냠냠 Food ListBox'를 만들어 보도록 하겠습니다.
먼저 디자인을 해주었습니다.


이번엔 조금 틀리죠 –
Horizontal Scroll ListBox에서는 Item의 레이아웃과 Item Collection를 구성할 수 만 있었지만,
Item Template대신 ItemContainer에서 Item의 Data를 Binding 해서 Rollover나 Press이벤트에 따라 따로 노는 Item을 만들어볼께요.



1. Silverlight Application Project를 하나 만들고,
ListBox를 아트보드위에 하나 그려줍니다.




Sample Data Source

2. Item Collection을 먼저 만들어 볼께요.
Data패널에서 Define New Sample Data 를 클릭해서 새로운 Data Source를 생성해 줍니다.



FoodItem이라고 제목을 지어 줬습니다.



3. Collection의 Item들의 이름을 각각 FoodImage와 Name으로 바꿔주고, 
오른쪽 화살표 달린 버튼을 클릭해서 타입을 바꿔 줍니다.



4. Image Type으로 변경하고 Browse 버튼을 클릭해서, 저장해놓은 이미지의 폴더를 선택해주겠습니다.
제가 예쁘게 오려(!?) 놓은 이미지들을 샘플로 첨부합니다.




5. Collection을 ListBox에 Drag & Drop 해서 바인딩 해줍니다.
아트보드위에 맛난간식들 이미지와 모르는 영어들이 List를 가득채우고 있을껍니다!



6. Food Collection 오른쪽 Edit Sample Data 버튼을 클릭하여 이미지에 맞게 이름을 바꿔 줍니다.




Tip. Sample Image는 알파벳순으로 차례차례 나오고, 이미지 수가 Number of records의 숫자보다 작을때는 다시 첫번째 이미지 부터 반복됩니다.
(제가 첨부한 Sample이미지는 9장이므로 9를 적어주면되겠습니다.)


Edit Generated Item Container

Item Container에 디자인을 적용하고 이벤트 발생시 인터렉션을 설정해보겠어요.


7. Edit Additional Templates > Edit Generated Item Container > Edit a Copy



8. Style Resource의 이름을 적당히 정해줍니다.




9. Edit a Copy 를 선택해서 Style을 만들었기때문에 기본 컨트롤의 구조가 그대로 Copy되어 있는 모습입니다.
 컨트롤 구조에 조금 익숙해지면, Create Empty를 선택하여 디자인을 하면 되겠지만 아직 익숙해지기 위해 Edit a Copy하여 수정해서 쓰도록 합니다!
제가 만든 냠냠 아이들은 기족 구조가 필요없으므로 Ctrl + 좌클릭하여 다중선택하고 > 우클릭하여 Delete 선택하여 없애버립니다!



Grid의 Column을 3개로 나눠서
Normal상태에 보일 FoodImage, Food Name, Select 되었을 때의 Food Image순으로 넣어줄 겁니다.

Grid, Columns



10. Grid를 선택하고 Select툴을 사용해서 그리드를 적당히 나눠줍니다.
Grid위의 하늘색바 부분을 클릭하면 Column을 나눌 수 있습니다.



11. Layout 패널을 확장하면 나오는 ColumnDefinition 항목의 오른쪽 버튼을 클릭하면 통해
Column을 추가, 삭제 크기 설정등을 따로 할 수도 있습니다.


<Column Definition Collection Editor>



12. FoodImage를 Binding할 Image를 추가 해봅시다.
툴바 제일 아래쪽 Asset Library를 클릭하여, Image를 추가합니다.

Tip. Asset Library는 search가 쉽게 되니, 컨트롤의 앞글자 조금 적어주면 좀 더 빠르게 원하는 컨트롤을 찾아서 추가 할 수 있겠죠~




13. Normal 일 때의 작은 이미지, Select일 때의 큰이미지를 각각 하나씩 추가하고 이름을 붙여 줍시다.



14. SmallImagedml 사이즈를 42*42 정도로 지정해줍니다.
Horizontal Alignment는 왼쪽으로 정렬해줍니다.
그리고 Common Properties에서 Source 항목의 오른쪽 조그만 아이콘을 클릭해서 Data를 Binding합니다.



이렇게 생긴 Context menu에서 아래 노란 Data Binding을 선택합니다.



15. Create Data Binding 창이 뜹니다.
Data Field나 여러가지 Element의 Property라던지 선택하여 바인딩 할 수 있는 창이 뜨는 데,
Explicit Data Context를 선택하면 생성해 두었던 Sample Data Source의 Item Collection 의 리스를 볼 수 있습니다.
그중 FoodImage를 선택하고 OK를 눌러줍니다.



16. BigImage도 마찬가지로 Size를 80*80 지정해주고,
Grid의 Column위치를 2로 잡아주고, 
Alignment를 설정해준 다음,

Source > Data binding > Explicit Data Context > FoodImage 를 선택하여, FoodImage를 바인딩 해줍니다.

Tip. Grid에서의 Row와 Column은 1,2,3...의 순서가 아니라. 0,1,2,3... 의 순서로 첫번째 칸이나 줄은 0입니다.


17. 냠냠 아이들의 제목이 Binding 될 TextBlock을 추가 해 줍니다.



1) TextBlock의 위치는 Column 1, 적당한 Fontfamily와 FontSize를 잡아주고- 디자인에서와 같이 Bold도 넣어줍시다.
2) Common Properties의 Text 항목의 오른쪽 네모 버튼을 클릭해서 이미지들 Binding 한 것과 같은 방법으로
Data binding을 선택해줍니다.



18. Explicit Data Context > Name을 선택합니다.

준비물은 다 갖춰 졌네요.
이어서 State설정과 Storyboard등을 살펴보도록 하겠어요.

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

1. Grid의 Column과 DataBinding
2. State와 StoryBoard, Opacity Mask
3. ScrollBar Template
저작자 표시 동일 조건 변경 허락
신고
posted by K8

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


티스토리 툴바