2011.10.15 Windows Phone 7 App camp 따라가기. (1)

 

2011년 10월 15일 토요일, 한국 MS에서 10월 WP7 앱캠프를 실시하였습니다.

오늘의 주제는 Expression Blend 4 를 이용한 다양한 효과 구현이었습니다.

우선 Expression Blend에 대해 간단히 소개하자면 WP7 앱을 개발하는 데 있어서 디자이너의 개발쪽 역량을 확충하기 위해서

컴퓨터에 대한 코드를 전혀 몰라도 앱을 만들 수 있도록 한 디자인 툴입니다.

이번 글은 캠프에서 다뤘던 내용에 대해 다시 되돌아보는 차원에서 작성한 글입니다.

 압축을 풀어보면 다음과 같은 파일들이 나옵니다.

AppCamp예제파일.zip

첫번째 파일은 암호 입력에 condition을 줘서 암호를 맞췄을 때와 암호를 틀렸을 때의 조건을 다르게 설정하는 예제였고

두번째는 아이콘을 특정 모양 형태로 정렬하고 애니메이션 효과를 주는 실습이었습니다.

-----------------------------------------------------------------------------------------------------------

그럼 일단 첫번째 예제부터 해보겠습니다.

우선 Expression Blend로 conditional.sln 이라는 파일을 엽니다.

그럼 다음과 같은 창이 나오게 되는데 지금 이 프로젝트 내에는 사전에 Storyboard1 과 Storyboard2가 지정되어 있습니다.

간단히 어떤 story가 지정되어 있는 확인하려면 Object & Timeline 옆의 화살표 표시를 누르면 됩니다.

암호가 틀렸다면 우리는 Storyboard1을 띄워서 경고 메세지를 보여야 되고 맞았다면 Storyboard2를 띄우는 게 목적인 겁니다.

지금 이렇게 설정된 Storyboard를 활용하기 위해서는 ControlStoryboardAction이라는 메뉴를 활용해야 합니다.

이 항목은 Assets 이라는 항목의 Behavior라는 메뉴안에도 있고 못찾으시는 분은 좌측 아이콘 맨 아래에서 검색을 하시면 됩니다

이 항목은 이제  뭔가가 버튼을 눌렀을 때 반응해야 하므로 LayoutRoot내의 StackPanel안에 있는 Button속에 삽입해야 합니다. 그냥 드래그해서 Button항목으로 끌면 됩니다. 끌면 다음과 같이 나오겠네요.

자 이제 이 Action을 컨트롤할 조건을 설정해야 합니다.

기본 Default로 된 메뉴라면 우측에 Properties라는 항목이 있을텐데 여기에서 다양한 조건 및 디자인을 결정할 수 있습니다.

여기서 우리는 어떤 것이 변화할 것을 감지할 것인지, 또 그걸 감지하는 걸 어떤 식으로 할 건지, 조건을 어떻게 할 것인지를
결정해야 합니다. 다음과 같이 지정해 줍니다.

<- 어디를 받아들일 것인지를 결정하는 겁니다. 버튼을 지정


<- 어떤 이벤트일때 받아들일 지를 결정합니다. 당연히 클릭!


<- 조건을 추가하기 위해선 옆의 + 버튼을 누릅니다.

<- 그럼 이렇게 항목이 하나 생성 됩니다.




<- 좌측 작은 점을 누르고 Element Property Binding 항목을 선택합니다. 그럼 중간의 flow에서 아이콘을 선택할 수 있는데
우리는 텍스트를 비교하는 것이므로 텍스트 박스를 지정합니다.

< - 조건 설정인데 저는 123이라는 비번을 두고 일치하지 않을 때



<- StoryBoard1이 실행되게끔 설정했습니다.




같은 식으로 하나의 ConditionStoryBoardAction 항목을 button에 삽입한후 다음과 같이 지정을 해줍니다.
이제는 일치할때 Storyboard2가 실행되게끔 하면 되겠지요.

자 이제 끝났습니다 f5로 빌드를 해보시기 바랍니다. 그럼 다음과 같은 결과를 얻으실 수 있을겁니다 ㅎ

여기까지 입력값을 조건으로 받아들이는 걸 Expression Blend로 구현한 겁니다. 다음 포스팅에선 메뉴 아이콘을

특정 모양으로 정렬하고 애니메이션 주는 것까지 해보겠습니다.