WPF 사실상 3일만에 끝내기 - 실습#3 (ItemTemplate)

WPF 사실상 3일만에 끝내기 - 실습#3 (ItemTemplate)

사실 실습2에이어서 실습3는 내용이 똑같다고 보시면됩니다.. 사실 실습3에서 할거를 제가 2에서도 해버리는 바람에 실습3가 좀 의미없게 되었는데.. 그래서 간단히 살펴보고 예제로 다른 추가학습을 할 수 있는 내용을 작성해 보도록 하겠습니다.

 위와같이 Discussion 페이지를 추가하고 Grid설정을 위 xaml코드처럼 작성해주시기 바랍니다. 여기서 사용한 '*'은 남은 크기만큼 비율로 자동으로 설정된다는 뜻이며. 여기서는 열과 행의 별이 각각 하나이므로 남은 크기만큼 전부사용하게되겠죠. 만약에 *, 2* 이런식으로 총 *개수가 3개가 된다면, 1/3와 2/3 로 각각 비율대로 설정되게 됩니다. 1*은 *과 동일한 뜻입니다. Margin은 여백을 나타냅니다.

 그리고 Live Supprot버튼과 페이지를 연결시키면 되겠죠.

 위 내용이 실습3의 끝이랍니다..! 그래서 추가적인 예제를 풀이해보도록 하겠습니다.

바로 이전에 포스팅에서 설명했던 바인딩

2018/04/28 - [C#(.NET)/WPF] - WPF - Data Binding (데이터 바인딩) - INotifyPropertyChanged

을 사용해서 리스트 박스에 바인딩시키고 리스트에 우리가 원하는 데로 템플릿을 적용해서 보여주도록 하는 작업이랍니다. 위 코드를 봐주시기바랍니다.

 모든 목록컨트롤에는 IEnumerable(C#선행학습필요:이전포스팅 참고)로 형식화되어있는 ItemsSource가 존재합니다. 해당 속성에 리스트를 바인딩시키고 ItemTemplate를 통해서 반복적으로 데이터를 모두 출력되게 하는 코드입니다. 이때 바인딩되는 객체의 Speed프로퍼티를 데이터템플릿 요소로 연결합니다.

 그 후 비하인드 코드로 이동해서 리스트객체를 생성하고 총 10개의 Car객체를 추가해주는 모습입니다. (이때 Car는 Speed프로퍼티를 갖고있습니다.) 그리고 가장 중요한 바인딩소스를 설정해주는 this.DataContext를 통해서 cars를 원본소스로 설정해줍니다.

Car 클래스

  그리고 실행해 주면 위와같이 우리가 원하는 결과가 출력되는 것을 알 수 있습니다. 그런데 너무 재미없죠?

 템플릿을 사용해서 위와같이 Grid를 수정해줍니다. 각각 요소마다 틀을 사용해서 스피드와 슬라이더 색상을 표시하며 수정할 수 있도록 바인딩을 사용해서 연결해준 모습입니다.

 그럼 위와같이 ListBox가 우리가 정해준 템플릿대로 자료를 출력해주는 것을 확인할 수 있습니다. 또 슬라이더를 좌우로 바꾸게 되면 speed텍스트 박스도 함께 변하며, 컬러텍스트를 변경해주면 색상 border도 함께 연동되어 변하는 것을 알 수 있습니다! 대단하네요. 그런데 너무 쉽게 되는 것 같아서 좀.. 꺼림직한거 빼곤

 아무튼 다음 실습 때 뵙겠습니다. 코드에 있는 다른 예시도 함께 보면 좋아요.

BikeShop - 3 - 토론페이지 생성.zip

주요내용
-비율지정(*)
-ItemTemplate
-ItemsSource 바인딩