지난 글에서는 MergedResourceDictionary를 이용해 Resource를 분산시키는 방법을 알아봤습니다. 이번에는 Style 간의 상속 기능을 제공하는 BasedOn에 대해서 알아보겠습니다.
들어가기에 앞서..
Silverlight 2에서 비슷한 Style을 가진 버튼을 2개 생성할 경우를 생각해보겠습니다. 이런 경우 분리된 Style을 2개 선언해야 하며 2개의 Style에 중복된 부분이 많다면 비효율적일 것입니다. 이를 해결하기 위해 Silverlight 3에서는 Style을 상속해서 사용할 수 있는 BasedOn 기능을 제공합니다.
예제 프로젝트 다운로드
BasedOn.zip공통 Style 정의
이번 글의 이해를 돕기 위해 2가지 스타일의 버튼을 만들겠습니다.
첫 번째 버튼은 글씨 크기가 15이고, 글씨 색은 파란색입니다.
두 번째 버튼은 글씨 크기가 15이고, 글씨 색은 빨간색입니다.
두 버튼의 공통된 점은 글씨 크기가 15이라는 점입니다. 그럼 두 버튼의 공통 부분을 추출해 하나의 Style을 정의하겠습니다.
<화면 1>은 글씨 크기가 15인 Style을 정의한 XAML 코드 입니다. TargetType을 Button으로 함으로써 현재 Style이 Button을 위한 Style임을 알려줍니다. 그리고 다른 곳에서 이 Style을 접근하기 위해 x:Key를 CommonStyle로 할당했습니다. 그리고 버튼의 글씨 크기를 나타내는 FontSize를 15로 변경했습니다.
이제 2개의 버튼에서 사용할 공통 부분을 추출해서 하나의 Style로 정의했습니다. 다음으로 BasedOn을 사용해 Style을 상속 받는 방법을 알아보겠습니다.
| CommonStyle의 TargetType을 Button으로 하지 않고 Control로 변경하면 Button이 아닌 TextBlock, ListBox 등에서도 CommonStyle을 상속받아 사용할 수 있습니다. |
BasedOn 사용하기
먼저 첫 번째 버튼을 위한 스타일을 정의 하겠습니다.
<화면 2>
<화면 2>는 첫 번째 버튼을 위한 스타일을 나타냅니다. TargetType은 Button을 그리고 x:Key 값을 BlueButtonStyle을 주었습니다. 그리고 BasedOn에 앞서 정의한 CommonStyle을 주었습니다. 그리고 글씨 색을 나타내는 Foreground를 Blue로 변경했습니다.
BlueButtonStyle안에서 FontSize를 직접 정의한 부분은 없지만 BasedOn을 이용해 CommonStyle을 상속받음으로써 BlueButtonStyle은 FontSize에 15라는 값을 가지게 됩니다.
그럼 이어서 두 번째 버튼을 위한 스타일을 정의 하겠습니다.
<화면 3>는 두 번째 버튼을 위한 스타일을 나타냅니다. 의미는 앞서 정의한 BlueButtonStyle과 비슷하며 글씨 색을 나타내는 Foreground를 Red로 변경하였습니다. 그리고 역시 BasedOn에 CommonStyle을 줌으로써 FontSize 15를 상속 받았습니다.
Style 적용, 결과 확인
<화면 4>는 2개의 다른 버튼에 BlueButtonStyle과 RedButtonStyle을 적용한 XAML 코드입니다.
<화면 5>
<화면 5>는 결과 화면으로 각 버튼에 다른 스타일이 적용된 것을 보여줍니다. 두 개의 버튼은 FontSize 15를 가지며 각각 빨간색과 파란색으로 출력되는 것을 확인할 수 있습니다.
마치며..
간단하게 BasedOn 기능을 소개하였습니다. BasedOn 기능을 이용하면 XAML의 크기를 줄일 수 있고 차후에 재사용을 고려해 Style을 정의할 수 있습니다. Resource 1부에서 봤던 MergedResourceDictionary 기능과 2부에서 알아본 BasedOn 기능은 새로운 화면 효과를 보여주는 기능은 아니지만 Resource의 재사용과 효율성 증대 측면에서 의미가 있습니다.
[출처] 실버라이트 네이버 카페
