훨씬 더 강력하고 현실적인 기능은 동적 컬렉션과 ListBox를 바인딩하는 것이다. 이번 예제에서는 미리 크기를 알 수 없는 컬렉션에 속한 다중 아이템들을 ListBox와 바인딩할 수 있도록 수정할 것이다
장바구니에서 항목들을 만들기 위해, C# 코드 중 한 가지를 변경해야 한다. ShoppingCart 클래스를 추가하고 List<ShoppingCartItem>을 상속받도록 한다.
다음으로 ShoppingCartItem의 컬렉션을 만들기 위해 XAML의 Resources 섹션을 수정해야 한다( 이 코드들을 모조리 다 입력하는 것은 좋은 생각이 아니기 때문에 그냥 예제를 실행시켜 보고 결과를 확인해 보길 추천한다)
이제, 컬렉션의 항목들을 보여 줄 준비가 되었다. 이번에는 화면상에 출력해야 할 항목의 수를 할 수 없기 때문에 이전처럼 Grid의 TextBlock 을 사용하지 ㅇ낳을 것이다.
원하는 것을 보여주기 위해 사용할 것은 ItemsControl이다. 이번 경우에는 ListBox를 만들고 이를 이용해서 각 항목들을 보여 줄 것이다. 하지만, 이 컨트롤을 사용한다고 해서 화면 레이아웃을 포기해야한다는 것을 의미하는 것은 아니다. ListBox 의 DataTemplate은 단지 하나의 컨트롤만을 가질 수 있지만, 바로 이 하나의 컨트롤이 여러개의 자식 컨트롤들을 가질 수 있기 때문에 염려하지 않아도 된다. 이번 예제처럼, 수평방향(Horizontal)으로 설정된 StackPanel은 "한 열" 전체를 가질 수 도 있다
한줄 전체를 포함하는 StackPanel은 네개의 자식 StackPanel 들을 갖고 , 다시 자식 StackPanel은 (Orientation을 수직(Vertival)으로 , Width 는 항목명의 폭과 동일하게 설정된다.
_SKU _Item _Description _Price
Master/Detail 구조
데이터를 표현하는 일반적이고 강력한 방식은 Master/Detail 혹은 주문명/주문상세 구조이다. 실제로 이런 구조를 Amazon.com 의 주문 내역 확인에서 볼수 있었다.
각 주문은 한 항목 이상으로 구성되어 있다. 이 주문은 한 항목 이상으로 구성되어있다. 이주문 항목들도 자체적으로 주문일을 포함해서 다양한 정보를 가지고 있다. 이러한 Master/Detail 구조는 비지니스 데이터 베이스에서는 매우 빈번히 사용된다.
다음 예제에서 ListBox에 보여 주어야 할 내용이 너무 많아 일부만 보여 주고 사용자가 각 항목을 클릭할 때 가지고 있던 해당 상세 정보를 보여 줄 것이다.
첫 번째 단계는 이전 예제를 수정해서 ShoppingCartItem 클래스에 LongDescription프로퍼티를 다음처럼 추가한다
public string LongDescription
{get;set;|
이 프로퍼티가 올바로 초기화될 수 있도록 다음처럼 생성자를 수정할 필요가 있다.
this. LongDescription = string.Empty;
C#의 코드의 수정이 끝났으면, 이제 훨씬 많은 내용이 수정되어야 하는 Window1.xaml페이지를 다룰 차례다.
우선,. 다음 처럼 각 Resurces 섹션의 각 ShoppingCartItem에 LongDescrition을 추가한다
이벤트 처리
사용자가 리스트박스의 항목을 클릭할 때 FullDescription이 보여질 수 있도록 보증하려면 다음의 절차를 밝는다.
1.Window1.xaml.cs에 이벤트 처리기를 추가한다. 이 파일은 Window의 코드- 비하인드 파일이다.
2. ListBox의 선택이 변경되었을 때 이벤트 처리기에 이를 알려 줄 델리게이트를 추가한다.
3. 리스트박스에서 선택이 끝났으 ㄹ때 자세한 설명을 보여 줄 TextBlock을 형태만 추가한다.
실제로는 두개의 TextBlock이 필요할 것이다. ListBox의 아래쪽으로 Grid 엘리먼트가 종료되기 전에 TextBlock을 하나 추가해서 자세한 설명의 항목명으로 사용할 것이고, 다른 하나는 ListBox에서 사용자가 클릭할 때 설명을 보여 줄 것이다
다음으로, 코드-비하인드 파일에 추가할 메소드를 호출할 수 있도록 ListBox를 다음처럼 수정한다.
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBox lb = sender as ListBox;
ShoppingCartItem scItem = lb.SelectedItem as ShoppingCartItem;
LongDescriptionLabel.Text = scItem.LongDescription.ToString();
}
결과
그리고 아래는 중국 블로거에서 가져온
이미지로 데이터 바인딩한 예제
- 참고 Programming .Net 3.5 by Jesse Liberty and Alex Horovitz.
GiftCenter_CheckOut.zip