[Windows 8] 테두리를 채우는 Border Element

디지털 시계는 다 만들어보셨나요? 점점 뭔가가 나오고는 있는 듯 한데 참.. 그것까지 가는 길이 조금 멀어보입니다. 하지만 노력한다면야 충분히 극복할 수 있는 거겠지요.

 이번에 소개해 드릴 내용은 Border 라는 요소입니다. 지금까지 본 앱들의 테두리에는 아무것도 없는 형태였습니다. 하지만 디자인 하는 분에 따라서는 요소에 Border가 들어갈 필요가 있는 겁니다. 그런데 생각보다 구현이 간단합니다. 자신이 경계선을 그리고 싶다 하는 요소의 자식 속성으로 삽입해주면 끝인거죠. 이때문에 앱의 테두리는 Grid로 감싸고 있으니까 그 안에 넣어주면 되겠지요.

딱 보면

 

 

보시면 Border에 Alignment를 아무것도 지정해주지 않았지만 이렇게 Theme가 흰색인 것처럼 나타납니다. 하지만 다들 보이시죠? 구석에 검정이 남아있다는 건 Theme가 검정인 상태에서 덮어씌운 셈이지요. 이로써 확인할 수 있는 기본적으로 Border의 Alignment가 Stretch로 되어 있다는 겁니다. 그래서 이렇게 화면에 꽉 차 보이는 거지요.

 그런데 재미 있는건 그 Alignment를 주기만 하면 뭔가의 변화가 생긴다는 겁니다.

 

위 상태를 보면 Border가 어떤 속성을 가지고 있는지를 확실하게 알 수 있습니다. 바로 자식 개체의 틀을 둘러싼다는 것입니다. TextBlock을 빼버리면

 

더 확연하게 알 수 있을 겁니다.

 가령 버튼에도 삽입하면

 

결과는 다음과 같이 나옵니다. 그런데 조금 유심히 볼 부분이 있습니다.

 

 

지금 위의 코드에 Border의 Background 색상을 바꾼 상태인데 잘 보면 버튼바깥에 Border가 형성되어 있는 걸 알 수 있습니다. 즉, 버튼 내부는 누르면 반응 하겠지만 테두리 부분은 눌러도 반응하지 않겠지요. 물론 Brush 속성을 사용해서 Button의 Border를 조절할 수 있지만 뭔가 세밀하지 않은 그런게 있지요. 아무튼 유념하셨으면 합니다.

 다음으로 말씀드릴 건 Margin과 Padding의 차이입니다. 저는 이렇게 이해했습니다. Margin은 말그대로 여백, 즉 그냥 아무것도 없는 공간을 말하지요. 이에 배해서 Padding은 그냥 NULL Space, 즉 아무것도 없는 것처럼 보이지만 뭔가가 자리를 차지하고 있는 듯한 그런 거지요. 여러분 패딩 잠바같은 거도 안에 뭔가를 채운거지요. 그게 공기(?)인지 닭털인지는 모르겠지만 아무튼 무언가가 자리를 차지하고 있는 거지요. 그래서 어떤 개체를 사이에 두고 Padding은 개체 안쪽에, Margin은 개체 바깥쪽에 형성되는 거라고 기억하고 있습니다. 그래서 예제를 통해서 보는 건 어떨까요?

 자 아까 말했듯이 Border는 자식 개체의 크기에 따라서 결정된다고 했습니다. 그렇기 때문에 Margin의 효과를 보기 위해서는 당연히 TextBlock에 삽입해주면 되겠지요. 그게 위의 결과고 한번 봅니다.

 

자 다음은 Padding인데 그건 안쪽에 생기는 거라고 했지요. 그래서 Border의 속성으로 들어갑니다.

 

차이를 한번 비교해보세요. 뭔가 하나  눈에 딱 띄는 게 있을 겁니다.

 

 위 이미지랑 아래 이미지의 크기는 같습니다. 그리고 분명히 흰 테두리 내부가 버튼입니다.

결론적으로 말하자면 Margin을 했을 때의 버튼 영역과 Padding을 썼을 때의 버튼 영역이 차이가 있다는 것을 확인할 수 있습니다. 즉 흰 테두리 바깥으로 아무리 눌러봤자 버튼 이벤트는 활성화되지 않는다는 거지요. 이거는 만약 버튼의 border Brush가 투명인 상태라면 직접 눌러보지 않는 이상 확인할 수 없는 겁니다.

 물론 대수롭지 않게 여길 수도 있습니다만, 그래도 뭔가가 겉보기와 다른게 있는 겁니다. 프로그래밍에서도 겉으로 나와 있는 결과물은 같을지 몰라도 실상 뜯어보면 다른 게 많지요. 그에 따라서 나타나는 효과도 다를 거고요.

 이야기가 다른데로 샜네요. 아무튼 여기까지 였습니다.

 프로젝트 소스 : https://dl.dropbox.com/u/96808368/Windows%208/Border.zip