[C#/WPF] UIElement 클래스 : MouseMove 이벤트를 사용해 마우스 이동시 애니메이션 설정하기

TestProject.zip

다운로드

▶ MainWindow.xaml

<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>

 

728x90

 

▶ MainWindow.xaml.cs

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
    }
}