Transparent background TextArea

I really wished the TextArea background could be set to transparent (Windows). I’m able to do it with an API, but if flickers like hell. For reference, I was trying to build some animated Google ‘Material’ controls so that the Windows programs written in Xojo looked a little more modern.

  Declare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" (ByVal hwnd As integer, ByVal nIndex As integer, ByVal dwNewLong As integer) As integer
  
  Dim i as integer
  Const GWL_EXSTYLE = -20
  Const WS_EX_TRANSPARENT = &H20
  i = SetWindowLong(TextArea1.Handle, GWL_EXSTYLE, WS_EX_TRANSPARENT)

With this code in the Open() event of the from, the TextArea becomes transparent, but when you start typing, now and then, the background is repainted with the default background (white in this case). A Split second later it becomes transparent again, but it does not look very professional.

Anyone ever found a working solution for this?

I could not reproduce the background that becomes white again. But I have a fast PC and Windows 10, that may have masked the issue.

The white coming back looks as if somehow the control was refreshed, therefore painted once again.

Maybe you could try adding the declare in an event that is called when typing, like KeyDown ? I tried, and it does not seem to create an error. The hope being that the declare maintains transparency when the white background happens.

I know, it is not a magic recipe…

I don’t think this may be so easy.
At least you would need Xojo framework to respect this change.
And maybe also make the window transparent aware.

I think it is indeed somehow the Xojo framework does a refresh internally, but is unaware of my transparency of course.

It does look like Xojo is trying to redraw the control, so why I tried to reapply the transparent background in keydown.

Also, the flicker does happen in a regular TextArea. It do not think it is more intense with a transparent background.

Thanks for your suggestions, but I don’t think Xojo is quite ready for stuff like Material. Attached you can find my project (if someone wants to play with the idea) Or, this could be a a very good example for the Xojo team to try getting rid off the flickering on Windows.

Even with the ‘Transparency’ code disabled, the TextArea has a lot of annoying behaviours (like sometimes not redrawing the text, just showing the cursor until another keydown happens).

I really hope (after 64bit is settled), windows will be looked after because it is in great need of a serious review.

Here is the code:

http://gorgeousapps.com/ABMaterialKit.zip

[quote=160649:@Alain Bailleul]Thanks for your suggestions, but I don’t think Xojo is quite ready for stuff like Material. Attached you can find my project (if someone wants to play with the idea) Or, this could be a a very good example for the Xojo team to try getting rid off the flickering on Windows.

Even with the ‘Transparency’ code disabled, the TextArea has a lot of annoying behaviours (like sometimes not redrawing the text, just showing the cursor until another keydown happens).

I really hope (after 64bit is settled), windows will be looked after because it is in great need of a serious review.

Here is the code:

http://gorgeousapps.com/ABMaterialKit.zip[/quote]

This is great work, Alain. Quite in the spirit of what I was talking about in the thread about Windows 10 future.

Talking about Windows 10, it may be that, but I hardly see any flicker here, under Windows 10 with Xojo 2014R3.2.

Could it be that Windows 10 is optimized to minimize flicker ? Which version of Windows are you seeing flicker ?

I do see the text disappearance happen when clicking in the textarea, but it looks like some consequence of the animation. A normal TextArea placed on the same window does not exhibit that bug.

I’m working on Windows 7 and 8.1 on a powerful machine (64GB ram, big video card). The flickering i quite severe on my machines. I’m going to see if I can setup a Windows 10 machine in a virtual environment and see what it gives. Could be hopeful for the future.

Yes, it seems to happen if it is placed on a canvas. Would love to have this solved though. It could make a whole world of difference if we could make modern interfaces in Xojo.

Try adding the textarea to the canvas as the window opens, this worked for me placing canvases on top of canvases for a game to stop flicker

Can you elaborate a bit more on that? You mean like not putting them on the canvas in design mode, but moving them on the canvas in the form open event?

It is definitely happening when you call ABMKBaseControl13.HandleMouseDown(X,Y).

It looks as though the canvas zorder changes, and it comes on top of the TextArea.

I was able to make the text reappear by calling TextArea1.Refresh in a button. It seems to reset the zorder to its old self.

Quickly setting the ABMKBaseControl13.visible to false and back to true also fixes it. But it does not work in HandleMouseDown. Maybe after the circletimer animation is over ?

yes exactly that

Yes, the plan was to raise an event when the animation was finished anyway. However, during the animation, it would have been nice the editbox was transparent (showing the text) and seeing the anim in the background. This is how Material does it.

Tried it, but I don’t see a lot of difference

[quote=160738:@Alain Bailleul]Yes, the plan was to raise an event when the animation was finished anyway. However, during the animation, it would have been nice the editbox was transparent (showing the text) and seeing the anim in the background. This is how Material does it.
[/quote]

Why not do it the other way, by running the animation in a canvas laid on top of the TextArea you set to invisible when the animation is over ?

Enabling doublebuffer makes the animation smoother, but unfortunately the transparency of the canvas is then ignored (e.g when drawing rounded corners). Bug or by desing? Textarea text still dissapears while the animation runs.

Edit: the transparency loss was my bad. Did a g.ClearRect 0,0, me.Width, me.Height in the paint.

Funny how ancient threads come handy. Search is your friend.

Today I needed a search text on Windows. Being able to have a transparent TextArea was great. I made the super of a TextField TextArea. I placed a canvas underneath, where I can draw the frame, the lens, and the circled x on the right that erases text.

Then some code to hide the lens when there is text, to detect the click over the circe x, and so on. It was simple, really.

Thank you for your code, Alain :slight_smile: