C++Builder This Is How To Make Your Non-Rectangular Apps Draggable

[FireWind]

This Is How To Make Your Non-Rectangular Apps Draggable
By Yilmaz Yoru August 12, 2021

Для просмотра ссылки Войди или Зарегистрируйся is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs. There is a free C++ Builder Community Edition for students, beginners and startups.

Borderless forms​

Normally we can easily drag application windows by using top bar of the application window. In some applications you may select borderless Form designs (BorderStyle = bsNone). In that time, generally you should allow users to drag your application by touching an image or any UI element (visual components).

Sometimes applications don’t use a regular rectangular form for their main window, they don’t need a form design and they may have different specific shapes (video and music player skins are like these examples), If we want to develop these kind of applications, we must hide window base and borders. In C++ Builder, we can easily develop these kind of transparent FMX applications. FireMonkey (FMX) framework supports moderns ways to manipulate transparency of each UI elements, bitmaps, canvas drawings, and allows you to set pixel colors in ARGB form. Here again users may want to move your transparent applications.

Overriding default Window behavior in C++​

In C++ Builder, basically we can move forms by changing their Left and Top positions to a new X and Y values as below,

void __fastcall TForm1::Button1Click(TObject *Sender)
{
   Form1->Left = X;
   Form1->Top  = Y;
}

We can also drag applications by using OnMouseMove() OnMouseDown() and OnMouseUp() events of a visual component. In our example we will use Image (TImage) component as a visual image, so we can add any image (with alpha color) as a skin of our application. Let’s see how we can drag an application by using image on it.

How can we make a form draggable when the mouse is over an image?​

1. Create a new Multi-Device FMX Application Project, save all project and unit files into a folder.
2. Add a Image (TImage), load an image (may be a .png image with alpha color), arrange your Image, or set Align to Client
3. If you are in code display press F12 to Form Design view
4. Click on the Form Unit and from the Object Inspector set it’s Transparency property checked. (Let’s do a transparent app)
5. We need a Boolean variable drag_form to check if dragging by mouse is started. And we need last x and y positions LX and LY before dragging. So let’s add these to our application as below

//---------------------------------------------------------------------------
#include <fmx.h>
#pragma hdrstop
 
#include "Tranparent_FMX_App_Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.fmx"
TForm1 *Form1;
 
float LX,LY;
bool drag_form =false;
 
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner)
{
}

6. Now we should add OnMouseDown(), OnMouseMove() and OnMouseUp() events of TImage to check if we start to drag , if we are dragging and if we stop dragging. To do this, select your Image (TImage) component, in Object Inspector panel go to events tab and double click to OnMouseDown(), OnMouseMove() and OnMouseUp() events to create these procedures automatically.

In OnMouseDown() event we should set LX and LY to mouse X and Y position on the Image and we should set drag_form to true.
In OnMouseMove() event we should check if we started to drag and we should set position of form to changes in mouse coordinates (X-LX and Y-LY).
In OnMouseUp() event we should set drag_form false, that means we stop dragging when the mouse is up.

How to trap mouse movements in C++​

void __fastcall TForm1::Image1MouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, float X, float Y)
{
 LX = X;
 LY = Y;
 drag_form = true;
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Image1MouseMove(TObject *Sender, TShiftState Shift, float X, float Y)
{
 if(drag_form)
 {
 Form1->Left += X-LX;
 Form1->Top  += Y-LY;
 
 }
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Image1MouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift,   float X, float Y)
{
 drag_form = false;
}

7. Now you can run your application by pressing F9 or Run Button, That’s all.

As you see it is very easy to make your apps draggable by using this method.