아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 네 번째인 Using Style Elements to Better Encapsulate Look and Feel의 번역본 입니다.  

실버라이트 튜토리얼 파트 4: 보다 나은 캡슐화 된 룩앤필(Look and Feel)을 위한 Style Elements 사용하기

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

보다 나은 캡슐화 된 룩앤필(Look and Feel)을 위한 Style Elements 사용하기

WPF와 실버라이트는 컨트롤의 속성을 재사용 가능한 자원으로 캡슐화 시킬 수 있는 스타일 메커니즘을 지원합니다. 우리는 페이지로부터 분리된 파일에 이러한 스타일 선언을 저장할 수 있고 프로그램에서 여러 페이지나 컨트롤에 걸쳐 재사용 할 수 있습니다. 이것은 기본 커스터마이징 시나리오를 수행할 때 HTML에 CSS를 사용하는 것과 개념적으로 유사합니다.

노트: Color, Font, Size, Margins와 같은 기본 속성을 설정하는 것 외에도 WPF와 실버라이트에서의 스타일은 대단히 풍부한 스킨화와 컨트롤 구조의 개선을 가능케 만드는 컨트롤 템플릿을 정의하고 재사용하는데 사용 가능합니다. 그리고 오늘날 CSS와 HTML이 하지 못하는 커스터마이징 시나리오를 지원합니다. 이것에 대해서는 이 튜토리얼 시리즈의 파트 7에서 다루겠습니다.

Digg 클라이언트 프로그램을 위해 프로젝트의 App.xaml 파일 속에 스타일 선언을 정의하겠습니다. 이것은 프로그램 내의 모든 페이지와 컨트롤에서 재사용 가능하게 만듭니다.

Digg 페이지의 <Border> 컨트롤과 <TextBlock> 컨트롤을 위한 스타일 캡슐화를 시작해보겠습니다.

우리는 위에서 미리 인라인으로 선언해 놓은 <Border>와 <TextBlock> 설정을 캡슐화 하는 스타일 요소 2개를 아래와 같이 App.xaml 파일 속에 만들 수 있습니다.

어떻게 각 스타일에 유일한 키값을 부여하고 있는지 보세요. 그런 다음 <Border>와 <TextBlock> 컨트롤이 이 키를 가지고 스타일을 참조하도록 수정할 수 있습니다. 우리는 XAML의 "markup extensions" 기능을 사용하여 그렇게 만들 수 있습니다. Markup Extensions는 우리가 설정하려는 것에 대한 리터럴 값이 없을 때 사용됩니다. 이 기능을 사용하는 다른 예는 데이터 바인딩 표현법이 있습니다.

게다가 아래와 같이 Page.xaml 파일에 있는 다른 컨트롤들까지 수정 했습니다.



이러한 방법으로 스타일을 캡슐화 하는 것은 개발자가 응용프로그램의 기본 기능을 만드는데 좀더 집중하게 만들고 다른 컨트롤이나 페이지에서 스타일을 재사용 가능하게 합니다.

노트: 베타1에서 알아야 할 한가지는 우리가 스타일 이름과 속성 선언에 오타가 있다는 에러 메시지가 분명하지 않다는 것입니다. 예외를 발생 시키지만 어떤 것이 틀렸는지 말해주지는 않습니다. 이것은 베타2에서 개선될 것입니다. 스타일이 로딩될 때 발생하는 에러 메시지를 보는 동안에는 글자들을 잘 살펴보셔야 합니다.

다음 단계

이제 우리는 스타일 참조를 통해서 우리의 Page.xaml 파일의 마크업을 정리했습니다. 다음단계로 가서 스토리 데이터의 모양을 좀 더 커스터마이징 해 봅시다.

다음 튜토리얼 Using the ListBox and Databinding to Display List Data (한글 번역본 읽기)로 이동하겠습니다.

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