VCL UI Design Challenge for Delphi Developers 💡

[bravesofts 24]

🔥 Who can accurately recreate this UI in Delphi VCL? 🔥

----

👉 Rules of the challenge:

• No third-party components – Only pure VCL!
• Windows API calls only – No hacks like setting a blurred wallpaper.
• True glass blur effect – The UI must feature real-time Gaussian Blur, not a fake overlay.
• Resizable & smooth movement – The form should be fully resizable and draggable without lag.
• Performance separation – The blur effect must run on a separate thread, ensuring that UI interactions stay smooth.
• Native Windows 11 style – The form should have real rounded corners, using the native Windows 11 API.

Update on the challenge requirements:

• Regarding Resizing, and even Moving, the developer may revert the form’s design to be Normal in terms of background and borders (to make it easier for everyone to participate and to minimize code for smoother application performance).
• Regarding updating the background when the form does not move, you are also not required to provide this background capture (meaning we want everyone to participate, thank you).

---

Happy birthday and a new year for Delphi—and every year, becomes stronger and better...

---

🚀 Fun fact: The login form shown in the image is actually running on Windows XP! 🤯

💬 Can you achieve this in Delphi VCL? Post your best attempt below! 👇

----

Edited February 14 by bravesofts
update Challenge requirements

[Vandrovnik 217]

The background is a static image?

[bravesofts 24]

1 minute ago, Vandrovnik said:

The background is a static image?

No, the background is not a static image. The form background is dynamically captured in real-time, just like a real glass window. It continuously updates to reflect any changes happening behind the form, creating a true transparent and blurred glass effect. 🚀

[Anders Melander 1894]

6 hours ago, bravesofts said:

Post your best attempt below!

Why?

 

6 hours ago, bravesofts said:

Fun fact: The login form shown in the image is actually running on Windows XP!

In a browser?

 

[bravesofts 24]

4 minutes ago, Anders Melander said:

In a browser?

in fact your reply is correct,
BUT MY VCL WINDOW STILL DO THE SAME !!

[PeaShooter_OMO 18]

12 hours ago, bravesofts said:

Resizable & smooth movement – The form should be fully resizable and draggable without lag.

Is that form resizable and draggable on the web page without third party frameworks?

 

There are a few ways that I can think of that you can use to do this with pure non-third-party VCL. Many component authors will find this easy to do.

 

If perhaps you are fishing for a solution then consider asking. Someone might even spend the time to show you.

Edited February 14 by PeaShooter_OMO

[Der schöne Günther 323]

I don't understand why there should be a constant recalculation of the "blur" effect. There is a background image, and a small portion of it in the middle has its background blurred. Isn't it always the same part of the image that is blurred?

 

If the window becomes smaller, I would just crop the background image instead of re-scaling it.

[PeaShooter_OMO 18]

34 minutes ago, Der schöne Günther said:

I don't understand why there should be a constant recalculation of the "blur" effect. There is a background image, and a small portion of it in the middle has its background blurred. Isn't it always the same part of the image that is blurred?

 

If the window becomes smaller, I would just crop the background image instead of re-scaling it.

One of his challenge requests is:  Resizable & smooth movement – The form should be fully resizable and draggable without lag

 

If the form is to be movable then what is behind it and what would be coming through it via the blur/transparency will change thus the constant re-blurring.

All this is moot. The OP started this challenge from a false or at least diverted premise which makes me question the motives. Unless the OP comes clean on what he/she wants I would not bother.

Edited February 14 by PeaShooter_OMO

[Der schöne Günther 323]

To me, the form looks like is is that picture, with a transparent "blur" part in the middle.

 

3 hours ago, PeaShooter_OMO said:

Unless the OP comes clean on what he/she wants I would not bother.

He/she has accomplished the shown part in pure VCL and is, understandably, proud of it.

 

For myself, I am not going to try because I don't see the necessity to use the VCL for this, I would have made it in HTML/CSS. Still, I would be interested how this should ideally be done with good, old VCL.

[bravesofts 24]

The Challenge Requirement has been updated. 😊🚀🔥

[FPiette 388]

18 hours ago, bravesofts said:

Who can accurately recreate this UI in Delphi VCL?

What do we win?

[Lars Fosdal 1806]

Just now, FPiette said:

What do we win?

Lifetime support responsibility? 😉 

[bravesofts 24]

You have earned an abundance of love and respect over the years, especially through your outstanding contributions to UI design. I know you can do it—haha, you've already proven yourself time and time again!

[bravesofts 24]

4 minutes ago, FPiette said:

What do we win?

You have earned an abundance of love and respect over the years, especially through your outstanding contributions to UI design. I know you can do it—haha, you've already proven yourself time and time again!

[Serge_G 90]

Just saw, this challenge. It's for birthday, so I assume Delphi 12.

For now, I am working on FMX Styles but Appearances (themes) in VCL is very similar so if working on TStyleManager is accepted, I think I should accept this challenge 🤔satisfying my curiosity

[bravesofts 24]

On 2/18/2025 at 8:26 AM, Serge_G said:

Just saw, this challenge. It's for birthday, so I assume Delphi 12.

For now, I am working on FMX Styles but Appearances (themes) in VCL is very similar so if working on TStyleManager is accepted, I think I should accept this challenge 🤔satisfying my curiosity

Sorry for that. TStyleManager uses custom resizing instead of the native Windows border, meaning the window won't have a native border & shadow when resizing. The form should be fully resizable and draggable without lag.

--

To help you move forward, try this technique first:
Delphi Borderless Form

This is a good starting point. Regarding rounded corners, the challenge primarily targets Windows 11, but support for older versions down to XP is still important.

--

For the glass blur effect, you should use the provided Windows API. Otherwise, if you implement your own workaround, the blur effect must run on a separate thread to ensure UI interactions remain smooth.

--

Third-party components are not allowed. The window resizing and movement must be smoothly updated without high CPU usage. The app should run as fast and responsively as possible.

---

Thank you for your interest! 😊

 

[Yaron 57]

I'm using a layered window to do a transparent UI effect over video, but as far as I know, you can't do the glass effect in hardware using standard WinAPI, I believe you have to use the composition API for that (is it still considered WinAPI?).

 

If no video in the background then it's simple enough to use GDI+ to create an anti-aliased round rectangle (I have pure pascal code to do it, but it's slower), Gaussian blur copy from the background image on paint, etc.

 

You'd also have to intercept the hittest message to allow resizing/moving of a borderless window.

Edited Thursday at 01:35 PM by Yaron

[bravesofts 24]

8 hours ago, Yaron said:

I believe you have to use the composition API for that (is it still considered WinAPI?).

Windows Composition API Is Still WinAPI ?

• Even though it’s sometimes called the “composition API,” functions like SetWindowCompositionAttribute or DwmSetWindowAttribute are exported from system DLLs (e.g., user32.dll or dwmapi.dll) and thus part of the Windows API.
• On Windows 11, you can apply Acrylic (DWMSBT_ACRYLIC) or Mica (DWMSBT_MAINWINDOW) to a window without a custom GPU pipeline, and it’s still hardware-accelerated by DWM behind the scenes.

8 hours ago, Yaron said:

You'd also have to intercept the hittest message to allow resizing/moving of a borderless window.

Delphi Borderless Form

8 hours ago, Yaron said:

Gaussian blur copy from the background image on paint, etc.

Native Windows 11 Rounded Corners

• You can request real rounded corners via the Windows 11 API

 

[Yaron 57]

Interesting, let me know if you figured out how to use a layered window as a child under Delphi 7.

[johnnydp 25]

On 2/14/2025 at 2:09 PM, bravesofts said:

You have earned an abundance of love and respect over the years, especially through your outstanding contributions to UI design. I know you can do it—haha, you've already proven yourself time and time again!

LOOOOOOOOOOOOLL