[Expression Blend] 키패드를 만들어보자

6월 30일에 진행되었던 Windows 8 코딩 캠프에 나온 Expression Blend 예제입니다. 한번 예제를 통해서 다시 들어가 보겠습니다. 저번과 마찬가지로 WPF Application으로 KeyPad라는 이름의 프로젝트를 생성합니다.

 우선은 휴대폰에서 뜨는 키패드를 만들어보고자 합니다. 그런데 그러기에는 기본 MainWindow가 커보입니다. 그래서 Object 창에서 Window를 선택한 상태에서 크기를 적당히 조절해봅니다. 키패드니까 Height이 큰 방향으로 지정해주면 좋겠지요. 그러고 나서 해당 LayoutRoot안에 Grid를 삽입합니다. 방식은

 

 

화면 우측에 보이는 ToolBox내에서 위와 같은 Grid를 선택한 후 더블클릭을 해주면 Object 창에 삽입이 됩니다. 다만 크기가 처음에는 MainWindow를 다 덮지 못하기 때문에 다 덮을 수 있게끔 수정해줘야 합니다. 그러고 나서 지난 포스트에서 소개해준 방식을 이용하여 3*4가 되게끔 구역을 나눕니다. 여기까지는 하실 수 있을겁니다. 그럼 결과는 다음과 같을 겁니다.

 

 

이 상태에서 버튼을 12개 삽입합니다. 그럴려면 좌측에 있는 Toolbox에서 버튼 모양의 버튼을 12번만 눌러주면 되겠지요.

 

 

그런데 조금 이상합니다. 분명 버튼은 12개를 삽입했는데 실제로 디자인뷰상에서 나타나는 버튼은 1개이지요. 위와 같은 현상은 버튼끼리 겹쳐있기 때문에 나타나는 현상입니다. 칸이 나눠져 있는데 저 공간에 하나씩만 넣을 수는 없을까요?

 

 방법은 지난 시간에 잠깐 소개했습니다. 버튼을 선택하면 Layout 창에 해당 개체가 들어있는 Row와 Column이 나타난다고 했었습니다.

 

 

지금은 첫번째 버튼을 선택한 상태이고 이 개체는 Row 0 Column 0에 들어있는 겁니다. 그럼 버튼을 바꿔주면서 이 값들을 수정해주면 되겠지요. 바꿔주면서 아래의 Common Properties에 들어있는 Content의 값도 같이 수정해주면 될겁니다. 물론 포함된 폰트나 폰트 사이즈 색상등을 적절히 수정해주면 다음과 같은 결과를 얻을 수 있습니다.

 

 

 

 그런데 칸이 균일하지가 않습니다. 이걸 조절하기 위해서는 Margin이라는 항목을 수정해야 합니다. 위와 같은 상황은 오른쪽에만 Margin이 걸린 상태이기에 전체적으로 왼쪽으로 치우친 경향이 있습니다.

 

 

object 창에서 전체 버튼을 선택하고 위와 같이 Margin을 좌우 동일하게 주면 됩니다. 더 깔끔하기 위해서 VerticalAlignment를 center로 두면 아래와 같이 나옵니다.

 

 

어떤가요? 위와 비교했을때 뭔가 정렬이 된듯한 느낌을 받으실 겁니다. 추가적으로 현재 버튼이 전부 선택되어 있는 상태에서 Color의 Foreground를 수정하게 되면 폰트의 색상을 바꿀 수 있습니다. 이게 예제였습니다.

 그런데 조금 다르게 해보겠습니다. Trigger를 사용해서 버튼 크기가 바뀌게끔 바꾸겠습니다. 버튼을 하나 선택하고 마우스 우클릭을 통해서 Edit Template - Edit a copy를 선택해보겠습니다. 그럼 스타일을 결정하라고 하는데 그냥 바로 넘어갑니다.

 

 

아마 기본형이 buttonstyle1일겁니다. 이상태로 들어가면 Object창이 바뀔겁니다. 여기서 버튼의 전체적인 Template이 나타나게 됩니다. 크기를 수정하려면 일단 Chrome이라는 부분을 선택하고 좌측의 상단에 있는 state라는 창을 선택합니다.

 

 

우리는 마우스를 올렸을 때의 상태를 정의하는 것이므로 위처럼 MouseOver를 선택하면 디자인뷰의 테두리에 빨간선이 처지면서 녹화상태로 들어가게 됩니다. 이때 버튼 Template의 scale이 늘어난 걸 표현해주면 되겠지요. 그 항목은 Properties의 Transform에 있습니다.

 

 

위와 같이 기존에 1이라고 된 부분을 적절하게 수정하면 됩니다. 유의할 것은 반드시 Mouseover가 녹화되는 상태여야 한다는 겁니다. 자 수정이 끝났다면 다시 State로 돌아가 Base를 눌러주면 녹화상태가 꺼지게 됩니다.

 이제 거진 다 끝났습니다. 현재의 Template 수정창을 벗어나고 싶다면 디자이뉴상의 [Button]이라고 된 부분을 눌러주면 됩니다.

 

 

그런데 지금은 1이라고 표시된 버튼만 이 Style이 적용된 상태입니다. 다른 버튼도 이 효과를 같이 누려야 하겠지요. 다른 버튼을 선택한 상태에서 마우스 우클릭을 통해서 다음 메뉴를 선택해줍니다.

 

 

기억하시죠? 아까 만든 Template이 buttonStyle1으로 저장되어 있다는 것 말이죠.. 이걸 전 버튼에 적용하고 실행시켜 봅니다. 결과는 다음과 같습니다.

 

 

그런데 애니메이션 효과가 조금 딱딱하지 않나요? 여기에 조금 스무딩을 가하면 부드러워 질겁니다. 그럴려면 아까의 ButtonStyle1으로 돌아가야 합니다.

 

 

그러고 나서 아까의 State 창으로 돌아가 MouseOver를 살펴보면 옆에 작은 버튼이 있습니다. 여기서 다음 두개를 선택해주고 시간을 0.2초로 맞춥니다.

 

 

위 설정이 바로 초기 상태에서 MouseOver로 들어가는 시점, 그리고 MouseOver에서 초기로 돌아가는 시점 두 시점을 표현한 겁니다. 여기서 시간을 주면 조금 부드러워지겠지요.

 그리고 지금 수정한 것은 ButtonStyle1이기 때문에 지금 고친 영향이 다른 버튼에도 미칩니다. 아까 그렇게 적용했기 때문이지요. 자 확인해보겠습니다.

 

 

조금 부드러워 진 것을 확인할 수 있지요. 여기까지가 블랜드로 키패드를 만드는 예제였습니다. 뭔가 조금의 Ux를 부여한다면 조금더 멋진 컨트롤이 나올 수 있지 않을까요^^