티스토리 뷰

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

WPF 사실상 3일만에 끝내기

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

실습#3

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

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

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

ItemTemplate

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

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

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

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

this.DataContext

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

Car 클래스Car 클래스

실행모습1

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

추가적인 템플릿

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

실행모습2

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

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

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

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


공유하기 링크
TAG
,
댓글
댓글쓰기 폼