Roaming from the Earth

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