실버라이트에서 커스텀 컨트롤을 만들 때 각 커스텀 컨트롤들의 기본 스타일은 반드시 /themes/generic.xaml 파일에서  ResourceDictionary로 등록해야 했죠. 때문에 라이브러리가 커지다보면 수많은 기본 스타일들이 하나의 파일에 등록이 되어 있어서 찾아보기가 굉장히 힘들었죠.

과연 마이크로소프트의 개발자들은 이런 문제를 어떻게 해결하고 있는지 궁금했었는데요, Jeff Wilcox의 블로그에서 그에 대한 답을 내놓았네요.

아니나다를까 마이크로소프트의 내부 개발자들은 저런 문제를 쉽게 해결하기 위한 툴들을 만들어쓰고 있네요. 바로 기본 스타일들을 정의하는 Xaml들을 자유롭게 배치하고 대신 해당 xaml의 Build Action을 DefaultStyle이라는 키워드로 선택하기만 하면 빌드시 /themes/generic.xaml에 자동으로 통합을 해주는 MSBuild 툴을 만들어 쓰고 있다고 하는군요.

간단하게 말하자면 MSBuild 프레임워크에 포함된 Task라는 항목이 있는데, 이게 어떤 액션이 일어날 때 처리할 일을 정의하는 넘이죠. 그래서 빌드할 때 프로젝트에 포함된 아이템 중에서 DefaultStyle이라는 키워드의 Build Action이 붙은 모든 아이템들을 가져와서 처리한 후 /themes/generic.xaml에 덮어쓰는거죠. 여기에서 Build Action에 원하는 키워드를 추가하는 방법이 가장 중요한 요소인데요, VSProject를 구성하는 엘리먼트 중에 숨겨진 요소가 있다는군요. 참 Win32부터 그런 것들이 많았었죠 –_-;;

자세한 내용은 Jeff Wilcox의 포스팅에 잘 소개되어 있으니 소스 설명은 하지 않겠고요, 단순히 해당 내용을 구현한 결과물을 소개할께요.

다운 받은 파일의 압축을 풀면 세 개의 파일이 나오는데요, 각각 정해진 위치로 폴더를 만들고 복사하기만 하면 돼요.

  • Engineering.Build.dll
    -> C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Extra
  • SilverlightAppWithMultipleResourceDictionary.zip
    -> %내 문서%\Visual Studio 2008\Templates\ProjectTemplates\Visual C#\Silverlight
  • SilverlightDefaultStyleItem.zip
    -> %내 문서%\Visual Studio 2008\Templates\ItemTemplates\Visual C#\Silverlight

zip 파일 들은 내 문서에 있는 Visual Studio 2008 폴더를 찾아서 넣으면 돼요.

자 이제 비주얼 스튜디오를 열고 프로젝트를 하나 만들어 볼까요?

image

Visual C#/Silverlight 타입에 보면 My Templates 그룹 아래에 Silverlight Application with Multiple…이 보이네요. 이 템플릿으로 새 프로젝트를 만들면,

image

보안 경고가 나오는데요, 이건 사용자 정의 템플릿을 사용할 때 항상 뜨는 걸로 아래에 있는 Load project normally를 선택해야 제대로 진행돼요.

image

프로젝트를 만들면 기본 실버라이트 프로젝트와 크게 다르지 않고 다만 /themes/generic.xaml이 기본으로 포함되어 있는 것을 볼 수 있죠.

다음으로 새 DefaultStyle 정의를 위한 xaml 파일을 만들어보죠.

image

프로젝트에 새 아이템을 추가하면…

image

위와 같이 카테고리에서 Visual C#/Silverlight를 선택하면 My Templates 그룹Silverlight Default Style Item이 있죠? 클릭하고 이름을 적당히 넣은 후 추가 버튼을 클릭하면 다음과 같이 보안 경고 메시지가 나와요. 저 믿죠? ㅋㅋ Trust를 클릭하여 커스텀 아이템을 추가하도록 허용합니다.

image

xaml 파일이 프로젝트에 추가되는데 여기에서 Build Action은 수동으로 DefaultStyle을 선택해야 하고 Custom Tool 설정은 삭제하세요.

image

네, 그리고 xaml의 내용에는 기본 스타일을 바로 작성할 수 있도록 ResourceDictionary를 추가해뒀어요. Enjoy it! :)

마지막으로 테스트를 해봐야죠? 새로 생성한 MyControlStyle.xaml에 다음과 같이 간략하게 코드를 작성해보죠.

image

이제 빌드를 하면?

image

/themes/generic.xaml이 외부에서 변경되었다는 메시지가 나오는데요 이건 어쩔 수가 없어요. 아쉽지만 매번 DefaultStyle로 설정한 xaml이 빌드될 때마다 Yes를 눌러줘야죠.

최종 결과물은 위와 같이 별도로 작성한 Style이 generic.xaml에 자동으로 복사된 모습. 자 이제 한 곳에 보기 싫게 몰아넣지 말고 각 커스텀 컨트롤 별로 연관성 있게 파일을 관리할 수 있어요.

단점이라면 하나의 xaml이라도 DefaultStyle을 사용한다면 generic.xaml이 자동으로 생성되기 때문에 모든 DefaultStyle을 별도의 파일로 관리해야 한다는 점이죠.

그렇지만 저는 각 커스텀 컨트롤의 스타일을 별도의 파일로 관리하고 공통으로 사용할 스타일이나 리소스 또한 common.xaml 등으로 따로 관리하는 것이 좋다고 봐요.

여튼 라이브러리나 커스텀 컨트롤을 많이 사용하는 프로젝트에서는 굉장히 유연성있는 스타일 관리를 할 수 있는 좋은 방법이죠. 피드백 바랍니다. :D

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo


티스토리 툴바