티스토리 뷰

Expression Blend for Windows Phone - Hello World(2)

이어서 커스텀 버튼에 애니메이션을 추가해보도록 합니다. 애니메이션은 Visual State Manager로 지정합니다. Expression Blend 4에서 Object and Timeline의 내용이 ClickMeButton Edit Template에 위치되어 있지 않다면 ClickMeButton 오른쪽 클릭해서 Edit Template에서 Edit Current를 선택합니다.

왼쪽 상단의 States 탭을 선택합니다.

States Unfocused를 선택하고 Border 컨트롤의 BorderBrush 속성의 고급 속성에서 Opacity 값을 0으로 아래와 같이 지정합니다.

States에서 Pressed 를 선택하고 Transform Translate X, Y 2씩 증가시킵니다.



Banner Text에 애니메이션을 추가해보도록 합니다. Object and Timeline의 아래 아이콘을 클릭해서 Object and Timeline를 빠져나갑니다.


Object and Timeline의 오른쪽 메뉴의 “+” 를 클릭하고 New 메뉴를 선택합니다.

이름은 AnimateBanner로 지정합니다.


애니메이션 작업 영역으로 이동하기 위해서는 F6을 클릭하면 됩니다. 다시 돌아가려면 F6을 클릭하면 됩니다.


 
Object and Timeline
에서 BannerTextBlock을 선택하고 노란색 막대를 “1” 의 위치로 이동합니다.


Transform scale 속성의 X “-1” 로 지정합니다.

다시 노란색 막대를 “2”로 이동시키고 Transform Scale X“1”로 변경합니다.

Play 버튼으로 애니메이션 결과를 테스트할 수 있습니다.

노란색 막대의 처음에 위치한 부분을 클릭합니다.


속성 창에서 Easing Function을 지정할 것입니다. “Cube InOut”을 선택합니다.

프로젝트를 저장하고 VS 2010으로 이동합니다. 다시 로드하겠냐는 창에서는 예를 선택합니다.

MainPage.xaml의 변경된 사항을 확인하고 MainPage.xaml.cs로 이동합니다.

버튼의 클릭 이벤트에 아래와 같은 코드를 추가해서 애니메이션을 시작하게 합니다.

private void ClickMeButton_Click(object sender, RoutedEventArgs e)

{

BannerTextBlock.Text = MessageTextBox.Text;

MessageTextBox.Text = String.Empty;

this.AnimateBanner.Begin();

}

 

프로젝트를 빌드하고 실행해서 결과를 확인합니다.

“Cube InOut” 애니메이션에 대한 내용을 확인할 수 있습니다.


이상으로 Expression Blend를 이용한 Windows Phone Application의 레이아웃, 색상, 속성, 상태, 애니메이션에 대한 내용을 알아보았습니다.

댓글