.NET 1.1+

Creating a Draggable Borderless Form

For programs that require a non-standard interface, you can remove the borders of your forms. Once removed however, the user has no title bar to use to allow the form to be repositioned. This article describes how to allow dragging of a borderless form.

Identifying Form Dragging

To allow a form to be dragged when it has no border is a reasonably simple task. By capturing the position of the mouse when the primary button is pressed and tracking any movement until the button is released, the correct location of the form can be continuously calculated and repositioning can occur accordingly. The technique for this uses a three-stage process.

Stage 1 - Capture the Pressing of the Mouse Button

The initial press of the mouse button can be captured using the MouseDown event of the form. In this event, we need to do two things. Firstly, set a local flag so that the form knows that the user is dragging. Secondly, record the position of the mouse pointer. The position of the pointer is taken relative to the form to be used as an offset during the calculation in stage 2.

Stage 2 - Capture Mouse Movement and Relocate the Form

As the mouse moves over the form, the MouseMove event is called continuously. Within this event, we obtain the mouse pointer position relative to the screen's origin. If the mouse pointer had started at the origin of the form, this would be the desired position of the form. However, it is more likely that the user started dragging from some other position so the offset stored in stage 1 is subtracted from the current position to find the new location for the form. This process is not executed if the Boolean flag has not been set.

Stage 3 - Capture the Release of the Mouse Button

When the user stops dragging the form and releases the mouse button, the repositioning is complete. Within the MouseUp event the Boolean flag is reset so that further movements are ignored.

Creating the Borderless Form

This tutorial requires the creation of a new Windows Forms project. You can use ay version of Visual Studio or another development environment to create this. Create the project, naming it DraggableBorderlessFormExample. The project will be generated containing a single form. To prepare the form, change the FormBorderStyle property to None. The form's title bar and borders will disappear.

Adding a Close Button

Once the form has been set to be borderless, it is difficult to close the running program. To make it easier for novice users, we can add a button to the form. Add a small button to the form and set its Id to CloseButton. Set the text of the button to an appropriate string. Your completed form design should now be similar to that below:

To make the form usable the close button's functionality must now be added. Double-click the button to generate a Click event and add the code to close the form. If you wish, you can then run the program and check that the close button works.

private void CloseButton_Click(object sender, EventArgs e)
{
    Close();
}

Adding the State Variables

The form requires two private variables for storing the status of the dragging operation. A Boolean value will indicate when the user has depressed the mouse button. The offset of the mouse pointer at the start of the operation compared to the origin of the form will be stored in a Point variable.

Add the following two declarations to the form's class:

private bool dragging;
private Point offset;