Is it possible to implement floating/fully custom Dropdown Menus?

[araujoarthur 0]

Hello! I'm building an user interface in VCL (and I currently have as a prerequisite that it's built in VCL. In the upcoming phases I'll probably build it also in FMX to support gpu accelerated rendering). At the current point I need to approach the user menu as shown in the project picture, but I'm not really sure it's even possible (in VCL or even plain WinAPI).

I don't really mind if I have to custom draw it, create a fully new component or use a composition (like a form).

 

The requisites are that it spawns below the username button, lives as long as it or any of its items are hovered or for T seconds after showing if not hovered. Opening animations are a bonus, not required but very cool. The menu items are required to react to the hovering individually (have the states Rest, Hot, Pressed and Disabled).

So is there any way to approach this and fulfill these requirements?

 

[Anders Melander 2018]

The easiest way is probably to just use a TForm as the poup.

 

You need to:

• Display the form with ShowWindow(SW_SHOWNA).
• Handle WM_NCACTIVATE to avoid the form activating when clicked.
• In CreateParams:
  • Set Params.WndParent to the parent form.
  • Add WS_POPUP and WS_CLIPCHILDREN to Params.Style and exclude WS_CHILD.
  • Add WS_EX_TOPMOST and WS_EX_TOOLWINDOW to Params.ExStyle. If you will be implementing the form shape with alpha blending then you also need to add WS_EX_LAYERED.
• Shape the form either with alpha blending (WS_EX_LAYERED and SetLayeredWindowAttributes) or with regions (I can't remember the APIs for that OTOH).

I'm sure that if you search github for the above (with lang:pascal) that you can find some Delphi examples.

See also: http://melander.dk/articles/alphasplash/

 

...or you could just throw some $$$ at DevExpress and use their TdxCalloutPopup control:

[araujoarthur 0]

Hey thanks for the response 🙂

I have DevExpress available. What has been holding me to use it is the issues Skins bring. I'm using StyleControls to design the UI elements (custom titlebar, side menu, status bar, content area), I use some PopupMenus too and the mere presence of any DX control on the form causes the TPopupMenu drawing to look flat and old (which ofc is not the focus of the  application). I would totally jump into TdxCalloutPopup if I knew a way to totally disable DX Skins from intefering/side effects. 

 

Here are an example of how it looks like before any DX component is in place:



and this is how it looks like after dropping any DX component

 

 

This example displays a very boring behavior that is not a major issue, but also raises alert to what other kinds of side effects I could have and don't know how to or that I have to deal with them. 

[pyscripter 786]

Following on @Anders Melander suggestion you can find here a free implementation of his idea.

The library also supports controls on menus and toolbars, is Vcl styles compatible and High-DPI aware.  See some of the images here.

Edited 9 hours ago by pyscripter

[Anders Melander 2018]

1 hour ago, araujoarthur said:

I would totally jump into TdxCalloutPopup if I knew a way to totally disable DX Skins from intefering/side effects.

It took me a good while to spot the difference between the two screenshots but I get your meaning.

AFAIK it's possible to control DevExpress' skinning of standard VCL controls to some degree. See TdxSkinController.OnSkinControl

 

7 minutes ago, pyscripter said:

The library also supports controls on menus and toolbars and is Vcl styles compliant.

The dependencies though 😕

[Attila Kovacs 666]

if you are already using StyleControls look for the TscStyledForm component and "dropdownforms" demo

and set your form shape with "SetWindowRgn"