본문 바로가기

Silverlight

Silverlight3 - Resource(1)


이번 글에서는 Silverlight 3에서 강화된 리소스에 기능에 대해서 알아보겠습니다.


들어가기에 앞서..
Silverlight 2에 비해서 3에 강화된 리소스 기능은 크게 2가지로 나눌 수 있습니다.

첫 번째로 MergedResourceDictionary 기능입니다.  Silverlight 2에서는 모든 디자인(Style)을 App.xaml이나 theme/generic.xaml 파일에 모두 몰아서 넣어놔야만 Style을 공유할 수 있었습니다. 이는 App.xaml과 theme/generic.xaml 파일의 크기를 크게 만드는 비효율적인 방법이었습니다. Silverlight 3에서는 MergedResourceDictionary 기능이 추가되어 이러한 단점을 극복할 수 있게 되었습니다. 마치 웹 UI 프로그래밍 중 CSS가 <link rel=…/>을 사용해 css 파일을 분리시킬 수 있는 것처럼 MergedResourceDictionary 기능을 사용하면 디자인 파일을 분리할 수 있고, 여러 곳에서 링크를 걸어 공유할 수 있습니다.

두 번째로 BasedOnStyle 기능입니다. Silverlight 3에서는 Style의 상속을 지원합니다. 2에서는 비슷한 버튼을 2개 만든다면 2개의 Style이 공통된 부분을 가지고 있어도 모두다 중복해서 사용했어야 합니다. 하지만 Silverlight 3에서는 이러한 단점을 극복하고자 Style의 상속을 지원합니다. 즉, 2개 버튼의 공통된 디자인을 분리된 Style로 저장하고 이를 상속받아서 약간의 변경만 가하면 되는 것입니다.

Resource는 1, 2부로 나뉘어 있습니다. 1부에서는 MergedResourceDictionary 기능을 알아보고 2부에서는 BasedOnStyle 기능을 알아보겠습니다.

예제 프로젝트 다운로드



Shared Resource 파일 생성
MergedResourceDictionary를 사용하기 위해서는 먼저 공유할 Resource 파일을 생성해야 합니다.

 

< 화면 1 >

< 화면 1 >은 Shared Resource의 내용을 저장할 파일을 하나 생성했습니다. 여기서는 이름을 “Resources.xaml”로 주었습니다. 이름은 원하시는 대로 변경할 수 있습니다. 그리고 하단에 보시면 Build Action 이라는옵션이 있습니다. 이 부분을 Content로 변경합니다. ( 이 부분을 Content 또는 Resource로 변경함에 따라 Shared Resource 파일을 접근하는 URL이 달라집니다. 여기서는 Content로 설정하고 설명하겠습니다. )

이제 파일의 내용을 작성하도록 하겠습니다.

 

< 화면 2 >


< 화면 2 >는 공유해서 사용할 Shared Resource 파일의 내용 입니다. 최상위 엘리먼트의 이름은 ResourceDictionary 입니다. 그리고 그 자식으로 Style 엘리먼트가 있으며 이곳에 공유할 Style 들을 작성하시면 됩니다. 여기서는 TextBlock에 사용할 Style을 작성했습니다. 이 스타일은 폰트 사이즈를 18로 정하며 글씨 색을 파란색으로 지정했습니다.


Shared Resource 적용하기
이제 앞서 작성한 Shared Resource 파일을 이용 해보겠습니다. 지금부터는 Main.xaml 파일에서 작업하겠습니다.
Shared Resource 파일을 사용하기 위해 다음과 같이 ResourceDictionary 태그를 이용해야 합니다.

 

< 화면 3 >

< 화면 3 >은 앞서 작성한 Shared Resource 파일을 xaml에 포함시킨 예제 입니다. Grid의 ResourceDictionary 프로퍼티 안에 Source를 앞서 작성한 “Resource.xaml” 할당해준 것을 확인할 수 있습니다.

그리고 하단에 있는 TextBlock의 Style을 TitleStyle(<화면 1>에서 작성한 Style)로 변경했습니다.

 

< 화면 4 >

 

< 화면 4 >는 예제 프로그램을 실행한 화면 입니다. 글자 색이 파란색으로 변경되었으며 글자 크기 또한 Shared Resource에서 설정한 크기로 확대된 것을 확인할 수 있습니다.



마치며..
간단하게 MergedResourceDictionary를 살펴봤습니다. 프로그래머보다는 디자이너 분들이 유용하게 사용할 수 있는 방법이며 Style을 여러 개의 파일로 분산시킴으로써 네트워크 부하를 줄이는 효과도 느낄 수 있다고 생각합니다.
다음 글에서는 Style을 상속해서 사용할 수 있는 BasedOn 기능에 대해서 알아보겠습니다.


[출처] 실버라이트 네이버 카페