Search code examples
delphistyles

Delphi Project with custom Style

I want to create a Delphi project with a custom Style, like the below image.

image

As you can see, the MainForm is transparent, and there are some components inside of it.

How can I create this transparent MainForm?

P.S:I want to create VCL project and i drawn this image by Photoshop.

Solution

  • Assuming you're using Firemonkey since you dont specify VCL or FMX.

    You don't really need to create a style for this. Rather a simpler way would be to:

    1. Set the form transparent property to True
    2. Place a TRectangle on the form and make it align to Most left and adjust the color etc to your liking.
    3. Place another TRectangle on your form and set the alignment to Client. You can then adjust the Opacity property for transparency, the fill property for color and then the stroke for the border.
    4. I see a small space between the left and right in the photo. This can be done by setting a margin left value on the second TRectangle you placed.

    Now this should look like you what want it to be provided you disabled the border of the form. There is 1 more thing we need to do to avoid having the controls show as transparent. We need to place a layout on the form. Not the rectangle. If you place the controls on the rectangle with opacity the controls will also be transparent. If you want the controls to have the same transparency value place it on the rectangle. Otherwise do the following:

    1. Place a TLayout on the form. Not the rectangle.
    2. Set the align property to Contents. This will make it overlap everything.
    3. Set the margin left property of the layout to the width of the left rectangle you placed + the margin value of the client rectangle you placed to compensate for the little space.
    4. Place your controls on the layout and they should show with default opacity.

    One last thing to do is implement window drag. Assuming you disabled the border, your users will not be able to move the window at all since there is no border to drag. On the MouseDown event of the component you want the drag to start add the following code:

    procedure TForm1.rctngl1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Single);
begin
  StartWindowDrag;
end;

    You should be all done now.

    EDIT: I made an example after posting this answer: FMX Semi Transparent Form