Dragging in WinForms using Bunifu UI
In designing applications that make use of customized Windows Forms such as Browser Refresh, one often runs into the pending need of providing a window-dragging feature where the end-user is able to hold down the custom window or any one of its controls and drag the form to any area of the screen. Oftentimes such a feature resides within a Form’s title section.
Here’s an example:
Now, this is not a feature that’s provided out-of-the-box in .NET WinForms, but the same can be achieved seamlessly using Bunifu’s Drag control which is featured as a component.
In this short article, we’ll be taking a quick look at how to integrate this feature inside a very basic custom borderless form; so let’s get our design-gears running…
As always, ensure you have a copy of the Bunifu UI Framework library. Use the discount code WK20 to get a 20% discount!
The Design Process…
- Launch Visual Studio and create a new WinForms Project of whatever language you’d prefer; we’ll be working with both C# and VisualBasic in our code samples. Once done, you’ll have your very first form created:
- Next, in order to set the form window to borderless, you can either use the FormBorderStyle property and setting it to None or dragging the BunifuEllipse component to your newly created Form:
- Once done, we can now move to adding the BunifuDrag component inside our Form. Inside the Toolbox, you’ll find it named BunifuDragControl; hold it and drag it onto the Form.
- You’ll see the property TargetControl among the list of properties within the component; head over to it, click on the drop-down and select your Form’s name — in our case the Form name is set to “Form1”.
- Run your project: below is a preview of the final output…
Now, say we want to add a title-section to our custom borderless Form… Here we can use a Panel control docked to the Top of our Form and set the TargetControl property of our BunifuDrag component to the panel we’ve added.
Let‘s’ illustrate how this would be done:
- Drag a Panel control to our borderless Form and set the Dock property to Top; you can change the Panel’s BackColor property to another distinct color in order to differentiate it visually from the Form’s:
- We move to the BunifuDrag component; click on the component and go to its Properties. Change the TargetControl property to the Panel control you’ve added — you’ll see its name included in the drop-down:
Here’s a final preview of the Form in action:
With very little effort, we’ve been able to achieve what, for many, would take some extra time thinking and/or implementing such a feature in WinForms.
But… we’re not yet actually done with this nice little component. There’s more to it. Let’s go through the extra list of properties that this component comes with:
- The Fixed property allows you to set the movement of a Form using any targeted control or movement of the targeted control within its Form. This means that you can allow either the control you’ve targeted to be moved by setting the Fixed property to False or the Form itself to be moved by setting the same property to True. By default it’s set to True.
- Once we set our BunifuDrag component’s Fixed property to False, it will allow us to move any control that we’ve targeted in our custom Form. Let’s illustrate this feature using a standard WinForms Button added to the borderless Form we’ve just created:
- Notice that now the TargetControl property has been changed to button1 while the Fixed property is set to False:
There are two more properties we’ve not yet touched and they are the Horizontal and Vertical properties.
- The Vertical property, when set to True is used to allow any control or Form set as the TargetControl to move in the vertical direction in a Form or screen respectively. This means that whenever you want your Form to be moved in the vertical direction of your Desktop screen, you can do this by setting this property to True; otherwise, set it to False to allow only horizontal movement. Please note that with Forms, these two properties will work only when the Fixed property is set to True.
Below is an illustration of our custom borderless Form with the Vertical property set to False and the Fixed property set to True:
Likewise, here’s an illustration of our custom borderless Form with the Horizontal property set to False and the Fixed property set to True:
And to wrap things up, we can include events that allow our custom borderless Form to change its cursor once we begin dragging and then automatically default once we’re done with the same. For this feature, we will use both the MouseDown and MouseUp Panel events, not the Form’s events.
Below are code samples for the events to be implemented in our custom Form:
Having looked at all these angles when working with the BunifuDrag control, I’m pretty sure you’ve had a fabulous taste of the dynamics that come with this quintessential component in Bunifu’s UI library.
Conclusions
Custom Windows Forms are for the most part the pace-setters when it comes to designing uniquely dynamic and radical applications in today’s visual software-product markets. It seems as though we’re pushed to the fact that our apps need to look and feel different from legacy Windows applications such as Notepad, and that in itself is a reason enough to yield to the pressures of better product designs in this ever-changing market. Try Browser Refresh for example and see the worth of this approach…
With that much written, I’d love to leave you with a quote:
“I think there is a profound and enduring beauty in simplicity; in clarity, in efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.” — Johny Ive.
As always, have fun designing and coding with Bunifu UI.
