Silverlight 3 에 새롭게 추가 된 ChildWindow 를 쓰다보면, X 버튼을 없애고 싶을 때가 생깁니다. X 버튼이란 ChildWindow 최우측 상단에 있는 컨트롤로, X버튼을 클릭 시 ChildWindow 가 닫히게 되죠. 이런 경우엔 사용자의 입력 (OK or Cancel)에 대한 확인을 할 수 없게 됩니다.
그래서 X 버튼을 없애는 방법을 구현 해 보겠습니다.
X 버튼을 없애는 방법은 ChildWindow 가 컨트롤이라는 것을 이용하게 되는 것이죠. 컨트롤이기 때문에 ControlTemplate 를 재정의 해서 X 버튼의 Visible을 Collapsed 로 변경하거나, 아예 삭제하시면 됩니다.
(예전에 포스팅 했던 ControlTemplate 정의하기를 보시면 조금이나마 도움이 되실거라 생각합니다. ^^;)
우선, ChildWindow를 Blend 3 Preview에서 엽니다.
그 다음, Objects and Timeline 에서 Objects의 최 상위인 ChildWindow를 선택 하신 후, ControlTemplate 를 수정할 수 있도록 Edit Control Parts (Template)를 선택하여, Template Style을 하나 생성합니다.
이렇게 Template Style을 생성하게 되면, Objects and Timeline 에 ChildWindow 컨트롤의 Template 구조가 나오죠. 여기서 X 버튼 즉, CloseButton 을 찾아서 Visible 속성을 Collapsed로 변경하시거나, 삭제 해 주시면 됩니다.
이렇게 작업하시고 저장하시면, X 버튼이 없는 ChildWindow 가 만들어지게 됩니다. :D
코드에서 Button.Template 속성에 ControlTemplate를 지정하면 Button의 모양이 ControlTemplate 속성에 정의 된 Ellipse 모양으로 변경 된 것을 확인 할 수 있습니다.
Content 표시
그런데, 위 코드와 같이 ControlTemplate을 사용자가 재 정의하게 되는 경우 Button의 Content 속성에 정의 된 "Changed Shape"가 표시 되지 않습니다. 이것은, Content property를 보여주던 기존의 방식이 동작하지 않기 때문입니다.
Content property 를 보여주기 위해서 ContentPresenter와 ItemsPresenter 두 가지 엘리먼트를 제공합니다.
Control의 Content 위치를 지정하기 위해서는 ContentPresenter를 사용하고, ItemsControl에서 Content 위치를 지정하기 위해서는 ItemsPresenter를 사용해야 합니다.
ControlTemplate 에서 Control의 Property 값 Binding
ControlTemplate에서 Border의 Height와 Width property를 직접 할당 하였는데, 이런 경우 Button의 Height나 Width가 변경 시에도 Border의 Height와 Width는 변경 되지 않기 때문에, 버튼이 작아지면 Border가 표시 되는 부분이 잘리거나, 버튼이 작아지면 Border는 버튼의 크기와 상관없이 그대로 존재하게 됩니다.
이런 경우를 고려하여, Button 즉, Control의 Property를 ControlTemplate에서 Binding 한다면 Control의 Property의 변화에 고려된 ControlTemplate를 구성 할 수 있습니다.
Control의 Property를 ControlTemlplate에 Binding 하는 방법은
Height = {TemplateBinding Height}"
TemplateBinding 키워드를 사용하여 Binding 될 Control의 Property를 지정하면 됩니다.
Button의 Height를 30 으로 변경시
고정 된 Border의 Width, Height를 사용 한 경우
Control(Button)의 Property를 TemplateBinding 하여 사용 한 경우
ItemsControl의 Item 정렬하기
ItemsControl의 Items 를 정렬하기 위해서는 ItemsPanel property에 ItemsPanelTemplate를 지정하면, ItemsPanelTemplate에 정의 된 Layout Panel 방식으로 Items가 정렬 됩니다. (기본적으로 다른 Layout Panel 들은 Item 배치를 위한 추가적인 코드를 필요로 하기 때문에 StackPanel을 많이 사용합니다.)
