통합검색
· 마을서비스란?  · 포럼마을  · 일반마을  · 테마마을  · 마을랭킹  · 활동왕
· 덱스퍼트란?  · TECBOX   · PRSBOX   · 이용안내  
· DEXT제품군  · 솔루션베이  · S/W & ESD 컴포넌트
· 프로그램베이
· LiveSeminar  · LiveConference
WPF & Silverlight 포럼마을입니다.
  마을등급 WPF & Silverlight   이 마을은 포럼마을 입니다이 마을은 자유가입제 마을 입니다 마을소개 페이지로 이동 전입신청
마을촌장촌장 서학수 주민 728 since 2008-07-17
우리마을 공지사항
질문&답변
강좌&팁
자유게시판
자료실
앨범
[마을 게시판]
WPF 강좌
랑데브 게시판
칼럼 게시판
개발자 고충상담
Dev Talk
자유토론방
벼룩시장
재나미 우스개
구인/프로젝트 정보
사람인 채용 게시판
  고객지원 게시판
마이 데브피아
 나의 e-Money 내역
 활동왕 My Page
 스크랩한 게시글보기
 쪽지관리
 주소록관리

 WPF 강좌
 Animation 완료 후 Property 설정 2008-09-01 오후 1:31:30
 kdw234  kdw234님께 메시지 보내기kdw234님을 내 주소록에 추가합니다.kdw234님의 개인게시판 가기 번호: 38158  / 읽음:10,783

이번 시간에는 실제 실무에서도 접할 수 있을 법한 내용이므로 한번쯤 따라 해보시는 것을 권장합니다.

예제에서는 아래 그림과 같이 화면 중앙에 빨간색 사각형을 마우스를 클릭했을 때 색이 노란색으로 바뀌고, Animation이 완료된 후 파란색으로 바뀌는 효과를 구현해보겠습니다.

사용자 삽입 이미지


<Window x:Class="WPFKorea.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WPF Korea - whatisthat.co.kr" Height="300" Width="300">


<Rectangle Width="150" Height="150">


<Rectangle.Fill>

<SolidColorBrush x:Name="BackgroundBrush" Color="Red" />

</Rectangle.Fill>


<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

<BeginStoryboard>

<Storyboard>

<ColorAnimation Storyboard.TargetName="BackgroundBrush"

Storyboard.TargetProperty="Color"

From="Red" To="Yellow"

Completed="ColorAnimation_Completed"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>


</Window>

private void ColorAnimation_Completed(object sender, EventArgs e)

{

BackgroundBrush.Color = Colors.Blue;

}

실행 결과를 한번 볼까요? 그냥 보기에는 문제가 없는 코드처럼 보입니다. 하지만, 코드를 실행 해보면 아래 동영상처럼 클릭할 때 마다 빨강에서 노랑으로 변할 뿐 파랑으로 변하지는 않습니다. 마치 Completed 부분의 Code가 아무런 작업도 하지 않는 것처럼 보이는데, 이유는 Animation이 원래 속성의 기본값을 재정의 하기 때문입니다. 간단하게 설명하면 BackgroundBrush.Color 의 기본 공간이 Animation에서 사용하는 공간과 다르다고 생각 하시면 됩니다. 위 예제에서 실제 Color속성의 공간에는 파란색이 저장되지만, 화면에 보여질 때 사용하는 Color속성은 Animation에서 사용하는 공간을 참조하기 때문입니다. Animation이 시작되면 그 즉시 해당 속성에 대한 참조 위치가 변경 되기 때문에 Animation이 끝난 뒤에 속성을 변경하려고 해도 적용되지 않는 것처럼 보이는 것인데요. 원래의 속성이 기준 값이 되도록 하려면 Animation이 속성에 영향을 주지 않도록 구현 해야 합니다.

WPF에서는 아래와 같이 Animation이 속성에 영향을 주지 않도록 하는 3가지 방법을 제공 하고 있으며, 하나하나 살펴보도록 하겠습니다.

  • Animation의 FillBehavior속성을 Stop으로 설정한다.
  • Storyboard에서 Target객체를 제거.
  • 개별 Animation속성을 제거한다.

[Animation의 FillBehavior속성을 Stop으로 설정]

<ColorAnimation Storyboard.TargetName="BackgroundBrush"

Storyboard.TargetProperty="Color"

From="Red" To="Yellow"

FillBehavior="Stop"

Completed="ColorAnimation_Completed"/>

FillBehavior속성이 Stop이 되면 Animation이 완료된 시점부터는 대상 속성에 영향을 주지 않기 때문에, 코드가 정상적으로 작동하는 것을 확인 할 수 있습니다. FillBehavior를 사용하는 방법은 Animation이 완료된 시점에서만 사용 할 수 있습니다.

[Storyboard에서 Target객체를 제거]

<Window x:Class="WPFKorea.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WPF Korea - whatisthat.co.kr" Height="300" Width="300">


<Rectangle Width="150" Height="150" x:Name="Rectangle">


<Rectangle.Fill>

<SolidColorBrush x:Name="BackgroundBrush" Color="Red" />

</Rectangle.Fill>


<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

<BeginStoryboard>

<Storyboard x:Name="Storyboard">

<ColorAnimation Storyboard.TargetName="BackgroundBrush"

Storyboard.TargetProperty="Color"

From="Red" To="Yellow"

FillBehavior="Stop"

Completed="ColorAnimation_Completed"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>


</Window>

private void ColorAnimation_Completed(object sender, EventArgs e)

{

Storyboard.Remove(Rectangle);

BackgroundBrush.Color = Colors.Blue;

}

Sotryboard에서 Target객체를 제거하는 방법은 Animation완료 시가 아니더라도 언제라도 사용할 수 있습니다.

[개별 Animation속성을 제거 ]

<Window x:Class="WPFKorea.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WPF Korea - whatisthat.co.kr" Height="300" Width="300">


<Rectangle Width="150" Height="150" x:Name="Rectangle">


<Rectangle.Fill>

<SolidColorBrush x:Name="BackgroundBrush" Color="Red" />

</Rectangle.Fill>


<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

<BeginStoryboard>

<Storyboard x:Name="Storyboard">

<ColorAnimation Storyboard.TargetName="BackgroundBrush"

Storyboard.TargetProperty="Color"

From="Red" To="Yellow"

FillBehavior="Stop"

Completed="ColorAnimation_Completed"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>


</Window>

private void ColorAnimation_Completed(object sender, EventArgs e)

{

Rectangle.BeginAnimation(SolidColorBrush.ColorProperty, null);

BackgroundBrush.Color = Colors.Blue;

}

이 방법은 BeginAnimation 메서드를 사용하여 속성과 연결된 Animation을 Null로 할당하여 Animation과 Property간의 연결을 중단하는 방법입니다.

위 3가지 예제의 결과는 모두 같은 결과를 나타내며 결과는 아래와 같습니다.



사용자 삽입 이미지

 

코멘트쓰기
  좋음   놀람   궁금   화남   슬픔   최고   침묵   시무룩   부끄럼   난감
* 코멘트는 500자 이내(띄어쓰기 포함)로 적어주세요.
목록 보기   지금 보고 계시는 글을 회원님의 my Mblog >> 스크랩에 넣어두고 다음에 바로 보실 수 있습니다.  
회사소개  |   개인정보취급방침  |  제휴문의  |   광고문의  |   E-Mail 무단수집거부  |   고객지원  |   이용안내  |   세금계산서
사업자등록번호 안내: 220-81-90008 / 통신판매업신고번호 제 2017-서울구로-0055호 / 대표: 홍영준, 서민호
08390, 서울시 구로구 디지털로32길 30, 1211호 / TEL. 02_6719_6200 / FAX. 02-6499-1910
Copyright ⓒ (주) 데브피아. All rights reserved.