BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Programming
.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:

Borderless Windows Form

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;

Adding the Events

The code to control the dragging operation must now be added to the form. The following three sections describe each of the three events that must be captured and processed.

MouseDown Event

The first event to add code to is the MouseDown event. This event is fired when the user initially depresses the mouse button. The event arguments include the current position of the mouse pointer relative to the form. This is simply stored in the offset variable. To indicate that dragging is in progress, the dragging flag is also set.

MouseMove Event

In the form's MouseMove event, the first thing to check is that the user is currently dragging. If the dragging flag is not set, no action takes place as this would cause inappropriate movement of the form. If the dragging flag is set, the current position of the mouse pointer is extracted from the event arguments. This is converted to an offset relative to the screen's origin using the PointToScreen method, which both accepts and returns a Point.

Now that the new location and the original offset are both known, the desired form location can be calculated by subtracting the X and Y co-ordinates of the original offset from the new screen location. The form can now be moved to the calculated position.

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    if (dragging)
    {
        Point currentScreenPos = PointToScreen(e.Location);
        Location = new Point(currentScreenPos.X - offset.X, currentScreenPos.Y - offset.Y);
    }
}

MouseUp event

The final event to capture is the MouseUp event that occurs when the user releases the mouse button. When this is fired, the dragging flag is cleared. This stops any further mouse movement from incorrectly repositioning the form.

private void Form1_MouseUp(object sender, MouseEventArgs e)
{
    dragging = false;
}

Testing the Program

The code is now complete. To test, execute the program and try dragging any part of the grey surface of the form.

31 July 2007