안녕하세요. 클라인스입니다.
오랜만에 강좌를 올리네요..ㅎ 동영상으로 올리고 싶었는데..아직 감기가 낫지 않아서 힘드네요..
감기가 다 낫게 되면 이전에 만들었던 대부분의 강좌를 동영상강좌로 만들려고 생각중입니다. ^^
오늘은 실버라이트에서 Template이란 녀석에 대해서 알아보도록 하겠습니다.
Template을 딱히 뭐라고 정의하기는 어렵지만.. 컨트롤에 기능상의 변화는 없으면서 외형을 바꾸는 방법?이라고 정의할 수 있을 것 같습니다.
실버라이트에 Style이란 녀석도 있는데 해당 녀석은 해당 컨트롤의 프로퍼티를 변경하여 외형을 바꾸는 것이므로 Template과는
엄연히 다릅니다.
그럼 Template에 대해서 좀더 자세히 알아보도록 하겠습니다.(혹시 저의 부족한 실력으로 틀린 부분이 있다면 과감히 지적해 주세요^^)
실버라이트에서 Template은 ControlTemplate, DataTemplate, ItemsPanelTemplate 등이 있습니다.
그러면 하나하나 예를 들어 알아보도록 하겠습니다.
ControlTemplate은 컨트롤의 외형을 표현하는 Template이라고 할 수 있습니다.
그럼 ListBox의 기본 스타일 및 ControlTemplate을 살펴보겠습니다.
위쪽에는 ListBox에 대한 스타일이 정의되어있고 아래졲에는 ListBox에 대한 ControlTemplate이 정의되어 있네요~
Template쪽을 좀더 자세히 살펴보면
<Border>
<ScrollViewer>
<ItemsPresenter>
로 구성되어있습니다. Border, ScrollViewer는 스크롤바의 외관을 나타내고 있으며
ItemsPresenter는 ListBox에 포함되는 Item(Contents)들을 나타나게 됩니다.
확인을 해보기 위해서 ItemsPresenter를 삭제해 보도록 하겠습니다.
(ItemsPresenter 삭제 전) (ItemsPresenter 삭제 후)
총 3개의 Item들이 사라졌죠?^^
그러나 ListBox, ComboBox와 같이 컨텐츠로 Items을 갖지 않는 버튼류들은 ItemsPresenter가 아닌
ContentPresenter로 표현 되어있습니다.
ContentPresenter는 컨트롤의 Content 속성에 넣어주는 엘리먼트가 표현되게 됩니다. (밑줄짝!!)
그럼 ControlTemplate을 변경해 보도록 하겠습니다.
단순히 ScrollViewer의 Background를 White에서 Black로 바꿨고 Foreground에 White를 주었습니다.
원래의 소스 Background="{TemplateBinding Background}"는 속성에서 지정해준 Background 속성값을 사용하겠다는
뜻이니 참고하세요~
그럼 결과를 보시죠!!
(기본 ListBox) (ControlTemplate 변경 ListBox)
Listbox Control의 외관이 달라진것을 보실수가 있죠??
위 예로는 ControlTemplate에 감?이 잘 오시지 않을 것 같아서 하나 더 준비했습니다.!!
그럼 한가지더 예제를 알아보도록 하겠습니다.
Button에 대해서 ControlTemplate을 줘보도록 하죠..
Button에 대한 xaml코드 및 실행 결과입니다.
쉽게 볼 수 있는 평범한 버튼입니다. 해당 버튼에 ControlTemplate을 적용해 보겠습니다.
예쁜 Ellipse를 그려서 버튼의 외관을 표현해보았습니다. ㅎ
앗..그런데 왜 "안녕하세요"라는 글씨가 보이지 않는 것일까요??
어디간거야..내 "안녕하세요.."
제가 위에서 "밑줄쫙"이라고 말씀드렸던거 기억하시나요??
ContentPresenter는 컨트롤의 Content 속성에 넣어주는 엘리먼트가 표현되게 됩니다. (밑줄짝!!)
예 그렇습니다. 저희가 새로 정의해준 ControlTemplate에 ContentPresenter가 빠져서 그렇습니다.!!
그럼 넣어줘보죠~
이전에 정의한 ControlTemplate에 ContentPresenter를 추가했습니다.
결과는 어찌 되었을까요??살펴보겠습니다.
저희가 Button의 Content속성에 넣어주었던 "안녕하세요"가 나오고 있습니다. 와우 감격~ㅎ
말주변이 없어서 설명을 잘 하였는지 모르겠습니다.
다음 시간에는 DataTemplate과 ItemPanelTemplate에 대해서 알아보도록 하겠습니다.
수고하세요.
감사합니다. 즐은광~
오랜만에 강좌를 올리네요..ㅎ 동영상으로 올리고 싶었는데..아직 감기가 낫지 않아서 힘드네요..
감기가 다 낫게 되면 이전에 만들었던 대부분의 강좌를 동영상강좌로 만들려고 생각중입니다. ^^
오늘은 실버라이트에서 Template이란 녀석에 대해서 알아보도록 하겠습니다.
Template을 딱히 뭐라고 정의하기는 어렵지만.. 컨트롤에 기능상의 변화는 없으면서 외형을 바꾸는 방법?이라고 정의할 수 있을 것 같습니다.
실버라이트에 Style이란 녀석도 있는데 해당 녀석은 해당 컨트롤의 프로퍼티를 변경하여 외형을 바꾸는 것이므로 Template과는
엄연히 다릅니다.
그럼 Template에 대해서 좀더 자세히 알아보도록 하겠습니다.(혹시 저의 부족한 실력으로 틀린 부분이 있다면 과감히 지적해 주세요^^)
실버라이트에서 Template은 ControlTemplate, DataTemplate, ItemsPanelTemplate 등이 있습니다.
그러면 하나하나 예를 들어 알아보도록 하겠습니다.
ControlTemplate은 컨트롤의 외형을 표현하는 Template이라고 할 수 있습니다.
그럼 ListBox의 기본 스타일 및 ControlTemplate을 살펴보겠습니다.
위쪽에는 ListBox에 대한 스타일이 정의되어있고 아래졲에는 ListBox에 대한 ControlTemplate이 정의되어 있네요~
Template쪽을 좀더 자세히 살펴보면
<Border>
<ScrollViewer>
<ItemsPresenter>
로 구성되어있습니다. Border, ScrollViewer는 스크롤바의 외관을 나타내고 있으며
ItemsPresenter는 ListBox에 포함되는 Item(Contents)들을 나타나게 됩니다.
확인을 해보기 위해서 ItemsPresenter를 삭제해 보도록 하겠습니다.
(ItemsPresenter 삭제 전) (ItemsPresenter 삭제 후)
총 3개의 Item들이 사라졌죠?^^
그러나 ListBox, ComboBox와 같이 컨텐츠로 Items을 갖지 않는 버튼류들은 ItemsPresenter가 아닌
ContentPresenter로 표현 되어있습니다.
ContentPresenter는 컨트롤의 Content 속성에 넣어주는 엘리먼트가 표현되게 됩니다. (밑줄짝!!)
그럼 ControlTemplate을 변경해 보도록 하겠습니다.
단순히 ScrollViewer의 Background를 White에서 Black로 바꿨고 Foreground에 White를 주었습니다.
원래의 소스 Background="{TemplateBinding Background}"는 속성에서 지정해준 Background 속성값을 사용하겠다는
뜻이니 참고하세요~
그럼 결과를 보시죠!!
(기본 ListBox) (ControlTemplate 변경 ListBox)
Listbox Control의 외관이 달라진것을 보실수가 있죠??
위 예로는 ControlTemplate에 감?이 잘 오시지 않을 것 같아서 하나 더 준비했습니다.!!
그럼 한가지더 예제를 알아보도록 하겠습니다.
Button에 대해서 ControlTemplate을 줘보도록 하죠..
Button에 대한 xaml코드 및 실행 결과입니다.
쉽게 볼 수 있는 평범한 버튼입니다. 해당 버튼에 ControlTemplate을 적용해 보겠습니다.
예쁜 Ellipse를 그려서 버튼의 외관을 표현해보았습니다. ㅎ
앗..그런데 왜 "안녕하세요"라는 글씨가 보이지 않는 것일까요??
어디간거야..내 "안녕하세요.."
제가 위에서 "밑줄쫙"이라고 말씀드렸던거 기억하시나요??
ContentPresenter는 컨트롤의 Content 속성에 넣어주는 엘리먼트가 표현되게 됩니다. (밑줄짝!!)
예 그렇습니다. 저희가 새로 정의해준 ControlTemplate에 ContentPresenter가 빠져서 그렇습니다.!!
그럼 넣어줘보죠~
이전에 정의한 ControlTemplate에 ContentPresenter를 추가했습니다.
결과는 어찌 되었을까요??살펴보겠습니다.
저희가 Button의 Content속성에 넣어주었던 "안녕하세요"가 나오고 있습니다. 와우 감격~ㅎ
말주변이 없어서 설명을 잘 하였는지 모르겠습니다.
다음 시간에는 DataTemplate과 ItemPanelTemplate에 대해서 알아보도록 하겠습니다.
수고하세요.
감사합니다. 즐은광~
