[WP7 개발 기초] border 속성

오랜만에 다시 윈폰 개발에 뛰어들었습니다.
이번 시간에는 TextBlock의 테두리를 설정할 수 있는 border란 요소에 대해서 언급해보고자 합니다. 

일단 예시부터 보겠습니다. 
 

지금 보고 계신건 그냥 단순하게 Content Panel 상에 TextBlock하나만을 삽입한 겁니다. 여기서 어떤 효과를 줄 수 있을까요? 뭐 글자체를 변경시킬 수도 있는 것이고, 아니면 지난 포스팅에서 했던 내용처럼 글씨 자체에 그라데이션 효과를 줄 수도 있는 겁니다. 그러면 테두리를 어떻게 할 수도 있지 않을까요? 그것에 대한 내용이 바로 border 속성인 겁니다. 다음과 같이 짜봅니다.
 

Border속성은 이렇게 줄 수 있습니다. 그 내에 들어가는 요소를 child처리를 해줘서 항상 들어가게 할 수 있습니다. 그런데 책에 언급되어 있는 내용이기도 하지만 사실 Textblock도 어떻게보면 Border에 포함되는 요소입니다. 그래서 따로 child 표시를 안해줘도 됩니다. 위같이 치면 결과는 다음과 같이 나옵니다.
 

여기에 Texblock의 VerticalAlignment나 HorizontalAlignment도 적용할 수 있는 것이죠. 물론 Border도 똑같이 적용 가능합니다.

결과는 물론 예상하는 그대로 나올 겁니다. 여기서 주목해야 할 점은 TextBlock의 Vertical과 Horizontal을 풀어도 이런 속성이 유지되는 겁니다. 그 말은 즉, Border의 Vertical과 Horizontal이 더 광역적으로 영향을 미친다는 것이지요. 그래서 위 상태에서 TextBlock의 배열과 관련된 속성을 바꿔본들 적용되지 않을겁니다. 위 코드는 실상적으로 아래 코드와 같게 됩니다.( 다른 속성 효과는 먹힙니다.)

이 상태에서 Border에 Padding을 20을 삽입하면 테두리가 깔끔하게 형성됩니다.

 여기에 지난 시간에 배웠던 RenderTransform을 적용시켜봅니다.
 

지금 위와 같이 적용한 것은 TextBlock을 중심을 기점으로 45도 만큼 회전한 겁니다. 지난 번에도 언급했던 내용이지만 Transform시 Origin은 좌측 상단이 (0 0), 우측 하단이 (1 1)로 인식합니다. 그래서 중간을 중심으로 설정하려면 (0.5 0.5)라는 값이 필요하겠지요. 이때는 물론 TextBlock만 돌아갑니다.
 

이제는 아까와 똑같은 개념을 적용시켜보겠습니다. 과연 TextBlock에 있던 RenderTransform을 Border로 옮기면 효과가 그대로 나타날까요? 많은 분들이 예 라고 하시겠지요.

실상 결과는 예상한 그대로입니다. TextBlock과 Border가 같이 움직이는 꼴이 되는 것이지요.

 실상 이번 주제에서 말하고자 하는 것은 이겁니다. TextBlock의 Property를 설정하지 않아도 Border 속성만 잘 정리한다면 일일 지정할 필요없이 효과적으로 구현할 수 있다는 겁니다. 물론 사람마다 취향은 다르기 때문에 상황에 따라서 적용시키는게 다르겠지만요..