복권 긁는 효과

간단히 복권을 긁는 효과를 구현 해보도록 하겠습니다. 아래는 시연 동영상입니다.

아래는 소스코드입니다. XAML만으로 구현했기때문에 이해하시는데에 큰 문제는 없으실것 같습니다.

view plaincopy to clipboardprint?

1. <GRID Width="250" Height="250" Background="Red">  
2.   
3.     <IMG height=250 width=250 Source="PICTURE.JPG">  
4.   
5.     <WRAPPANEL>  
6.         <WRAPPANEL.RESOURCES>  
7.             <STYLE TargetType="Rectangle">  
8.                 <Setter Property="Fill" Value="Black"/>  
9.                 <Setter Property="Width" Value="25"/>  
10.                 <Setter Property="Height" Value="25"/>  
11.                 <Style.Triggers>  
12.                     <EventTrigger RoutedEvent="Rectangle.MouseEnter">  
13.                         <EventTrigger.Actions>  
14.                             <BeginStoryboard>  
15.                                 <Storyboard Storyboard.TargetProperty="(Rectangle.Opacity)">  
16.                                     <DoubleAnimation To="0" Duration="0:0:0.5"/>  
17.                                     <ColorAnimation To="White" Duration="0:0:0.5"  
18.                                       Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"/>  
19.                                 </Storyboard>  
20.                             </BeginStoryboard>  
21.                         </EventTrigger.Actions>  
22.                     </EventTrigger>  
23.                 </Style.Triggers>  
24.             </STYLE>  
25.         </WRAPPANEL.RESOURCES>  
26.   
27.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
28.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
29.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
30.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
31.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
32.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
33.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
34.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
35.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
36.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
37.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
38.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
39.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
40.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
41.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
42.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
43.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
44.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
45.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
46.         <RECTANGLE />       <RECTANGLE />       <RECTANGLE />       <RECTANGLE />      <RECTANGLE />  
47.   
48.     </WRAPPANEL>  
49. </GRID>  

가장먼저 눈에 띄는 부분이 엄청난 분량의 Rectangle입니다. 활용 가능성을 보여드리기 위해 이렇게 많은 객체를 사용했지만 저렇게 사용하는 것이 최적화된 코드는 아니라는걸 알려드립니다! 위 코드에서 가장 중요한 부분은 Rectangle객체를 하나의 Style로 지정하여 마우스 오버가 될때 DoubleAnimation 과 ColorAnimation을 사용해서 뒷부분이 밝혀지는 효과를 주는데 있습니다.

기타 질문은 리플이나 메일로 보내주시면 답변해드리겠습니다.