아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 다섯 번째인 Using the ListBox and DataBinding to Display List Data의 번역본 입니다. 

실버라이트 튜토리얼 파트 5: 리스트박스와 데이터바인딩를 사용하여 데이터 표시하기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 다섯 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

리스트 박스와 데이터 바인딩을 사용하여 Digg 스토리 표시하기

지금까지 우리는 Digg 스토리를 표시하기 위해서 데이터 그리드컨트롤을 사용했습니다. 그 방법은 컨텐츠를 컬럼 형식으로 표시하기를 원할 때 좋습니다. Digg 클라이언트를 위해 우리는 아마도 그 모양을 약간 바꾸고 싶어하고 스토리들을 데이터그리드 보다는 리스트처럼 보이기를 원할 것입니다. 좋은 소식은 그렇게 하기가 쉽다는 것이고 코드를 바꾸지 않아도 된다는 것입니다.

데이터그리드 컨트롤을 <ListBox> 컨트롤로 대체하는 것부터 시작하겠습니다. 컨트롤 이름은 이전과 같은 이름("StoriesList")을 쓰겠습니다.

프로그램을 다시 실행시켜 검색을 해보면 리스트박스는 아래처럼 표시될 것입니다.



우리는 의문이 생깁니다. 왜 각 아이템이 "DiggSample.DiggStory"일까? 원인은 DiggStory 오브젝트를 리스트박스에 바인딩 할 때 기본적으로 ToString()이 호출되기 때문입니다. DiggStory 오브젝트의 "Title" 속성을 표시하려면 리스트박스의 "DisplayMemberPath" 속성을 설정해야 합니다.

이렇게 하면 리스트박스에 제목이 표시됩니다.

한번에 여러 개의 값이 표시되게 하거나 각 아이템의 레이아웃을 커스터마이징 하길 원한다면 리스트박스 컨트롤의 ItemTemplate를 오버라이드하거나 커스텀 데이터템플릿(DataTemplate)를 사용할 수 있습니다. 데이터템플릿 속에 각 DiggStory 오브젝트가 어떻게 표시될 지 설정할 수 있습니다.

예를 들어, 데이터템플릿을 이용하여 DiggStory의 제목과 NumDiggs 값을 동시에 표시하고 싶으면 아래와 같이 합니다.



데이터템플릿을 이용하여 DiggStory 오브젝트에서 원하는 public 속성을 데이터바인딩 시킬 수 있습니다. 위에서 본 두 개의 TextBlock 컨트롤처럼 {Binding PropertyName}을 어떻게 사용했는지 살펴보세요.

위에서 데이터템플릿을 사용하면 우리의 ListBox는 아이템들을 아래처럼 표시할 것입니다.

한걸음 더 나아가서 데이터템플릿을 아래처럼 변경해 보겠습니다. 이 데이터템플릿은 두 스택패널을 사용합니다. 하나는 수평방향으로 열 아이템을 쌓아 올리고 다른 하나는 수직방향으로 텍스트블럭을 쌓아 올립니다.

위의 데이터템플릿은 아래 스크릿샷처럼 아이템들을 표시합니다.



App.xaml에 아래 템플릿을 정의합니다. DiggPanel에서 LinearGradientBrush를 사용하여 쓸만한 노란 그라데이션 배경을 어떻게 만드는지 보세요.

리스트박스에 대한 중요한 한가지는 비록 아이템들이 커스터마이징을 해도 여전히 아이템을 선택하거나 마우스가 위로 올라갈 때 효과를 자동으로 지원한다는 것입니다. 마우스를 사용할 때나 키보드의 위/아래 방향키, home/end키를 사용할 때 모두 지원합니다.

또한 리스트박스는 full flow 크기변환을 지원합니다. 그리고 필요할 때는 컨텐츠의 자동 스크롤링을 지원합니다. 윈도우가 작아졌을 때 수평 스크롤바가 어떻게 나타나는지 살펴보세요.



다음 단계

우리는 데이터 표시방식을 리스트 형태로 바꿨고 컨텐츠 리스트를 정리했습니다.

이제 이 프로그램에서 마지막 남은 기능을 완성합시다. 그리고 사용자가 리스트 한 개를 선택했을 때 그 스토리에 대한 자세한 내용을 볼 수 있도록 하는 master/detail 작업흐름을 구현해 보겠습니다. 다음 단계인 Using User Controls to Implement Master/Detail Scenarios (한글 번역본)로 넘어가겠습니다.

Published Friday, February 22, 2008 5:51 AM by ScottGu