# Bunifu Form Drag

## Overview

Bunifu Form Drag is a component designed to bring you seamless integration of drag operations on borderless forms to some desired target on your windows screen.  Here is an illustration of this component in action:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7fmEPVv4n0I819sdaz%2Fuploads%2FRxrRhn968H8P4sbx0O7S%2FMain%20Form%20Drag.gif?alt=media\&token=7715417d-52b4-4a31-8ca0-d63eb07830f7)

## **Getting started**

### Adding Bunifu Form Drag at Design Time

It is quite easy to add a Bunifu form drag at the designer level.

**Step 1:** First, make sure that the form is borderless. This can be done either by setting the **`FormBorderStyle`** property to **`none.`** 

**Step 2:** Find **Bunifu Form Drag** in your toolbox and drag it onto your form as shown below:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7fmEPVv4n0I819sdaz%2Fuploads%2FXpd5TM0tb2O4Ttro9U2t%2FForm%20Drag%20Addition%2002.gif?alt=media\&token=74f6ee0d-60a7-4a3c-addf-daceddfc396b)

{% hint style="info" %}
Note that at this point the form is draggable.
{% endhint %}

### Handling a Drag Operation with Title Bar.

**Step 1:** First**,** create a title bar. This can be done by placing a panel and docking it to the top area of the form as shown below. You can name it as **`pnlTop`**

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7fmEPVv4n0I819sdaz%2Fuploads%2FMnC9aXJvm5EC2CbGWP8r%2FForm%20Panel%20Addition%2003.gif?alt=media\&token=d3ecfeae-00fb-4add-a4eb-e2baf4fddc91)

**Step 2:** In the properties of the Bunifu Form Drag component go to the `TitleBarOptions` property and in the **`TitleBarControl`** property set it with the **pnlTop** control as its value.

**Step 3:** Finally run the application. You have now successfully added a drag operation for a non-borderless form:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7fmEPVv4n0I819sdaz%2Fuploads%2FqpuGMoJwP4P8sc6PNp4k%2FForm%20Panel%20Addition%2004.gif?alt=media\&token=62523aa3-2d29-4c3b-a59a-c3841a97d9eb)

### Adding Bunifu Form Drag at Run Time

To add a Bunifu Form Drag on our form at run-time, use the Load event handler of your form to run the following code:

{% tabs %}
{% tab title="C#" %}

```csharp
private void Form1_Load(object sender, EventArgs e)
{
    BunifuFormDrag bunifuFormDrag = new BunifuFormDrag();
    bunifuFormDrag.ContainerControl = this;
}

```

{% endtab %}

{% tab title="VB.NET" %}

```vbnet
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim bunifuFormDrag As New BunifuFormDrag()
	bunifuFormDrag.ContainerControl = Me
End Sub

```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let's take a deep dive and get insights into the available properties on Bunifu Form Drag.
{% endhint %}

## Properties

### Title Bar Properties

To initiate the drag interaction, this property enables you to select your desired form control (i.e., the title bar e.g, a panel) as an object to initiate a drag operation and apply Drag and Windows Form effects. It contains a list of interactivity options for control set as a title bar of a form.

#### `1.`` `**`(TitleBarControl)`**

This property allows you to get or set a control as the main drag control of a form (e.g., `Panel`, `BunifuPanel`,  etc...) which will be used to move the form to the desired location on the screen.  This control is "normally" docked/anchored on the top part of the Window Form. 

#### **`2. DoubleClickToExpandWindow`**

This property enables you to maximize your Window Form by the operation of double-clicking the control set as a title bar / main-drag control.

#### **`3. Enabled`**

This property sets a Boolean value that determines whether a user can perform drag operations on a Windows Form using the title bar. A value of True enables drag operations using the control set as the title bar and a value of False disables the use of the title bar control for drag operations.

#### **`4. UseBackColor`**

This property gets or sets a Boolean value indicating whether during a docking operation the back colour will be used as a semi-transparent outline which shows where the window will be docked if you release the mouse button at that point.

### Docking Properties

You can set/get the look and feel of the borderless form while docking (i.e., pinning it to the desired location). This could be accomplished by simply dragging the window title bar toward the desktop corners versus the sides. (N.B., the windows form could dock **1/2** or **1/4** size windows vertically or horizontally. 

Here is the list of properties to checkout while setting the docking effects:

#### **`1. ShowDockingIndicatorsColor`**

This property sets and gets a boolean value which when set to **true**, will override the default windows docking colour and apply the custom colour set in the **`DockingIndicatorsColor`** property. (N.b., The indicator is an outline which shows where the window will be docked to).

#### **`2. DockingIndicatorsColor`**

This property allows you to get or set the docking indicator colour. It supports the use of HEX, RGB, and ARGB colour formats. (N.b., this only works when the `ShowDockingIndicator` is set to **true.**

#### **`3. DockingOptions`**

<table><thead><tr><th width="277.7986935750112">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>a) (DockAll)</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to either side of the screen display.</td></tr><tr><td><strong><code>b) DockBottomLeft</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to the bottom left side of the screen display)</td></tr><tr><td><strong><code>c) DockBottomRight</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to the bottom right side of the screen display)</td></tr><tr><td><strong><code>g) DockLeft</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to the left side of the screen display)</td></tr><tr><td><strong><code>h) DockRight</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to the right side of the screen display)</td></tr><tr><td><strong><code>i) DockTopLeft</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to the top-left side of the screen display</td></tr><tr><td><strong><code>j) DockTopRight</code></strong></td><td>This property sets a Boolean value which determines if the Windows Form can be docked to the top-right side of the screen display</td></tr></tbody></table>

#### `4. ShowCursorChange`

This property gets or sets a boolean value which when set to true changes the cursor icon from a `SizeAll` cursor to a `SizeNS` cursor when about to dock the form. The default value is true

### Drag Properties

You can set/get the look and feel of the borderless form while dragging the form to the desired location on the screen. Dragging involves the operation where:

* Users **acquire the** title bar using the mouse on a mouse click&#x20;
* While keeping the title bar selected (i.e., by continuous pressure on the mouse button), the user then **moves the pointing device** to some desired target. This is the “drag” part of the operation.
* Finally, the user **deselects** the title bar — by letting go of the mouse button. This is the “drop” step.

Here are the properties to check-out in the drag properties:

#### `1. AllowOpacityChanges`

This property gets or sets a boolean value which when set to true applies an opacity to the form while dragging the form to a desired area in the display. The opacity value is determined by the `DragOpacity` property.

#### `2. DragOpacity`

This property gets or sets a percentage value which determines the transparency rate of the form while dragging it to a particular location. The lower the percentage, the higher the transparency view of the form will be while on a drag operation.

####

####