아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 일곱 번째인 Using Control Templates to Customize a Control's Look and Feel의 번역본 입니다.  본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다.

실버라이트 튜토리얼 파트7: 컨트롤 템플릿을 사용하여 룩앤필(Look and Feel) 변경하기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 일곱 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

여러분은 Digg 클라이언트 샘플 프로그램의 완성된 소스코드를 여기에서 다운로드 받을 수 있습니다. 저의 실버라이트 2 레퍼런스 페이지를 북마크하면 더 많은 실버라이트 관려 글과 컨텐츠를 볼 수 있습니다.

컨트롤의 룩앤필 커스터마이징

WPF와 실버라이트 프로그래밍 모델의 가장 강력한 기능은 컨트롤의 룩앤필을 완벽하게 커스터마이징 할 수 있다는 것입니다. 개발자와 디자이너는 미묘하고 극적인 방법으로 컨트롤의 UI를 만들 수 있고 대단히 유연한 방법으로 원하는 사용자 경험을 완벽하게 만들 수 있습니다.

이 튜토리얼에서 컨트롤을 커스터마이징 하는 몇 가지 방법을 살펴보고 그 기술을 이용해서 Digg 클라이언트의 UI를 마무리 하겠습니다.

컨트롤의 내용을 커스터마이징 하기

튜토리얼 파트1에서 페이지에 단순한 버튼 컨트롤을 추가했었고 어떻게 버튼의 텍스트를 "Push Me!"로 변경하는지 살펴보았습니다. 그리고 "Click" 이벤트 핸들러를 만들어 클릭했을 때의 처리를 구현했습니다.



위의 코드는 버튼을 아래처럼 만들었습니다.



앞으로 버튼 컨트롤이 여러분을 놀래 킬 것 중에 하나는 "Content" 속성이 단순히 "Push Me!"라는 텍스트가 아니라는 것입니다. 사실 "Content"속성은 우리가 원하는 어떤 모양이나 컨트롤로 설정할 수 있습니다.

예를 들어, <Image>와 <TextBlock>을 포함한 StackPanel을 포함시킬 수 있습니다.




위의 코드가 실행되면 아래와 같이 보일 것입니다. 여전히 클릭하거나 기존처럼 클릭 이벤트 핸들러를 연결하는 버튼으로써 기능을 가지고 있는 것을 보세요.



또 다른 방법은 버튼 속에 벡터 그래픽을 이용하여 아래의 Ellipse 컨트롤과 같은 Shape 컨트롤을 사용할 수 있습니다.



위의 코드가 어떻게 RadialGradientBrush로 채운 Ellipse 컨트롤을 사용하여 반사되는 멋진 효과를 넣었는지 살펴보세요.



심지어 버튼 속에 Celendar 컨트롤 같은 인터렉션 가능한 컨트롤 포함시켜 이상한 모양을 만들 수 도 있습니다.



위의 Calendar는 모든 고유 기능을 사용가능 합니다. 이 의미는 사용자가 달력에서 날짜를 찍거나 달을 앞뒤로 이동시킬 수 있고 달력에 포함된 버튼의 "Click"이벤트 핸들러를 호출 할 수 있다는 얘기입니다. (노트: 이것이 좋은 UX인지는 모르겠습니다만 무엇을 하던 할 수 있다는 유연성을 보여줍니다.)



위에 소개한 타입의 컨트롤 커스터마이징은 단지 버튼 컨트롤에서만 가능한 것이 아니고 ContentControl 베이스 클래스를 상속받는 모든 컨트롤에서 가능합니다.

컨트롤 템플릿을 이용한 컨트롤 커스터마이징

실버라이트와 WPF에서 사용한 컨트롤 모델은 컨트롤 속의 내용을 커스터마이징 가능한 것보다 더 많은 것을 할 수 있습니다. 컨트롤의 인터렉션 기능들을 유지하면서 컨트롤의 visual tree 전체를 원하는 만큼 변경할 수 있습니다.

예를 들어, 버튼의 기본적인 모양인 사각형이 싫고 아래와 같이 원모양을 원한다면



App.xaml파일에 "RoundButton" 스타일을 정의함으로써 구현 가능합니다. 버튼의 "Template"속성을 오버라이드하고 버튼의 기본 사각형 모양을 Ellipse와 TextBlock이 들어있는 모양으로 변경하는 ControlTemplate을 제공하면 됩니다.



그런 후에 이 "RoundButton" 모양의 스타일을 버튼 컨트롤에 참조시킵니다.



컨트롤 템플릿에 컨텐츠 통합하기

위의 "RoundButton"컨트롤 템플릿에서 눈여겨봐야 할 것은 버튼의 크기와 내용이 고정되어 있다는 것입니다.

좋은 소식은 WPF와 실버라이트는 이러한 값들을 설정 가능하게 만들어 준다는 것입니다. 이를 위해서 컨트롤의 속성으로 바인딩 할 수 있도록 컨트롤 템플릿 안에서 {TemplateBinding ControlProperty} 마크업 확장 구문(markup extension syntax)을 사용합니다. 이것은 다른 개발자가 컨트롤을 설정할 때 속성을 사용하듯이 컨트롤 템플릿을 사용할 수 있게 합니다.



내용을 표시하기 위해서 <TextBlock>을 사용하는 대신 <ContentPresenter>컨트롤을 사용한 것을 눈 여겨 보세요. 이것은 단지 텍스트 문자열만을 표시하는 것이 아니라 우리가 앞에서 보았듯이 다른 컨텐츠도 표시 가능하게 만들어 줍니다.

위의 스타일을 사용하여 서로 다른 내용과 속성을 설정한 3가지 버튼을 만들어 보겠습니다.



위의 버튼들은 아래처럼 표시될 것입니다. 물론 Calendar 컨트롤은 여전히 달을 이동할 수 있고 날짜를 선택할 수 있습니다.



한걸음 더 나아가자면 ControlTemplate에 "hover", "focus", "pushed" 같은 버튼의 상태를 다루는 스토리보드 애니메이션을 추가 할 수도 있습니다. 이런 능력은 HTML에서 할 수 없는 정말 품위 있는 사용자 인터렉션 시나리오를 만들 수 있게 합니다.

개발자들은 이러한 모든 스타일이나 컨트롤의 인터렉션 커스터마이징에 대해서 무감각한 상태로 응용프로그램을 만들 수 있습니다. 그들은 평소와 같이 컨트롤의 이벤트를 핸들링하고 컨트롤의 오브젝트 모델을 다루고 스타일과 템플릿을 사용하며 룩앤필의 커스터마이징과 예쁘게 꾸미기는 디자이너에게 넘길 수 있습니다.

Digg 클라이언트를 세련되게 꾸미기

이제 우리는 컨트롤 템플릿이 어떻게 작동하는지 기본적인 내용을 살펴보았습니다. 이것을 이용해서 Digg 클라이언트 프로그램의 UI를 좀더 세련되게 만들어 보겠습니다.

여기에 우리가 분명히 바꿀 필요가 있는 한 가지가 있습니다. 그것은 바로 사용자 정의 컨트롤에 있는 "Close" 버튼입니다.



좋은 소식은 이 작업은 개발자 또는 함께 일하는 디자이너들 모두에게 쉽다는 것입니다. App.xaml파일에 "CloseButton"스타일을 정의하기 위해서 ControlTemplate을 추가하고 매력적인 닫기 버튼을 만들기 위해 약간의 벡터 그래픽을 추가하겠습니다. (노트: 물론 저보다 유능한 디자이너는 좀 더 멋지게 보이도록 마우스를 올릴 때의 애니메이션을 추가할 수 있겠죠.)



프로그램을 다시 실행시키면 버튼이 아래처럼 보일 것입니다.



제가 생각할 때 좀 더 세련되게 만들어야 하는 두 번째는 리스트박스의 테두리 UI 입니다. 좀 더 가까이 보면 베타1의 리스트박스는 안쪽에 테두리가 기본적으로 있습니다. (노트: 우리는 여전히 기본 스킨을 마무리 중에 있고 마지막 릴리즈 전에 아마도 변경이 될 것입니다.)



우리는 이 테두리를 제거하고 컨트롤 템플릿을 커스터마이징하여 리스트박스에 단순한 테두리를 만들어 보겠습니다. 아래는 그렇게 하기 위하여 템플릿을 이용하여 만든 리스트박스 템플릿입니다.



이제 리스트박스에서 모든 테두리를 제거 했습니다. 어떤 컨텐츠에도 스크롤이 가능하게 해주는 <ScrollViewer>을 사용했습니다. 그리고 리스트박스 안에 실제 아이템을 랜더링하는 <ItemsPresenter/> 컨트롤 포함시켰습니다. (파트4에서 이런 아이템들을 표현하기 위해서 <DataTemplate>을 사용했었습니다.)

아래 그림은 방금 우리가 만든 좀 더 단순한 모양의 리스트 입니다.



우리는 룩앤필을 변경하기 위해서 코드를 변경하지도 않았고 컨트롤의 XAML 마크업도 변경하지 않았다는 것이 멋지네요. 이러한 코드와 디자인의 분리는 실버라이트와 WPF 응용프로그램을 만들 때 개발자와 디자이너 간의 훌륭한 협업을 가능하게 합니다. Expression Blend와 다른 Expression Studio의 제품들은 한 단계 높은 컨트롤의 디자인 능력을 가지고 있고 커스터마이징이 쉽도록 풍부한 디자이너 툴을 제공합니다.

다음 단계

이제 실버라이트를 이용한 Digg 클라이언트 구현은 끝이 났습니다.

마지막 단계는 Digg 클라이언트의 데스크탑 버전을 구현할 것입니다. 좋은 소식은 실버라이트가 WPF와 .NET 프레임워크의 일부분이기 때문에 개념, 코드, 컨텐츠를 테스크탑 버전으로 이동시키는 것이 어렵지 않다는 것입니다.

다음 단계 Creating a Digg Desktop Application Using WPF (한글 번역본)로 이동하겠습니다.

Published Friday, February 22, 2008 5:48 AM by ScottGu


 


WRITTEN BY
ONESTONE

트랙백  1 , 댓글  0개가 달렸습니다.
secret