윈도우폰 시작하기! - Title 속성, 버튼 속성

윈도우폰 시작하기! - Title 속성, 버튼 속성

 

처음 윈도우폰 프로젝트를 열었을 때의 레이어 모습입니다.,

 

 

화면영역에 나타나는 영역을 표시하면 다음과 같습니다.

 

 

오른쪽 properties 창에 있는 Common Properties의 text값을 바꿔주면 쉽게 바뀌는 것을 확인할 수 있습니다.

 

 

각각의 Title 이 쉽게 바뀌는 것을 확인할 수 있습니다.

 

 

이제 윈도우폰 버튼을 한번 살펴볼까요?

 

 

 

Grid패널로 만들어진 ContentPanel 안에 버튼을 넣어보도록 하겠습니다.

 

 

먼저 ContentPanel 레이어를 선택 한 후 도구상자에서 버튼을 더블 클릭하면,

버튼이 작업영역에 들어갑니다.

 

 

버튼이 잘 들어갔죠?

(버튼 사이즈나 마진 값을 정렬해 아래로 가게 만들었으요 정렬에 관련된 것은 나중에 ^^)

기존에 실버라이트나 WPF와는 다른 버튼 스타일입니다.

윈도우폰 이 가지고 있는 심플한 디자인과 잘 어울리는 버튼 컨트롤 이네요 ^^

그럼 이 버튼을 간단하게 수정해 보도록 하겠습니다.

 

 

버튼의 오른쪽 마우스 >Edit Templete > Edit a Copy를 클릭합니다.

 

 

내가 만들 버튼 스타일의 이름을 지정해 주는데요,

디자이너가 보기에는 다소 생소한 부분입니다. 내가 수정한 버튼 컨트롤은 그 스타일의 이름을 가지고 있어

어려 버튼으로 발행할 때 그 이름을 쓰기 때문에 이름만 보아도 잘 알아볼 수 있게 구체적으로 지정해 주어야 합니다.

저는 그냥 기본으로 세팅 되어 있는 ButtonStyle1로 선택하고 OK를 누르겠습니다.

 

 

여기서 잠깐

다음에 관련된 내용은 다음에 정리하도록 하겠습니다.

디자이너에겐 조금 생소하지만 중요한 부분이기 때문에..

정리가 되면 이 글에도 링크를 걸어 둘께요 ^^

 

 

다시 본론으로 들어와,

버튼을 수정할 수 있는 "수정세상"으로 들어갑니다.

(원래 화면에서 한단계 안으로 들어가는데, 많이들 헷갈려 하셔서 제가 따로 지정한 이름입니다! 수정세상ㅎㅎ )

화면상으로 크게 달라진게 없는 듯 하나 수정세상으로 들어왔음을 알 수 있는 몇가지가 있습니다.

 

 

레이어가 달라졌습니다.

타이틀 텍스트 블록이 없어지고 버튼에 필요한 컨트롤들만 레이어에 있네요

 

 

또 화면 영역 위쪽을 보면,

버튼 > 팔레트아이콘 > ButtonBackground 라고 뎁스가 나눠져 있습니다

팔레트 아이콘을 보면 수정할 수 있는 영역 그 다음 뎁스에 들어와 있음을 보여주네요

 

 

버튼을 간단히 수정해 보려고 하니 오른쪽 Properties에서 아무리 건들여도 수정이 안됩니다.

왜냐하면 기본적으로 익스프레션 블렌드가 그 값을 바인딩(연결)하고 있기 때문입니다.

스타일이 바뀌지 않도록 꽉 잡아둔걸 Properties 탭에서 노란색이나 연두색으로 영역이 지정되어 있고 그 값이 안바뀌는 것을 보면 알 수 있습니다.

이 기본 컨트롤을 내가 원하는 스타일로 바꾸기 위해서는 이 바인딩을 직접 풀어줘야 합니다.

 

 

버튼의 색상을 간단하게 수정하는 방법은 다음과 같습니다.

Properties 탭에서 Brush의 값들을 수정하면 됩니다.

 

 

먼저 버튼의 배경색을 바꿔보도록 하겠습니다.

노란 네모 위에 마우스를 올려놓고 오른쪽 마우스 >Reset을 누릅니다.

 

 

아래 네모랑 비교했을 때 노란색이 없어진 것을 확인할 수 있습니다.

바인딩 값을 풀어주어 변경할 수 있게 만들어 준 것입니다.

 

 

눈에 잘 띄는 노란색으로 변경하겠습니다.

빨간색 네모로 친 A(알파) 값이 100인지 꼭 확인하세요

 

 

같은 방법으로 버튼의 외곽선에 걸려있던 바인딩을 Reset 시켜주고,

 

 

버튼 배경의 라인색을 빨간색으로 수정합니다.

 

 

버튼의 텍스트 색상은 바인딩이 걸려 있지 않은 하얀색 네모를 갖고 있기 때문에

Reset 없이 바로 색상값을 변경해 주면 됩니다.

이제 간단하게 버튼을 수정했으니 수정세상 밖으로 나가도록 하겠습니다.

 

 

상단의 제일 왼쪽에 있는 Button을 누르면 수정세상에서 빠져나가게 됩니다.

 

 

버튼의 텍스트는 버튼 레이어를 잡고 Content 영역에서 텍스트를 바꾸면 됩니다.

 

 

한번 만든 버튼스타일은 ontent 영역에서 텍스트만 바꿔주면 같은 스타일을 가진 버튼들이 만들어 집니다.

 

 

그런데,

버튼 스타일을 다른 색으로 변경하고 싶다면??

다시 수정세상으로 들어가면 됩니다. 그런데 한번 만들어진 버튼 스타일은 다른 방법으로 들어가게 됩니다.

 

 

처음 스타일을 만들 때와는 달리 버튼 위에서 오른쪽 마우스 > Edit Template > Edit Current가 활성화 되어 있는 것을 확인할 수 있습니다.

한번 만들어진 스타일은 Edit Current를 통해 수정세상으로 들어가면 됩니다.

 

 

오른쪽 마우스 > Edit Template > Edit Current을 통해 수정세상에 들어가서 배경색을 파란색으로 변경해 보겠습니다.

하나의 버튼만 수정했는데 나머지 버튼들도 동시에 바뀌는 것을 알 수 있습니다.

처음 스타일 이름을 지정해 주었기 때문에 이 이름을 가진 버튼들은 모두 동시에 수정되는 것을 알 수 있습니다.

 

 

이렇게 간단하게 윈도우폰 버튼을 살펴보았습니다.

기존에 익스프레션 블렌드를 통해 Silverligt나 WPF를 경험해 봤다면 너무 기초적인 내용일 수 있습니다.

하지만 처음 접한 접한 분이라면 천천히 따라해 보면서 이해하시면 좋을 것 같습니다.