[C#/WPF] DoubleAnimation 엘리먼트 : 스크롤 슬라이드 사용하기

■ DoubleAnimation 엘리먼트를 사용해 스크롤 슬라이드 애니메이션을 만드는 방법을 보여준다.

TestProject.zip

다운로드

▶ MainWindow.xaml

<Window x:Class="TestProject.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="620"
    Height="490"
    Title="DoubleAnimation 엘리먼트 : 스크롤 슬라이드 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DoubleAnimation x:Key="MoveAnimationKey"
            Storyboard.TargetName="imageSlideStackPanel"
            Storyboard.TargetProperty="(Canvas.Left)"
            SpeedRatio="2" />
    </Window.Resources>
    <Grid>
        <Canvas
            Width="600"
            Height="450"
            ClipToBounds="True">
            <StackPanel x:Name="imageSlideStackPanel"
                Canvas.Left="0"
                Height="450"
                Orientation="Horizontal">
                <Image Width="600" Height="450" Source="IMAGE/1.png" />
                <Image Width="600" Height="450" Source="IMAGE/2.png" />
                <Image Width="600" Height="450" Source="IMAGE/3.png" />
                <Image Width="600" Height="450" Source="IMAGE/4.png" />
                <Image Width="600" Height="450" Source="IMAGE/5.png" />
                <Image Width="600" Height="450" Source="IMAGE/6.png" />
            </StackPanel>
        </Canvas>
        <StackPanel
            Margin="5"
            Height="30"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Orientation="Horizontal">
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Width"      Value="25"      />
                    <Setter Property="Opacity"    Value="0.5"     />
                    <Setter Property="Foreground" Value="White"   />
                    <Setter Property="FontFamily" Value="Verdata" />
                    <Setter Property="FontSize"   Value="30"      />
                    <Setter Property="FontWeight" Value="Bold"    />
                    <Setter Property="FontStyle"  Value="Italic"  />
                    <Setter Property="Cursor"     Value="Hand"    />
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" Value="1" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </StackPanel.Resources>
            <TextBlock Text="1" MouseDown="textBlock_MouseDown"></TextBlock>
            <TextBlock Text="2" MouseDown="textBlock_MouseDown"></TextBlock>
            <TextBlock Text="3" MouseDown="textBlock_MouseDown"></TextBlock>
            <TextBlock Text="4" MouseDown="textBlock_MouseDown"></TextBlock>
            <TextBlock Text="5" MouseDown="textBlock_MouseDown"></TextBlock>
            <TextBlock Text="6" MouseDown="textBlock_MouseDown"></TextBlock>
        </StackPanel>
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace TestProject
{
    /// <summary>
    /// 테스트 윈도우
    /// </summary>
    public partial class TestWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - TestWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public TestWindow()
        {
            InitializeComponent();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 텍스트 블럭 마우슨 버튼 하강시 처리하기 - textBlock_MouseDown(sender, e)

        /// <summary>
        /// 텍스트 블럭 마우슨 버튼 하강시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void textBlock_MouseDown(object sender, RoutedEventArgs e)
        {
            DoubleAnimation doubleAnimation = Resources["MoveAnimationKey"] as DoubleAnimation;
            TextBlock       textBlock       = sender as TextBlock;

            doubleAnimation.To = -(int.Parse(textBlock.Text) - 1) * 600;

            this.imageSlideStackPanel.BeginAnimation(Canvas.LeftProperty, doubleAnimation, HandoffBehavior.Compose);
        }

        #endregion
    }
}