통합검색
· 마을서비스란?  · 포럼마을  · 일반마을  · 테마마을  · 마을랭킹  · 활동왕
· 덱스퍼트란?  · 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 강좌
 WPF 동심원 데모 2008-07-24 오후 11:04:30
 kdw234  kdw234님께 메시지 보내기kdw234님을 내 주소록에 추가합니다.kdw234님의 개인게시판 가기 번호: 37415  / 읽음:4,589

MSDN에 놀러갔다가 Windows Presentation Foundation 샘플라는 카테고리가 있길래 뭔가 재미있는 게 있을 가 싶어 들어가 봤더니 몇 가지 기초적인 샘플들을 다루고 있네요. 그런데 대부분의 코드가 XAML을 사용하지 않고 C# Code를 사용하여 샘플이 구현되어 있고, 별다른 설명이 없기 때문에 초보자가 접하기 약간 부담스러울 수도 있을 거 같아 XAML로 구현한 내용을 포스팅 하려고 합니다. 꼭 C#을 사용해야만 가능한 기능(Random값에 의한 값 변화 등)은 배제하고 XAML로 표현 가능한 수준에서 작성했습니다.

먼저 첫 번째로 소개해 드릴 내용은 Microsoft Xbox 360 로고와 유사한(MSDN홈페이지에는 이렇게 표현하고 있지만, 보면 색이 비슷한 거지 모양은 그 닥 비슷하지 않네요 -_-) 시각적 효과를 생성하는 애니메이션 기술입니다.

사용자 삽입 이미지


MSDN 홈페이지에 기재된 샘플의 화면 입니다.

사용자 삽입 이미지


이 포스팅에서 구현한 내용입니다.

내용은 무지 간단합니다. 화면 중앙에서 다양한 색의 원이 퍼져 나가는 애니메이션 입니다. 원래 샘플에 의하면 Random함수를 사용하여 원의 시작 위치를 지정하고 BeginTime을 지정해 사용하지만, XAML에서는 Random을 사용할 수 없으므로 Margin으로 적당히 위치 잡고 BeginTime은 따로 주지 않았습니다. -_-ㅋ 코드입니다.

<Grid>

<Grid.Resources>

<Style TargetType="Ellipse">

<Setter Property="Width" Value="0"/>

<Setter Property="Height" Value="0" />

<Setter Property="VerticalAlignment" Value="Center" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="StrokeThickness" Value="2" />

<Style.Triggers>

<EventTrigger RoutedEvent="Loaded">

<BeginStoryboard >

<Storyboard FillBehavior="Stop" RepeatBehavior="Forever">

<DoubleAnimation To="300" Storyboard.TargetProperty="Width" Duration="0:0:5"/>

<DoubleAnimation To="300" Storyboard.TargetProperty="Height" Duration="0:0:5"/>

<DoubleAnimation From="1" To="0" Storyboard.TargetProperty="Opacity" Duration="0:0:5"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Grid.Resources>

<Ellipse Stroke="Red" Margin="20,0,0,0"/>

<Ellipse Stroke="Orange" Margin="0,10,0,0"/>

<Ellipse Stroke="Yellow" Margin="0,0,20,0"/>

<Ellipse Stroke="Green" Margin="0,0,0,30"/>

<Ellipse Stroke="Blue" Margin="0,0,0,0"/>

<Ellipse Stroke="DarkBlue" Margin="0,30,10,0"/>

<Ellipse Stroke="Purple" Margin="30,0,0,10"/>

</Grid>

TargetType이 Ellipse인 Style을 Resource에 등록하고 Setter를 사용해 Ellipse의 기본적인 속성을 잡았습니다. 그리고 Event Trigger를 사용하여 점점 커지면서 사라지는 애니메이션을 구현했습니다.

이 샘플의 C#으로 구성된 예제는 다음 URL에서 확인 하실 수 있습니다.
http://msdn.microsoft.com/ko-kr/library/ms771460.aspx

사용자 삽입 이미지

코멘트쓰기
  좋음   놀람   궁금   화남   슬픔   최고   침묵   시무룩   부끄럼   난감
* 코멘트는 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.