[Blend for Windows] Changing the Background

찾다보니까 Windows 8에 관해서 유용한 사이트를 찾았습니다. 바로 BlendInsider라는 사이트입니다.

 

<http://blendinsider.com/>

 

이름은 BlendInsider라고 되어 있는데 여기가 Expression Blend의 TeamBlog인거 같습니다. 여기에 다양한 교육자료들이 올라와 있으니 참고하시면 좋을 것 같습니다. 이번에는 여기 내용중 유용한 팁이 있어서 소개해드리고자 합니다. 바로 배경에서 그래디언트 효과를 주는 겁니다. 한번 해봅시다! 기존 예제는 Visual Studio 2012에서 진행되었지만 저는 Blend for windows에서 해보고자 합니다. 어차피 성격은 같으니까요.

 

만든 앱이 있다면 그걸 여셔도 되고 저는 아직 그런게 없으니까 임의의 앱인 Grid App을 하나 생성했습니다. 그리고 이미지 배경으로 삼고 싶은 걸 하나 선택하세요. 참고로 저는 이 이미지를 선택했습니다.

 

 

뭐 배경으로 깔거니까 좌우로 넓은 이미지가 좋겠지요. 뭐 어쩔 수 없이 예제니까 한번 해봅니다. 자 우선 Asset에서 Image Control을 하나 찾아서 제목 옆에 붙여넣습니다.

 

 

당연히 제목은 하나의 Grid에 들어가 있으니까 지금 삽입한 이미지도 그 제목의 Grid에 들어가게 됩니다. 우리가 바꿀것은 MainPage의 Background이므로 그 이미지를 밖으로 뺍시다. Object창에서 해당 Image를 바깥 grid로 뺍니다.

 

 

그럼 이제 Image control은 Grid에 종속되지 않습니다. 이제는 자유롭게 움직일 수 있는데 MainPage의 제일 하단에 배치하도록 하겠습니다.

 

 

그런데 현재 이 이미지는 보기에만 바닥에 있는 것처럼 보이지 실제 속성은 그렇지 않습니다. 정말로 바닥에 놓고 싶다면 속성을 고쳐야 겠지요. 그중에서도 Layout의 horizontalAlignment와 Vertical Alignment를 수정해주면 확실하게 바닥에 놓을 수 있습니다.

 

 

그리고 바닥에 까는건 아무래도 화면의 폭과 일치시켜주는 것이 맞겠지요? width를 Auto로 해주고 해당 개체에 걸려있는 Margin을 Reset해줍니다.

 

그러면 위와 같이 Image Control이 바닥에 깔리게 됩니다. Auto로 바꾸는 방법은 옆의 화살표가 엇갈려있는 마크를 한번 클릭해주시면 됩니다. 자 이제 이미지를 추가시키면 됩니다. 기존에 위 이미지가 프로젝트에 추가되어 있다면 Common 속성의 Source에서 추가시켜주면 됩니다.

 

 

그런데 이렇게만 화면 Image에 해당 그림이 아주 조그맣게 뜹니다. 그걸 꽉차보이게 하려면 Stretch 속성을 UniformToFill로 설정하시면 됩니다. 그럼 결과가 다음과 같이 나옵니다.

 

 

만약 그림과 같이 안나오고 그림이 아이콘들을 덮어버린다 하시는 분은 Object창에서 Image를 Grid의 최상단에 놓으시면 아래에 깔리게 됩니다. 이것도 어떻게 보면 하나의 Stack의 형태를 띄기 때문이죠.

 

물결 무늬도 보이게 Height을 수정하게 되면 다음과 같이 됩니다.

 

 

그런데 확실히 이렇게 하면 무언가 이질감이 있습니다. 검정과 하늘색은 전혀 안 어울리지요. 그래서 활용하는 것이 BlendBrush라는 겁니다. 이제는 Visual Studio에서도 Grid의 색상에 그래디언트를 줄 수 있습니다. 저야 지금은 블랜드에서 하니까 상관은 없습니다. 지금 상태에서 Grid를 선택하면 Properties상에 Brush속성이 뜹니다. 이게 Visual Studio상에서도 뜬다는 것이죠. 앞에서 말한것처럼 그래디언트를 주려면 세번째 항목을 골라주면 됩니다.

 

조금 그래디언트가 들어간게 보이시죠. 여기서 밑의 이미지색과 알맞게 해주려면 중간에 있는 Eyedropper를 선택해주면 됩니다. 선택해준 다음 이미지의 끝에 딱 떨어뜨리면 그래디언트의 한쪽이 이미지의 끝색과 맞게 됩니다.

 

 

그런데 막상 보면 조금 엇나가 있는 부분이 있는데 그때는 그래디언트의 경계선을 조금 올려주면 됩니다. 참고로 저는 다음과 같이 해줬습니다.

 

 

그럼 결과가 다음과 같이 나옵니다.

 

 

중간의 흰선은 이미지를 잘 못 고른 겁니다. 여러분들이라면 더 깔끔하게 처리할 수 있겠지요.

어떤가요? Windows Store Style에서는 배경도 이렇게 쉽게 변경할 수 있습니다! 원래 강의를 듣고자 하시면 다음을 보시면 되겠습니다.