ICODEBROKER

<Window x:Class="TestProject.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="800"

    Height="600"

    Title="UIElement 클래스 : MouseMove 이벤트를 사용해 마우스 이동시 애니메이션 설정하기"

    FontFamily="나눔고딕코딩"

    FontSize="16">

    <Grid>

        <Border

            HorizontalAlignment="Center"

            VerticalAlignment="Center"

            BorderThickness="1"

            BorderBrush="Black">

            <Canvas

                Width="400"

                Height="400">

                <Canvas.Resources>

                    <Style TargetType="Image">

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

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

                        <Setter Property="Source" Value="sample.jpg" />

                        <Setter Property="Stretch" Value="Fill"       />

                    </Style>

                </Canvas.Resources>

                <Canvas Name="canvas1"

                    Width="400"

                    Height="400"

                    Background="White"

                    SnapsToDevicePixels="True">

                    <Canvas.Clip>

                        <RectangleGeometry Rect="0 0 400 100" />

                    </Canvas.Clip>

                    <Image Name="image1" />

                </Canvas>

                <Canvas Name="canvas2"

                    Width="400"

                    Height="400"

                    Background="White"

                    SnapsToDevicePixels="True">

                    <Canvas.Clip>

                        <RectangleGeometry Rect="0 100 400 100" />

                    </Canvas.Clip>

                    <Image Name="image2" />

                </Canvas>

                <Canvas Name="canvas3"

                    Width="400"

                    Height="400"

                    Background="White"

                    SnapsToDevicePixels="True">

                    <Canvas.Clip>

                        <RectangleGeometry Rect="0 200 400 100" />

                    </Canvas.Clip>

                    <Image Name="image3" />

                </Canvas>

                <Canvas Name="canvas4"

                    Width="400"

                    Height="400"

                    Background="White"

                    SnapsToDevicePixels="True">

                    <Canvas.Clip>

                        <RectangleGeometry Rect="0 300 400 100" />

                    </Canvas.Clip>

                    <Image Name="image4" />

                </Canvas>

            </Canvas>

        </Border>

    </Grid>

</Window>

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Windows.Media.Animation;

namespace TestProject

{

    /// <summary>

    /// 메인 윈도우

    /// </summary>

    public partial class MainWindow : Window

    {

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>

        /// 이미지 애니메이션 1

        /// </summary>

        private DoubleAnimation imageAnimation1 = new DoubleAnimation();

        /// <summary>

        /// 이미지 애니메이션 2

        /// </summary>

        private DoubleAnimation imageAnimation2 = new DoubleAnimation();

        /// <summary>

        /// 이미지 애니메이션 3

        /// </summary>

        private DoubleAnimation imageAnimation3 = new DoubleAnimation();

        /// <summary>

        /// 이미지 애니메이션 4

        /// </summary>

        private DoubleAnimation imageAnimation4 = new DoubleAnimation();

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>

        /// 생성자

        /// </summary>

        public MainWindow()

        {

            InitializeComponent();

            this.canvas1.MouseMove += canvas1_MouseMove;

            this.canvas2.MouseMove += canvas2_MouseMove;

            this.canvas3.MouseMove += canvas3_MouseMove;

            this.canvas4.MouseMove += canvas4_MouseMove;

            Canvas.SetLeft(image1, 0);

            Canvas.SetLeft(image2, 0);

            Canvas.SetLeft(image3, 0);

            Canvas.SetLeft(image4, 0);

        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        //////////////////////////////////////////////////////////////////////////////// Event

        #region 캔버스 1 마우스 이동시 처리하기 - canvas1_MouseMove(sender, e)

        /// <summary>

        /// 캔버스 1 마우스 이동시 처리하기

        /// </summary>

        /// <param name="sender">이벤트 발생자</param>

        /// <param name="e">이벤트 인자</param>

        private void canvas1_MouseMove(object sender, MouseEventArgs e)

        {

            SetAnimationPosition(e.GetPosition(this.canvas1).X);

            this.imageAnimation1.SpeedRatio = 4;

            this.imageAnimation2.SpeedRatio = 2;

            this.imageAnimation3.SpeedRatio = 1;

            this.imageAnimation4.SpeedRatio = 0.5;

            BeginAnimation();

        }

        #endregion

        #region 캔버스 2 마우스 이동시 처리하기 - canvas2_MouseMove(sender, e)

        /// <summary>

        /// 캔버스 2 마우스 이동시 처리하기

        /// </summary>

        /// <param name="sender">이벤트 발생자</param>

        /// <param name="e">이벤트 인자</param>

        private void canvas2_MouseMove(object sender, MouseEventArgs e)

        {

            SetAnimationPosition(e.GetPosition(this.canvas2).X);

            this.imageAnimation1.SpeedRatio = 2;

            this.imageAnimation2.SpeedRatio = 4;

            this.imageAnimation3.SpeedRatio = 1;

            this.imageAnimation4.SpeedRatio = 0.5;

            BeginAnimation();

        }

        #endregion

        #region 캔버스 3 마우스 이동시 처리하기 - canvas3_MouseMove(sender, e)

        /// <summary>

        /// 캔버스 3 마우스 이동시 처리하기

        /// </summary>

        /// <param name="sender">이벤트 발생자</param>

        /// <param name="e">이벤트 인자</param>

        private void canvas3_MouseMove(object sender, MouseEventArgs e)

        {

            SetAnimationPosition(e.GetPosition(this.canvas3).X);

            this.imageAnimation1.SpeedRatio = 0.5;

            this.imageAnimation2.SpeedRatio = 2;

            this.imageAnimation3.SpeedRatio = 4;

            this.imageAnimation4.SpeedRatio = 1;

            BeginAnimation();

        }

        #endregion

        #region 캔버스 4 마우스 이동시 처리하기 - canvas4_MouseMove(sender, e)

        /// <summary>

        /// 캔버스 4 마우스 이동시 처리하기

        /// </summary>

        /// <param name="sender">이벤트 발생자</param>

        /// <param name="e">이벤트 인자</param>

        private void canvas4_MouseMove(object sender, MouseEventArgs e)

        {

            SetAnimationPosition(e.GetPosition(this.canvas4).X);

            this.imageAnimation1.SpeedRatio = 0.5;

            this.imageAnimation2.SpeedRatio = 1;

            this.imageAnimation3.SpeedRatio = 2;

            this.imageAnimation4.SpeedRatio = 4;

            BeginAnimation();

        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 애니메이션 위치 설정하기 - SetAnimationPosition(leftPosition)

        /// <summary>

        /// 애니메이션 위치 설정하기

        /// </summary>

        /// <param name="leftPosition">왼쪽 위치</param>

        private void SetAnimationPosition(double leftPosition)

        {

            this.imageAnimation1.To = leftPosition;

            this.imageAnimation2.To = leftPosition;

            this.imageAnimation3.To = leftPosition;

            this.imageAnimation4.To = leftPosition;

        }

        #endregion

        #region 애니메이션 시작하기 - BeginAnimation()

        /// <summary>

        /// 애니메이션 시작하기

        /// </summary>

        private void BeginAnimation()

        {

            this.image1.BeginAnimation(Canvas.LeftProperty, this.imageAnimation1, HandoffBehavior.Compose);

            this.image2.BeginAnimation(Canvas.LeftProperty, this.imageAnimation2, HandoffBehavior.Compose);

            this.image3.BeginAnimation(Canvas.LeftProperty, this.imageAnimation3, HandoffBehavior.Compose);

            this.image4.BeginAnimation(Canvas.LeftProperty, this.imageAnimation4, HandoffBehavior.Compose);

        }

        #endregion

    }

}