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
