Click here to Skip to main content
Click here to Skip to main content

How To Make a Simple Draggable-Resizable Text Box

, 4 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple draggable-resizable TextBox control inherited from RichTextBox

Introduction

Few months ago, when I needed to make my textbox draggable and resizable, I searched on the Internet and tried to program it.

This is a simplified code from my Chart-Drawing project. The code just shows a beginner how to move a control by mouse drag and how to resize it at run-time.

About "how to set transparency on textbox background" and "flicker-free moving", I will write in another article.

Feel free to comment. Share to be shared !!!

EDIT: In the last version, I forgot to attach the source, updated.

Background

Click to Add TextBox Button to toggle TextBox Mode, then click to the Panel below, new TextBox will be added to the Panel. The Select Mode Button will toggle Select Mode, add this Mode, you cannot click and add TextBox to Panel.

Using the Code

The main idea of "move by mouse dragging" is using 3 events : MouseDown, MouseMove and MouseUp.

  • MouseDown: Set the Flag to TRUE and save clicked point (Start Point)
  • MouseMove: if Flag is TRUE, change the Location properties of Control (using the distance of Start Point and current mouse location)
  • MouseUp: Set the Flag to FALSE
public void SetMoveFunction()
        {
            bool isDragging = false;
            Point StartPoint = Point.Empty;
            this.MouseDown += delegate(object sender, MouseEventArgs e)
            {
                if (e.Button == MouseButtons.Left)
                {
                    isDragging = true;
                    StartPoint = new Point(e.X, e.Y);
                    this.Capture = true;
                }
            };
            this.MouseUp += delegate(object sender, MouseEventArgs e)
            {
                this.Cursor = Cursors.Arrow;
                isDragging = false;
                this.Capture = false;
            };
            this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (isDragging)
                {
                    this.Cursor = Cursors.NoMove2D;
                    this.Left = Math.Max(0, e.X + this.Left - StartPoint.X);
                    this.Top = Math.Max(0, e.Y + this.Top - StartPoint.Y);
                }
            };
        }

As you see, I wrote a method which called delegate of control's MouseDown-MouseUp-MouseMove events. So, in the Constructor class, just call SetMoveFunction() and your control is draggable. Big Grin | :-D

this.Capture = true;

This is a trick! Control.Capture property receives mouse input whether or not the cursor is within control's borders. It will make the dragging operation smoother. But remember to set it back to FALSE when dragging is over.

Next is a resize function. The main idea is add 8 square label to control (Handles), the handles location will be: east, west, south, north, northeast, northwest, southeast, southwest.

When the user "moves" (by dragging) the handle, it will move and the size of control will be set based on handle location. These methods are written at Resize Methods region in the source. Please download the source and feel free to comment if you have any questions.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nguyen.H.H.Dang
Software Developer (Junior)
Vietnam Vietnam
No Biography provided

Comments and Discussions

 
Questionsource files not downloadable PinprofessionalSiddhu Joshi4-Jul-14 22:41 
AnswerRe: source files not downloadable PinprofessionalNguyen.H.H.Dang5-Jul-14 0:20 
GeneralRe: source files not downloadable PinprofessionalSiddhu Joshi5-Jul-14 0:32 
QuestionSource files cannot be downloadable Pinmemberfredatcodeproject4-Jul-14 12:50 
AnswerRe: Source files cannot be downloadable PinprofessionalNguyen.H.H.Dang5-Jul-14 0:20 
GeneralRe: Source files cannot be downloadable Pinmemberfredatcodeproject5-Jul-14 0:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150123.1 | Last Updated 4 Jul 2014
Article Copyright 2014 by Nguyen.H.H.Dang
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid