WPF 실습#5 - DataGrid Binding

WPF 실습#5 - DataGrid Binding

 이번실습은 실습#4와 거의 동일한 방식의 코딩으로 진행됩니다. UI를 설명하자면 Search부분에서 검색한 타이틀이 바로 밑에있는 DataGrid에 표시되며, 선택하게되면 바로옆 Border영역에 디테일한 정보가 표시됩니다. 또한 디테일영역은 TwoWay로 변경시 내부 데이터도 동일하게 변경 가능합니다.

 먼저 재믈(Xaml)코드를 설명하도록하겠습니다. 제가 보라색으로 지정한 영역은 Search영역 즉 검색을 가능하게 해주는 인터페이스영역입니다. 참고로 중요한 부분은 빨간색 밑줄을 쳐 놓았으므로 이부부만 확실히 이해한다면 이번 실습은 끝입니다. 여기서는 해당 텍스트박스의 내용이변하면 발생하는 TextChanged이벤트를 textBox_TextChanged로 코드비하인딩으로 지정해주는 부분입니다.

 해당부분을 C#코드에서 구현된것을 보도록 하겠습니다. 이벤트가 발생하면 dataGrid(23번줄)의 아이템 소스를 검색해준 것과 일치하는 컬렉션으로 지정해주는 것을 확인 할 수 있습니다. 이로써 우리가 검색해준 내용이 그리드뷰에 뜨게되는 것이죠. 자동으로 처리해주니 검색버튼을 따로 넣어주지 않은겁니다. 물론 검색버튼을 추가해도 아무런 문제가 없습니다.

  FindProducts에서는 또 Where를 사용했고 람다를 넘겨주어 타이틀을 검색하도록 해주는 모습입니다.

 그 다음 초록색 영역은 데이터 그리드 영역이며 중요한 부분은 참조자이름(Name)을 dataGrid로 설정하는 부분입니다.

이를 이용해서 C#코드 내부에서 텍스트가 바뀌는 이벤트가 발생할 때 마다 그리드뷰의 바인딩소스를 동적으로 알맞게 변경해줄 수 있습니다.

 다음은 노란색영역입니다. Border영역으로 우리가 선택해준 요소의 자세한 정보를 표시하기위해 만든 UI입니다. 이때 24번째 라인에서처럼 DataContext를 데이터 그리드의 SelectedItem으로 설정하는 것을 볼 수 있습니다! 왜 저렇게 했냐하면 바로 데이터그리드의 각각의 아이템이 바로 우리가 확인할 객체인 Product이기 떄문이죠. 이따가 살펴볼 거지만 Product객체는 각각 Title,Price,Color,Referencr 프로퍼티(속성)를 가지고 있습니다. 즉 바인딩 가능한 것이죠.

 그렇기 때문에 31번째 줄과 같이 바인딩이 가능하며, 해당부분을 사용자가 UI로 수정시 내부데이터도 수정되게 하려고 모드는 ToWay로 명시적으로 사용해주는 모습입니다. (설정하지 않아도 Default는 ToWay라 생략해도 무방합니다.) 특이한게 36번째줄에서 Background도 바인딩 해주는 모습인데 이는 Color가 Background의 값으로 가질 수 있는 문자열형이기 때문입니다. 이제 Product클래스를 살펴볼께요.

 Product클래스는 기본적으로 아까 말했던 속성 이름,가격,색상 등을 가집니다. 그리고 ProductsFactory라고해서 IList로 Product들을 갖고있는 클래스도 있는데 이는 자동적으로 랜덤하게 아이템들을 추가하기 위해서 (예제의 편리를 위ㅐ) 만들어준 클래스입니다. 자세한 내용이 궁금하신 분들은 첨부된 소스코드를 참고하시면 되겠습니다.

 이로써 모두 완성이 되었습니다. 그럼 위와같이 검색도 가능하며 details영역에서 직접 수절도 가능합니다!

 내용을 수정해서 색을 Orange로 바꿔주니 밑에있는 색상도 오렌지색으로 바인딩되어 변경되는 것을 확인할 수 있습니다. 간단하죠? 바인딩이 처음에 이해하기는 참 쉽지않으나 제대로 공부하고 이해한 뒤에는 아주 편리하니 꼭 이해하시기바랍니다. 그럼 이번글은 여기서 마칩니다.

BikeShop+-+5+-+Product.zip