[C#/WPF] 엘리먼트를 마우스로 드래그해 이동시키기

▶ 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"
    Title="엘리먼트를 마우스로 드래그해 이동시키기"
    Height="600"
    Width="450">
    <Canvas Name="canvas">
        <Rectangle Name="rectangle"
            Canvas.Left="50"
            Canvas.Top="50"
            Width="100"
            Height="100"
            Fill="Blue" />
    </Canvas>
</Window>

 

728x90

 

▶ MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 드래그 여부
        /// </summary>
        private bool isDragging;

        /// <summary>
        /// 시작 위치
        /// </summary>
        private Point startPoint;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.rectangle.MouseDown        += rectangle_MouseDown;
            this.rectangle.MouseMove        += rectangle_MouseMove;
            this.rectangle.MouseUp          += rectangle_MouseUp;
            this.rectangle.LostMouseCapture += rectangle_LostMouseCapture;
        }

        #endregion

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

        #region 사각형 마우스 DOWN 처리하기 - rectangle_MouseDown(sender, e)

        /// <summary>
        /// 사각형 마우스 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rectangle_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.startPoint = e.GetPosition(this.canvas);

            this.isDragging = true;

            this.rectangle.CaptureMouse();
        }

        #endregion
        #region 사각형 마우스 이동시 처리하기 - rectangle_MouseMove(sender, e)

        /// <summary>
        /// 사각형 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rectangle_MouseMove(object sender, MouseEventArgs e)
        {
            if(this.isDragging)
            {
                Point mousePoint = e.GetPosition(this.canvas);

                Vector vector = mousePoint - this.startPoint;

                this.startPoint = mousePoint;

                Canvas.SetLeft(this.rectangle, Canvas.GetLeft(this.rectangle) + vector.X);
                Canvas.SetTop (this.rectangle, Canvas.GetTop (this.rectangle) + vector.Y);
            }
        }

        #endregion
        #region 사각형 마우스 UP 처리하기 - rectangle_MouseUp(sender, e)

        /// <summary>
        /// 사각형 마우스 UP 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rectangle_MouseUp(object sender, MouseButtonEventArgs e)
        {
            this.isDragging = false;

            Mouse.Capture(null);
        }

        #endregion
        #region 사각형 마우스 캡처 상실시 처리하기 - rectangle_LostMouseCapture(sender, e)

        /// <summary>
        /// 사각형 마우스 캡처 상실시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rectangle_LostMouseCapture(object sender, MouseEventArgs e)
        {
            this.isDragging = false;
        }

        #endregion
    }
}