본문 바로가기

Silverlight

Template에 대해서 알아보자. - DataTemplate, ItemsPanelTemplate편


안녕하세요. 클라인스입니다.

감기 걸린지 2주가 지났는데도 아직까지 감기가 떠나질 않고 있네요..

제가 그리 좋은걸까요?? 감기 조심하세요..

그럼 강좌 시작하겠습니다.

이전 시간에는 Template 중에서 ControlTemplate에 대해서 알아보았습니다.

이번시간에는 DataTemplate, ItemsPanelTemplate에 대해서 알아보도록 하겠습니다.
우선 DataTemplate에 대해서 알아보도록 하겠습니다.

DataTemplate은 말 그대로 데이터의 외관을 꾸며줄 때 사용할 수 있습니다.
즉, 컨텐츠가 어찌 표현될지 꾸며줄 수 있다는 뜻입니다.(컨트롤 템플릿과 혼동하지 마세요!)

특히, ListBox, ComboBox와 같은 컨트롤에서 Binding과 결합하여 쓰면 아주 유용한데요..
대게 Items을 컨텐츠로 갖는(ListBox, ComboBox등)은 ItemTemplate에 버튼과 같은 류는 ContentTemplate에
DataTemplate을 적용할 수 있습니다.

그럼 버튼에 DataTemplate을 적용해 보겠습니다. 
 

버튼에 DataTemplate을
<StackPanel>
     <Ellipse>
     <TextBlock>
식으로 표현하였습니다. 결과는 아래와 같구요..
참고적으로 <TextBlock Text="{Binding }" 로 바인딩을 시키게 되면 컨트롤의 Content값과 바인딩이 됩니다.

잘 보시면 아시겠지만..컨트롤의 컨텐츠가 바뀌고 있죠??

이전 시간의 ControlTemplate과 비교해 보세요..

엄연히 다르죠??^^
ControlTemplate은 컨트롤의 컨텐츠가 아닌 컨트롤의 외관을 꾸며주고 있으며
DataTemplate은 컨트롤의 컨텐츠 부분을 꾸며주고 있습니다.!!

요약하자면 DataTemplate은 컨텐츠(데이터)가 어찌 보여줄지 꾸며주는 것이라고 생각하시면 됩니다.

해당 Template에 대한 자세한 강좌를 boxmile님께서 해주셨기때문에 이쯤에서 마치겠습니다.
(http://cafe.naver.com/mssilverlight/3712) 참조 하세요~^^

다음으로 ItemsPanelTemplate을 알아보도록 하겠습니다.
ItemsPanelTemplate은 ComboBox, ListBox와 같은 item류의 컨트롤의 item의 레이아웃을 꾸며주는 Template입니다.

일반적으로 ListBox를 다음과 같이 xaml로 표현하면..


 결과는 아래와 같구요~


그럼 ListBox에 ItemsPanelTemplate을 적용해 보겠습니다.


빨간 사각형 안을 보시면 Item의 레이아웃을 StackPanel로 지정해 주었으며, Orientation은 수평으로 주었습니다.
그럼 결과가 어찌 나올까요??결과를 보시죠..짜잔!!


세로로 배치되던 item들이 수평으로 배치되어있네요..^^

자세히 설명을 했는지 모르겠습니다. 감기약을 먹어서인지 졸립고 몸상태가 안좋아서 다소 어색하고 틀린 부분이
있더라도 양해 부탁드립니다.

그럼 행복한 금요일밤 되세요.

감사합니다. 즐은광~