[C#/WPF] Thumb 엘리먼트 : DragStarted/DragDelta/DragCompleted 이벤트를 사용해 드래그 하기

■ Thumb 엘리먼트 : DragStarted/DragDelta/DragCompleted 이벤트를 사용해 드래그하는 방법을 보여준다.

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="Thumb 엘리먼트 : DragStarted/DragDelta/DragCompleted 이벤트를 사용해 드래그 하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas Margin="10">
        <Canvas Name="canvas"
            Width="200"
            Height="200"
            Background="Green">
            <TextBox Name="textBlock" Canvas.Left="0" Canvas.Top="0"
                Width="{Binding ElementName=canvas,Path=Width}"
                Height="{Binding ElementName=canvas,Path=Height}"
                BorderThickness="0"
                Background="Green"
                Foreground="Yellow"
                Text="Size : 200, 200" />
            <Thumb Name="thumb" Canvas.Left="180" Canvas.Top="180"
                Background="Blue"
                Width="20"
                Height="20" />
        </Canvas>
    </Canvas>
</Window>

 

▶ MainWindow.xaml

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

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

        #region 생성자 - MainWindow()

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

            this.thumb.DragStarted   += thumb_DragStarted;
            this.thumb.DragDelta     += thumb_DragDelta;
            this.thumb.DragCompleted += thumb_DragCompleted;
        }

        #endregion

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

        #region 썸 드래그 시작시 처리하기 - thumb_DragStarted(sender, e)

        /// <summary>
        /// 썸 드래그 시작시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void thumb_DragStarted(object sender, DragStartedEventArgs e)
        {
            this.thumb.Background = Brushes.Orange;
        }

        #endregion
        #region 썸 드래그 델타 처리하기 - thumb_DragDelta(sender, e)

        /// <summary>
        /// 썸 드래그 델타 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            double width  = this.canvas.Width  + e.HorizontalChange;
            double height = this.canvas.Height + e.VerticalChange;

            if((width >= 0) && (height >= 0))
            {
                this.canvas.Width  = width;
                this.canvas.Height = height;

                Canvas.SetLeft(this.thumb, Canvas.GetLeft(this.thumb) + e.HorizontalChange);
                Canvas.SetTop (this.thumb, Canvas.GetTop (this.thumb) + e.VerticalChange  );

                this.textBlock.Text = $"크기 : {canvas.Width}, {canvas.Height}";
            }
        }

        #endregion
        #region 썸 드래그 완료시 처리하기 - thumb_DragCompleted(sender, e)

        /// <summary>
        /// 썸 드래그 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void thumb_DragCompleted(object sender, DragCompletedEventArgs e)
        {
            this.thumb.Background = Brushes.Blue;
        }

        #endregion
    }
}