Roaming from the Earth

질문원본 URL :  http://cafe.naver.com/expressionstudio/2873

어떻게 사용하느냐에 따라 틀리겠지만,
사용하고 싶은 도형이 간단한 State를 가지면 아래와 같은 방법을 사용 할 수도 있습니다.

Control의 Template를 사용하여 사용할 Object를 Contents Presenter로 보여주고,
Control의 Template에서 사용할 State를 추가해서 사용하는 방법입니다.

아래는 간단한 예제입니다.
Button control에 새로운 State를 추가해서 사용해 보겠어요.


1. Silverlight Application을 먼저 생성합니다.


2. 간단하게 Button Control을 하나 추가해줍니다.


3. 버튼 컨트롤안에 바꿔 사용할 Object인 Rectangle을 넣어줍니다. 위 표시된 그림과 같이 Recactangle은 Button의 자식객체로 들어갑니다.


Button Template

4. Button > Edit Template > Create Empty 를 차례로 선택하여 Button Template 설정을 해보겠습니다.



5. Template Name은 간단히 지어주고,


6. 새로운 Template을 생성하면 위 그림과 같은 구조를 볼 수 있습니다.


7. 6의 표시된 영역에 ContentPresenter를 추가합니다.
순서와 같이
1) Toolbar에서 화살표를 클릭한 후
2) content라고 검색해주면
3) 쉽게 Content Presenter를 찾을 수 있습니다.

+ 위 ContentPresent의 Content는 Button의 자식객체와 자동으로 Binding 됩니다.


8. 위 그림과 같이 Grid의 자식 객체로 ContentPresenter를 추가합니다.



Add Visual State Group

9. 새로운 State Group을 추가합니다. 
1) States 패널을 선택후
2) Add State Group 버튼을 클릭해 새로운 State Group을 추가합니다.


10. 새로 추가한 State Group에서 Add state 버튼을 클릭해 설정할 State를 추가합니다.


11. 위 그림과 같이 간단하게 Scale200과 Scale100 State를 추가해 보았습니다.



12. Scale200 State에서 Content의 Scale이 두배로 커지게 설정 하고,
Scale100 State에서는 원래 크기를 가지는 State를 설정 할꺼에요.

1) Scale200 State를 선택하고,
2) grid를 선택한후
3) Transform 패널의 Scale 부분에서 X 와 Y를 각각 2로 설정해줍니다.

+ grid의 Scale을 설정해주었지만, Content 부분만 각스테이트별로 속성을 변경하려면 ContentPresenter의 Properties를 설정 해주시면 됩니다.

+ Content Presenter는 Content를 보여주는 컨트롤이므로 Content Presenter 자체의 Properties(크기, 회전 등)은 설정해줄수 있지만, Content 자체의 Properties에는 관여하지 않습니다.



13. Scale100은 원본크기이니 따로 설정할 필요가 없습니다.
그림의 Button 부분을 눌러 Template 수정에서 빠져나갑니다.



14. 편의를 위해 Button의 사이즈를 조절해주겠습니다.
위 그림과 같이 width, height를 Auto로 해두면 자식객체의 크기에 따라 자동으로 Size가 변경됩니다.



15. Button을 copy하여,



16. Layout Root에 붙입니다.
1) 위 방법말고도 버튼을 추가한뒤 방금 생성한 template을 적용해도 되고,
2) 아트보드에서 버튼을 copy n paste 하셔도 됩니다.



17. 새로 붙여넣은 버튼의 Rectangle에 Ellipse로 바꿔줍니다.

위와 같은 방법으로 Control Template에 새로운 Custom State를 추가해서 사용할수 있습니다.

+ Button Control은 하나의 자식객체만 가질 수 있으므로, 여러개의 Object를 Content로 사용하고 싶다면,
Grid를 자식객체로 쓰고 그 Grid안에 Object들을 추가하여 사용합니다.


State가 잘 작동하는지 보기 위해, 버튼과 GoToStateAction을 사용하여 State들을 확인해보도록 하겠습니다.



18. 위 그림은 두번째 Button의 Content를 Ellipse로 변경한 모습입니다.



GoToStateAction

19. 위 그림과 같이
1) 100, 200 이라는 Button을 추가해줍니다.
2) Asset panel을 선택하여
3) goto 라고 검색해주면,
4) 쉽게 GoToStateAction을 찾을 수 있습니다.
5) GoToStateAction을 100과 200 Button에 Drag n Drop 해서 각각 붙여줍니다.



20. 편의를 위해 버튼들의 이름을 바꿔주었습니다.
100, 200 Button과
Rectangle이 Content로 들어있는 Shape1과
Ellipse가 Content로 들어 있는 Shape2입니다.



21.
1) 100 Button에 붙여 놓은 GotoStateAction을 선택하고
2) TargetName의 2 버튼을 클릭하여,
3) Shape2를 대상으로 선택합니다.
4) State Name의 Select Box를 클릭하면 Shape2 가 가진 State들이 나옵니다.
5) 그중 Scale100 State를 선택해 줍니다.

+ GoToStateAction은
SourceName (_200)에 어떤 EventName(Click)이 발생했을때, TargetName(Shape2)의 State를 StateName(Scale200)으로 변경해주는 Behavior입니다.



22. 21번 방법과 마찬가지로 200 Button의 GoToStateAction의 Properties를 Shape2의 Scale200 State로 가게 변경 시켜 줍니다.

23. F5키를 눌러 Run Project 합니다.
아래와 같은 결과를 얻을 수 있습니다.




도움이 되었나요?? :D

Silverlight의 Visual States와 Data State Behavior와 Data Binding으로 간단한 메뉴 네비게이션을 동작 시켜 볼께요.
Sample Data Source로 부터 DataBinding된 ListBox로 된 네비게이션을 클릭하면,
각 메뉴에 맞게 state가 변경되어 Contents가 바뀌는 실습입니다.

몹시 간단한 실습이지만, project 파일 첨부하겠어요 LOL

 

1. 먼저  Silverlight Application Project를 만들어 줍니다.

 
2. New Sample Data… 버튼을 클릭하여,Menu Item을 넣어 줄Sample Data를 생성해 줍니다.

 
3. Add Collection Property 를 클릭하여, MenuSample이라 이름 붙인 Sample Data Source에 Menu명이 들어갈 Collection을 추가 해줍니다.

 
4.  새로 만들어진 Collection에 Add simple property 버튼을 클릭해서 menu명이 될 string type property 를 추가 해줍니다.

 
5. Collection1의 Edit sample values 버튼을 클릭해서 Menu  명을 임의로 바꿔볼께요.

 

위 그림과 같이 간단하게 Menu1, Menu2, Menu3 으로 메뉴명을 설정해주고 Number of records  는 3으로 설정하여 메뉴가 3개가 나오게 만들어 줍시다.

 
6. Collection1 을 아트보드위에 drag n drop하여, Menu  네비게이션이 될 ListBox를 생성해 줍니다.

 
*.  예제가 약간 그럴싸하게 보이기 위해 Header, Lnb, Contents 영역이 들어간 전형적인 Layout 을 급히 만들어 주었습니다.

 
7. 각 메뉴별 Contents 를 다르게 표현하기 위해 Contents영역에 Rectangle을 넣어서 Contents별로 색이 바뀌게 해보겠습니다.
TextBlock이나 각 메뉴마다 다른 UserControl 이 보이도록 할 수도 있겠죠.

 

Objects 들이 위 그림과 같이 구성되었습니다.

 
8. 이제 각 메뉴별  States를 추가 해 보겠습니다.
States panel을 열어 Add State Group > Add State 버튼을 차례로 클릭해 줍니다.
State Group 의 이름을  MenuStates로 바꿔 줬어요.

 
State를 3개 추가해서 위 그림과 같이 State 이름을 넣어줍니다.
*. 이 실습에서는 Menu이름과  State이름을  Binding 시킬것이기 때문에 둘을 똑같이 이름붙여줘야합니다.

 
 
 

 
9. Base 부터 각각 State 를 클릭하여, Contents 영역에 추가해 두었던 Rectangle의 Fill 속성을 그림과 같이 각각 다르게 설정해 줍니다.

 

10. Contents변경 확인용의 TextBlock을 Grid와 함께  Contents 영역에 넣어줍니다.

 

11. 위 그림처럼 Rectangle중앙에 위치시켜놓은 10번의 TextBlock에 Detail Mode의 Data 의 메뉴이름을 설정 해둔 Property1을 Drag n Drop하여 Binding 시켜줍니다.

 
12. 지금 추가시킬 Grid는 Menu 네비게이션의 Selected Item의 Text값에따라 같은 이름의 State로 보내줄 역할을 하게 만들어 줄 부분입니다.
Grid를 아트보드 구석에 하나 추가 해줍니다. Layout에 시각적요소로 영향을 미칠 object가 아니니 안보여도 되겠죠.

 

13. 만든  Grid에 Detail Mode > Collection1 > Property1 을 Drag n Drop해서 Binding 시켜줍니다.
Create a [TextBlock] and bind its Text property to …  라는 메세지가 뜨는데, Property type에 맞게 Databinding 된 TextBlock이 자동으로 생성됩니다.

 

XAML소스코드를 살며보면  위와 같이  Text=”{Binding Property1}” 텍스트 부분에 Property1이 binding 된것을 볼 수 있고,
이TextBlock의 부모객체인Grid에도 DataContext에 Collection이 binding  되어있습니다.

 

14. Asset Library > Behavior를 열어 13에서 만들어진 TextBlock에 메뉴에 따라 State 로 보내줄 DataStateBehavior를 Drag n Drop하여 붙여 줍니다.
(사실  이 Behavior는 대상의 Data를 설정해줄것이기 때문에Object 의 아무곳에 붙어도 상관이 없습니다)

 

 

15. 14에서 붙인 DataStateBehavior 를 선택하고 Properties panel을 열어
1) Binding Property의 Artboard element picker버튼을 클릭하고
2) 아트보드위의 13에서 만들어진 TextBlock 을 클릭해줍니다.

 

16. Value Property의 작은 사각형 버튼인  Advanced option > Element Property Binding 을 차례로 선택하고, 아트보드 위의13번  TextBlock을 선택해 줍니다.

 

17. Property를 선택하는 창이뜨면 Text를 선택해 줍니다.
Value에 13번  TextBlock의 Text 가 binding시켜줬습니다.
18. True state Property에도 Value와 같이 Advanced option > Element Property Binding 을 선택하여 TextBlock의 Text와 Binding 시켜 줍니다.
Menu이름의 Text를 State 이름에 넣어줌으로, 메뉴이름과 같은 State로 보내지게 Binding 됩니다.

 
DataStateBehavior의 Properties가 위 그림과 같이 설정됩니다.

 

19. F5를 눌러 Run Project를 실행 합니다.

원하는 결과가 나왔나요?
위 실습과 같이 간단한 메뉴 네비게이션을 가진 레이아웃을 state를 사용하여 구성 할 수도 있으며,
DataStateBehavior의 TrueState와 FalseState를 사용하여 좀 더 다양한 기능의 네비게이션을 구현 할 수도 있습니다 :D

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

이어서 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로 실행 해 봅니다!
잘 돌아가고 있나요?


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

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

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

1월에 아카데미 정글에서 강좌를 진행하게 되었습니다.
1월 25일 부터 27일까지 3일간 9:00~18:00 종일반 ! +ㅁ+

주제는 크로스미디어 커뮤니케이션 Expression Blend3 for RIA/WPF 이고 유료에요.

Expression Blend의 기초 툴테크닉 위주로 살펴 볼 꺼에요.
수강신청과 자세한 내용은 이 곳 에서 할 수 있어요.



커리큘럼은 적당히 바뀔 수 있답니다!


>_</ 그럼 1월에 만나요!

정글아카데미 마지막 강의시간에 한 분이 유명한 곳 몇군데 알려달라고 요청하셔서,
제가 알고 있고 써봤거나 회사에서 구입해 본 몇 곳만(!) 알려드립니다.
물론 검색해보시면- 더 다양한 곳을 찾으실 수 있겠지만 ^^

Telerik 
Demo : http://demos.telerik.com/silverlight/

Infragistics
Sample Browser :   http://labs.infragistics.com/silverlight/lobsamples/2009.2/

Component one
Studio for Silverlight Control Explorer : http://demo.componentone.com/Silverlight/ControlExplorer/

상세한 컴포넌트의 장단점에 대해선 말씀드릴수가 없네요-
각 프로젝트의 성격에 맞는 녀석을 설명을 잘~ 보고 선택하시면 될 듯.


그리고 써보진 않았지만, 컴포넌트와 차트로 유명하다는

SoftwareFX
Chart FX for WPF : http://www.softwarefx.com/sfxNetProducts/ChartFX/wpf/
Chart FX Silverlight Add on : http://www.softwarefx.com/sfxNetProducts/ChartFX/silverlight/

가 있습니다.

Silverlight, WPF등 프로젝트에서 컨트롤 커스터마이징이나 기능구현등을 직접하기도 하지만,
개발 공수에 따라 필요한 기능이 구현되어있는 컴포넌트를 구입해서 사용하는 경우도 많죠.

디자이너인 저는 프로젝트 들어가기 전에 벤치마킹을 위해 종종 들러 데모들을 둘러보곤 합니다.
아직 Silverlight, WPF Application에 익숙하지 않은 디자이너에게는
시각적으로나 컨트롤의 구조이해에 제법 도움이 되니 참고하세요.

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

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

11월에 아카데미 정글에서 강좌를 진행하게 되었습니다.
주제는 크로스미디어 커뮤니케이션 Expression Blend3 for RIA/WPF 이고 유료에요.

Expression Blend의 기초 툴테크닉 위주로 Expression Design, Expression SketchFlow도 살펴 볼 꺼에요.
수강신청과 자세한 내용은 이 곳 에서 할 수 있어요.

강의개요 :


커리큘럼 :

1강	Silverlight와 WPF 그리고 RIA Silverlight, WPF 그리고 RIA는 무엇인가? Expression Blend의 역할과 이해 Blend를 다루기 위한 기초지식과 준비
2강	Expression Blend 둘러보기 Expression Blend의 인터페이스 Toolbar와 Panel Blend의 기능 살펴보기
3강	Expression Blend로 UI구성 Layout Panel Control과 UserControl Asset Library 살펴보기
4강	Expression Blend의 그래픽과 Expression Design 도형, 칠, 변형, path 미디어 Expression Design
5강	Expression Blend의 애니메이션 스토리보드 작성과 컨트롤 모션 - x.y.z축, 가속도 등
6강	Control Template과 Style Control Template과 Style - 버튼, 체크박스 리소스 등록 관리와 Theme Silverlight의 VSM WPF의 Trigger
7강	Expression Blend advanced ListBox 커스터마이징 - Sample Data + Data Binding + ListBox Behavior 사용 TFS사용
8강	Blend와 Sketch Flow Sketch Flow의 용도와 사용방법 Sketch Flow의 활용