C# .net WPF끝내기 - 실습#4 (Collection Binding, 리스트바인딩)

C# .net WPF끝내기 - 실습#4
 (Collection Binding, 리스트바인딩)

저번에 이어서 실습내용 포스팅을 해보도록하겠습니다. 사용하는 책이 내용이 핵심내용만 추려져있어서 그런지 3일이면 실습을 끝낼 수 있더군요.. 업데이트는 주로 주말에 하니까 좀 더딘감이 없지 않은데 복습하는 차원에서 포스팅해보도록 하겠습니다.

리스트 바인딩(List Binding)

 이번 포스팅에서는 리스트 바인딩. 즉 리스트박스에  컨테이너(리스트 등)를 바인딩시켜 보도록 하겠습니다.

 그럼 가장먼저 바인딩에쓰일 자료구조에 담을 객체가 하나 필요하겠군요. 여기서는 Talk라는 객체를 만들고 해당 컬렉션에 Message객체를 담아서 바인딩을 시키는 구조입니다. Message객체는 간단하게 string형 멤버 센더와 컨텐츠 2개를 가지고있습니다. 이는 바인딩에 사용될 것이므로 케터세터 프로퍼티로 만들구요.

 그런데 여기서 그냥 List를 사용하지 않고 ObservableCollection<>을 사용하게됩니다. 해당 옵저버블컬렉션을 부모로 상속받으면 리스트내용이 추가되거나 변경될시에 자동으로 바인딩작업을 해준답니다. 즉, 일반 List컬렉션에 추가적으로 바인딩기능을 심어놓은 컬렉션이라고 보시면되겠고, 사실상 우리는 속안에 내용이 어떻게 짜여져있는지 몰라도 쉽게 바인딩이 가능해집니다! 

C#코드에서 talk객체를 생성해준뒤 DataContext로 지정을 해주었습니다. 즉 바인딩 원본(source)을 talk객체(옵저버블컬렉션,관찰가능한 컬렉션)로 지정해준 것이죠. 이때 우리는 추가적인 작업없이도 리스트에 item을 담아주기위해서 아까 위에 talk클래스의 기본생성자에서 자동으로 Message를 추가해주었습니다.

 그다음은 재믈(Xaml)코드입니다.

 우리는 빨간색 영역안에있는 리스트 박스에 바인딩을 시킬 것이므로 해당 코드에만 집중하도록 하겠습니다. 위 코드의 21번째 라인을 보게되면 해당 라인이 리스트박스(listbox)를 정의하는 시작부분입니다.

 22번째 라인인 ListBox.ItemsSource는 리스트 박스에서 사용될 아이템들의 소스 즉 컬렉션을 지정하는 부분입니다. 위 코드에서는 직접 재믈코드에서 생성해서 쓰고있는데 우리는 C#코드에서 생성된 녀석을 쓸 것이므로 아래와 같이 다시 수정합니다.

 주석처리하고 아이템소스를 특수확장문법을 사용해서 Binding 하겠다고 지정했습니다.

그리고 ItemTemplate을 지정해줍니다. 아이템템플릿이란 컬렉션에 있는 데이터를 가지고 어떻게 리스트박스에 뿌릴 것인지를 지정할 수 있습니다. 입맛에 맞게 마음대로 지정이가능한데, 우리는 채팅창을 표현할 것이기 때문에 간단히 스택패널을 사용해서 지정해보도록 하겠습니다.

 먼저 메세지사진과 Sender를 보이게 하기위해서 스택패널 한개를 더 추가한뒤에 정렬방식을 Horizontal로 해줍니다. 그 후 이미지를 배치, 텍스트는 Sender 속성과  바인딩해줍니다. 그리고 밑에는 컨텐츠를 입력하면되니 똑같이 Content와 바인딩 해주면 되겠습니다.

 그리고 실행해서 메세지 페이지를 들어가주면 위와같이 우리가 원하는 대로 바인딩되어 리스트박스 내부에 출력된 것을 확인할 수 있습니다. 이로써 컬렉션또한 쉽게 바인딩할 수 있는 것을 실습해보았습니다! (사실 바인딩은 심화적인 내용이 더 많습니다. 컨버터.. 등. 해당내용은 다음기회에 포스팅 해보도록하겠습니다.)

BikeShop+-+4+-Talk.zip