WP7 개발 기초 - 속성(2)

이번에 다룰 이야기는 색상에 관한 속성입니다.

다시 기본으로 돌아가서 이번에는 ContentPanel의 배경을 수정해봅시다.

아주 간단하게 위처럼 표현한다던가 지난 시간에 언급했던 속성 엘리먼트 구문을 적용시켜보면

와 같이 쓸 수 있겠습니다. 물론 결과는 ContentPanel의 배경색이 Blue로 나오겠지요.

여기다가 역시 지난 시간에도 나왔던 Foreground를 입혀보겠습니다.
 

여기서 주목해야 될점이 있다면 바로 Foreground와 Background 입니다. 지금 ContentPanel의 Backgound와 textBlock의 Foreground가 서로 독립적으로 보이는 겁니다. 전전 포스팅에서 FontStyle 속성이 지역인지 전역인지에 따라서 영향이 미친다고 했었는데 그건 같은 속성을 공유할 때 그렇습니다. 지금 보이는게 색이 관장하기 때문에 같은 속성이라고 보시면 안된다는 겁니다. 

그리고 또 신경써야 할 부분이 또 있습니다.
이 글을 보시는 분이라면 누구나 앱개발을 목적으로 하실거고 그 중 다수 분들은 패널상에 키보드를 삽입하실겁니다. 그런데 보통 키보드를 누르면 눌렀다는 표시로 색깔이 바뀌는게 UI 특성상 맞습니다. 만약 ContentPanel의 BackGround값을 설정하지 않고 넘어가면 키보드가 눌러지는게 안 보일 수도 있을 겁니다. 왜냐면 배경색을 설정안하게 되면 Default값으로 null이 들어가게 되는데 실제 디자이너 뷰에서는 이를 구별할 수 없습니다.디버깅을 해봐야 그게 잘 못 된것을 알게 되지요.
이때는 반드시 Background색을 Transparent로 해줘야 합니다.

색상을 표현하는 방법에는 여러가지가 있는데 단순히 RGB로 표현하는 방법,RGB에 채도를 표현하는 방식, 그리고 MS에서 만든 scRGB방식으로 표현할 수도 있습니다.

단순 RGB 표현 방식은

Foreground = "#FF0000"으로 표현해줍니다. 그러면 우리가 표현할 수 있는 색상은 약 170만 컬러가 되겠네요.

RGB + 채도 (RGBA) 방식은

Foreground = "#80FF0000"으로 표현합니다. 표현할 수 있는 색상은 170만 컬러에 채도를 256 level로 나눠서 표현할 수 있습니다. 여기서 맨앞의 두자리 숫자가 채도를 결정합니다.

ScRGB방식은

Foreground = "sc# 1 0 0"으로 표현하고 각 색의 범위는 0~1로 한정합니다. 제가 알고 있는게 맞는거라면 scRGB방식은 기존 RGB방식을 엄청 잘게 쪼갠 형태라고 합니다.

이를 xaml 상에서는 이렇게 표현되고 결과도 그에 맞게 나옵니다.

이제 속성 엘리먼트 구문을 통해서 위를 표현해봅시다.

 

SolidColorBrush는 그냥 단색으로 채워준다는 의미를 사용한 메서드입니다.

보는 것처럼 색깔도 쪼갤수 있고

RGBA 방식을 써서 명도 와 채도를 표현하는 것또한 속성 엘리먼트 구문을 통해서 표현할 수 있습니다. 단 주의해야 할점은
RGBA 방식으로 구현할때는 반드시 Color.A 를 표현해줘야하는 겁니다. 안하면 그냥 null 처리가 되서 보이지 않습니다.

지금은 SolidColorBrush를 사용했지만 이걸 LinearGradientBrush를 사용하면 조금더 속성 엘리먼트를 사용하는 의미를 부여해줍니다.

 또 여기에는 GradientStops란 속성을 가지고 또 내부적으로 GrdientStopCollection란 속성을 가집니다. 이걸 표현하자면 

라고 할 수 있습니다. LinearGradientBrush 클래스를 링크를 따라서 보신 분은 아시겠지만 이 클래스는 색상을 선형적으로 바꿔주는 역할을 합니다. 그럼 선형적으로 바꿔주기 위해서는 일단 색상표에서 시작점과 끝점을 결정지어줘야되겠지요. 그걸 표현 합니다.

색깔은 아무거나 넣어보시면 됩니다. 저야 마젠타가 좋기에.. 결과는 다음과 같습니다.

 원한다면 이런 결과물도 만들수 있습니다.

 
그럼 이렇게 항상 대각선만 되느냐? 아닙니다. 그 부분에 대한 설정은 LinearGradientBrush에서 StartPoint와 EndPoint를 잡아주면 됩니다. ContentPanel의 왼쪽 상단이 (0 0) , 오른쪽 하단이 (1 1)이라고 정의되어 있으니 그 부분만 바꾸면 다음과 같은 결과를 얻을 수 있습니다.

 TextBlock도 이런 효과를 줄 수 있습니다. 여기에는 원형으로 분산하는 효과를 줘 보겠습니다.
이때 사용되는 클래스는 RadialGradientBrush 입니다. 이는 GradientBrush에서 파생되어 나왔기 때문에 그에 관한 구문을 속성 엘리먼트 구문으로 표현할 수 있습니다.

뭐 결과야 여러분들이 상상하시는대로

 나오겠지요.

오늘 포스팅이 지금까지 한 포스팅 중에서 가장 화려한게 아니었나 싶네요. 이것저것 이미지 속성을 속성 엘리먼트와 결합해서 다양한 효과를 낼 수 있습니다. 아무튼 GradientBrush에는 Linear 와 Radial  두 방식이 있으니까 잘 알아두시면 진짜 화려한 효과도 낼 수 있을 것 같습니다.
 다음 포스팅에선 이렇게 하면서 야기될 수 있는 문제점과 해결 방안에 대해서 언급하고자 합니다. 

XamlExperiment.zip