Flip Image Banner

안녕하세요. 이번시간에는 현재 옥션에서 사용중인 Image Banner를 구현해보도록 하겠습니다. 여러개의 배너(혹은 광고물)이 책장이 넘어가듯이 넘어가는 효과로 이벤트 광고나 베너용으로 활용하면 좋을것 같습니다. 아래는 시연 동영상 입니다.



XAML을 사용해서 기본적인 내용을 구성했으며 C#에서는 이벤트에 따른 Animation호출 부분을 구현했습니다. 먼저 아래는 XAML 소스코드입니다.

view plaincopy to clipboardprint?

1. <WINDOW title="Flip Image Banner - WPF KOREA(http://whatisthat.co.kr)" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Background="Red" Height="275" Width="605" x:Class="FlipImage.Window1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
2.        
3.     <WINDOW.RESOURCES>  
4.                    
5.         <STORYBOARD FillBehavior="Stop" x:Key="TopAnimation" Storyboard.TargetName="TargetTop">  
6.             <DOUBLEANIMATION Storyboard.TargetName="TopSkew" From="0" Duration="0:0:0.1" To="-10" Storyboard.TargetProperty="(SkewTransform.AngleX)" />  
7.             <DOUBLEANIMATION Storyboard.TargetName="TopScale" From="1" Duration="0:0:0.25" To="0" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" />  
8.         </STORYBOARD>  
9.            
10.         <STORYBOARD FillBehavior="Stop" x:Key="BottomAnimation" Storyboard.TargetName="TargetTop">  
11.             <DOUBLEANIMATION Storyboard.TargetName="BottomSkew" From="10" Duration="0:0:0.25" To="0" Storyboard.TargetProperty="(SkewTransform.AngleX)" BeginTime="0:0:0.25" />  
12.             <DOUBLEANIMATION Storyboard.TargetName="BottomScale" From="0" Duration="0:0:0.25" To="1" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" BeginTime="0:0:0.25" />  
13.             <DOUBLEANIMATION Storyboard.TargetName="BottomSkew" From="0" Duration="0:0:0.1" To="5" Storyboard.TargetProperty="(SkewTransform.AngleX)" BeginTime="0:0:0.5" AutoReverse="True" />  
14.             <DOUBLEANIMATION Storyboard.TargetName="BottomScale" From="1" Duration="0:0:0.1" To="0.9" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" BeginTime="0:0:0.5" AutoReverse="True" />  
15.         </STORYBOARD>  
16.            
17.         <IMAGEBRUSH x:Key="TopBrush" Viewbox="0,0,1,0.5" />  
18.         <IMAGEBRUSH x:Key="BottomBrush" Viewbox="0,0.5,1,0.5" />  
19.   
20.     </WINDOW.RESOURCES>  
21.        
22.     <GRID Background="Black" Height="250" Width="600">  
23.            
24.         <RECTANGLE Height="125" Fill="{StaticResource TopBrush}" VerticalAlignment="Top" x:Name="OriginalTop" />  
25.            
26.         <RECTANGLE Height="125" Fill="{StaticResource BottomBrush}" VerticalAlignment="Bottom" x:Name="OriginalBottom" />  
27.            
28.         <RECTANGLE Height="125" Fill="{StaticResource TopBrush}" VerticalAlignment="Top" x:Name="TargetTop" RenderTransformOrigin="0.5,1">  
29.             <RECTANGLE.RENDERTRANSFORM>  
30.                 <TRANSFORMGROUP>  
31.                     <SKEWTRANSFORM x:Name="TopSkew" AngleX="0" />  
32.                     <SCALETRANSFORM x:Name="TopScale" ScaleY="1" />  
33.                 </TRANSFORMGROUP>  
34.             </RECTANGLE.RENDERTRANSFORM>  
35.         </RECTANGLE>  
36.            
37.         <RECTANGLE Height="125" Fill="{StaticResource BottomBrush}" VerticalAlignment="Bottom" x:Name="TargetBottom" RenderTransformOrigin="0,0">  
38.             <RECTANGLE.RENDERTRANSFORM>  
39.                 <TRANSFORMGROUP>  
40.                     <SKEWTRANSFORM x:Name="BottomSkew" AngleX="0" />  
41.                     <SCALETRANSFORM x:Name="BottomScale" ScaleY="1" />  
42.                 </TRANSFORMGROUP>  
43.             </RECTANGLE.RENDERTRANSFORM>  
44.         </RECTANGLE>  
45.         <STACKPANEL Height="30" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20" Orientation="Horizontal">  
46.             <STACKPANEL.RESOURCES>  
47.                 <STYLE TargetType="TextBlock">  
48.                     <Setter Property="FontSize" Value="30"/>  
49.                     <Setter Property="Width" Value="25"/>  
50.                     <Setter Property="Foreground" Value="White"/>  
51.                     <Setter Property="FontFamily" Value="Verdata"/>  
52.                     <Setter Property="FontStyle" Value="Italic"/>  
53.                     <Setter Property="FontWeight" Value="Bold"/>  
54.                     <Setter Property="Cursor" Value="Hand"/>  
55.                     <Setter Property="Opacity" Value="0.5"/>  
56.                     <Style.Triggers>  
57.                         <Trigger Property="IsMouseOver" Value="True">  
58.                             <Setter Property="Opacity" Value="1"/>  
59.                         </Trigger>  
60.                     </Style.Triggers>  
61.                 </STYLE>  
62.             </STACKPANEL.RESOURCES>  
63.             <TEXTBLOCK Text="1" MouseDown="Button_Click" />  
64.             <TEXTBLOCK Text="2" MouseDown="Button_Click" />  
65.             <TEXTBLOCK Text="3" MouseDown="Button_Click" />  
66.             <TEXTBLOCK Text="4" MouseDown="Button_Click" />  
67.             <TEXTBLOCK Text="5" MouseDown="Button_Click" />  
68.             <TEXTBLOCK Text="6" MouseDown="Button_Click" />  
69.         </STACKPANEL>  
70.   
71.   
72.     </GRID>  
73.        
74. </WINDOW>  

다음은 C# 코드입니다.

view plaincopy to clipboardprint?

1. public partial class Window1 : Window   
2. {   
3.   
4.     public Window1()   
5.     {   
6.         InitializeComponent();   
7.   
8.         OriginalTop.Fill = (Resources["TopBrush"] as ImageBrush).Clone();   
9.         OriginalBottom.Fill = (Resources["BottomBrush"] as ImageBrush).Clone();   
10.         TargetTop.Fill = (Resources["TopBrush"] as ImageBrush).Clone();   
11.         TargetBottom.Fill = (Resources["BottomBrush"] as ImageBrush).Clone();   
12.            
13.         (Resources["BottomAnimation"] as Storyboard).Completed += new EventHandler(BottomAnimation_Completed);   
14.         (Resources["TopAnimation"] as Storyboard).Completed += new EventHandler(TopAnimation_Completed);   
15.   
16.     }   
17.   
18.     private void Button_Click(object sender, RoutedEventArgs e)   
19.     {   
20.         TextBlock SelectedTextBlock = sender as TextBlock;   
21.         ChangeTarget("pack://Application:,,,/" + SelectedTextBlock.Text + ".jpg");   
22.     }   
23.   
24.     private void ChangeTarget(String Source)   
25.     {   
26.         ImageSource OrigianlSource = (TargetTop.Fill as ImageBrush).ImageSource as ImageSource;   
27.         ImageSource TargetSource = new BitmapImage(new Uri(Source));   
28.   
29.         BottomScale.ScaleY = 0;   
30.   
31.         (OriginalTop.Fill as ImageBrush).ImageSource = TargetSource;   
32.         (TargetTop.Fill as ImageBrush).ImageSource = OrigianlSource;   
33.         (TargetBottom.Fill as ImageBrush).ImageSource = TargetSource;   
34.   
35.         (Resources["TopAnimation"] as Storyboard).Begin(this);   
36.         (Resources["BottomAnimation"] as Storyboard).Begin(this);   
37.     }   
38.     void TopAnimation_Completed(object sender, EventArgs e)   
39.     {   
40.         (TargetTop.Fill as ImageBrush).ImageSource = (TargetBottom.Fill as ImageBrush).ImageSource as ImageSource;   
41.     }   
42.   
43.     void BottomAnimation_Completed(object sender, EventArgs e)   
44.     {   
45.         (OriginalBottom.Fill as ImageBrush).ImageSource = (TargetBottom.Fill as ImageBrush).ImageSource as ImageSource;   
46.     }   
47. }  

public partial class Window1 : Window
{

    public Window1()
    {
        InitializeComponent();

        OriginalTop.Fill = (Resources["TopBrush"] as ImageBrush).Clone();
        OriginalBottom.Fill = (Resources["BottomBrush"] as ImageBrush).Clone();
        TargetTop.Fill = (Resources["TopBrush"] as ImageBrush).Clone();
        TargetBottom.Fill = (Resources["BottomBrush"] as ImageBrush).Clone();
        
        (Resources["BottomAnimation"] as Storyboard).Completed += new EventHandler(BottomAnimation_Completed);
        (Resources["TopAnimation"] as Storyboard).Completed += new EventHandler(TopAnimation_Completed);

    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        TextBlock SelectedTextBlock = sender as TextBlock;
        ChangeTarget("pack://Application:,,,/" + SelectedTextBlock.Text + ".jpg");
    }

    private void ChangeTarget(String Source)
    {
        ImageSource OrigianlSource = (TargetTop.Fill as ImageBrush).ImageSource as ImageSource;
        ImageSource TargetSource = new BitmapImage(new Uri(Source));

        BottomScale.ScaleY = 0;

        (OriginalTop.Fill as ImageBrush).ImageSource = TargetSource;
        (TargetTop.Fill as ImageBrush).ImageSource = OrigianlSource;
        (TargetBottom.Fill as ImageBrush).ImageSource = TargetSource;

        (Resources["TopAnimation"] as Storyboard).Begin(this);
        (Resources["BottomAnimation"] as Storyboard).Begin(this);
    }
    void TopAnimation_Completed(object sender, EventArgs e)
    {
        (TargetTop.Fill as ImageBrush).ImageSource = (TargetBottom.Fill as ImageBrush).ImageSource as ImageSource;
    }

    void BottomAnimation_Completed(object sender, EventArgs e)
    {
        (OriginalBottom.Fill as ImageBrush).ImageSource = (TargetBottom.Fill as ImageBrush).ImageSource as ImageSource;
    }
}

Skew Transform과 ScaleTransform을 사용해서 간단하게 책장을 넘어가는 효과를 구현했습니다. 그리고 현재 페이지(위쪽,아래쪽) 다음페이지(위쪽 아래쪽)을 표현하기 위해서 4개의 객체로 분리해서 사용했으며 ChangeTarget 함수를 이용합니다. 시간관계상 설명은 여기까지로 하고, 기타 질문은 리플이나 메일로 보내주시기 바랍니다.