Data Binding : ListBox, Selected Item Binding

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