WP7 개발 기초 - 하나의 스타일

한참만에 실버라이트로 돌아오는 것 같습니다. 지난 포스팅에서 공유 브러시에 관해서 언급했으므로 이제 이걸 하나의 스타일로 묶는 방법에 대해서 언급해보고자 합니다.

우선 이를 다루기에 앞서서 실버라이트 내에 x:key와 x:Name이라는 개념을 알아야 합니다. 보통 처음에 보이는 xaml파일에는 모두 .cs라는 c#기반의 코드가 숨겨져 있습니다. 그런데 이런 코드에서 xaml상에 위치한 리소스를 불러올 일이 있다면 this.Resources["..."] 라는 식으로 자신이 원하는 리소스를 불러올 수 있습니다. 물론 brush라는 Resources가 필요하다면 코드내에 this.Resource["Brush"]로 적용하면 되겠지요.

그러면 우리가 할일은 앞에서 다룬 공유 브러시(예를 들면 LinearGradientBrush)같은 걸 이런식으로 코드상으로 호출할 수 있게끔 묶어주는것이지요. 그런데 brush는 사용자가 만들어낸 이름이고 LinearGradientBrush는 하나의 자료형이므로 이걸 묶기 위해서는 뭔가를 써야합니다. 이때 쓰는 것이 바로 x:key와 x:Name입니다. 두 개다 똑같은 기능을 하는데
x:Name은 실버라이트 1.0때부터 사용된 방법이라  이걸 쓰는 것을 책에서는 추천하고 있습니다.

사용방법은 간단합니다.
xaml코드 상에 리소스를 다루는 부분에서

 
이런식으로 써준다면 LinearGradientBrush에 관한 자신이 적용하고 싶은 항목을 안에 적습니다.

그러고는
 

라는 식으로 코드내에서 불러오면 txtblk의 배경은 brush라고 이름지어진 LinearGradientBrush를 쓸 수 있게 됩니다.
x:Key를 사용하면 코드에서 불리는게 아니라 그 xaml상에서 불러올 수 있습니다.
이렇게 한다면 코드의 줄은 기존에 일일이 적는 것에 비해서 줄어들게 됩니다.

다만 유의해야 할 점이 몇가지 있습니다. 우선 지금 쓰는 게 Resources 컬렉션인데 이건 위에서 보이는 InitializeComponent()가 실행된 후에 형성되기 때문에 반드시 호출된 밑에 사용해줘야 한다는 겁니다. 그리고 x:Name을 사용하기 위해서는 위에서 brush라고 정의해놨지만 반드시 그 페이지 내에서는 유일해야 한다는 겁니다. 

이제 이 포스팅의 주제인 스타일을 언급합니다.
Style은 Resources내에서 자준 사용되는 것중 하나로 속성으로 사용될 수 있습니다. 대신 여기엔 앞에서 말한 key뿐만아니라 TargetType이라는 것도 필요합니다. (x:Name을 사용한다고는 했지만 책안에서는 Key로 계속 언급되네요. 물론 이안에서는 코드에 대한 이야기를 할게 아니기 때문에 Key로 이야기를 진행하겠습니다.)
 

이렇게 key값에는 자신이 이 스타일을 호출할 때 사용할 이름, TargetType에서는 이 스타일을 적용할 개체를 선택하게 되는 겁니다. 물론 TextBox도 될 수 있고 다양합니다. 다음과 같이 해봅니다.
 

그럼 이렇게 하면 나중에 부를 TextBlock의 키값을 txtblkStyle으로 정하면 따로 속성을 설정할 필요없이 
미리 정해둔 값으로 정해지게 됩니다. 그럼 여기에 지난 시간에 계속 다뤘던 LinearGradientBrush를 적용시켜보면
 

이걸 ContentPanel상에 삽입할 TextBlock에 적용하면 이 효과는 그대로 먹히겠지요.
 

그럼 이 실버라이트부분 언급할때 나왔던 적용 순위를 확인해보도록 하겠습니다. 분명 Style상에서는 
HorizontalAlignment 과 VerticalAlignment가 center로 되어 있습니다. 그럼 ContentPanel상에 다른 식으로 적용하면 어느 영향을 받을까요?

위에서 보는 것처럼 지역적으로 설정한 내용의 영향을 받고 있는 것을 확인할 수 있습니다. 물론 이전 포스팅에서도 언급했지만 우선 순위는

지역설정
스타일설정
속성 상속
기본값

의 순서를 가지고 있습니다. 

이중에 속성상속이라는 개념이 나오는데
만약 스타일을 설정했는데 이중 일부만 취하고 위의 경우처럼 글자마다 다른 Alignment를 적용하고 싶을때는 어떻게 해야 할까요? 

이 때는 BasedOn이란 속성을 사용해야 합니다.

이렇게 하면 txtblkStyle의 속성을 그대로 받아오면서 alignment에 관한 항목만 재설정하는 게 보이실겁니다.

그럼 ContentPanel상에 적용시켜보면 되겠지요.

이처럼 속성을 상속받는 개념을 속성 상속이라고 합니다.
스타일 속성을 자유롭게 쓴다면 xaml상에서 페이지상을 자기마음대로 꾸미면서 코드작성 줄을 줄이는 건 쉽겠지요 ㅎ

StyleSharing.zip

오늘은 스타일에 대해서 다뤄봤고 다음 포스팅에서는 사용자가 만든 개체를 실버라이트상에서 변형을 주는 방법에 대해서 알아보겠습니다.