Hover Effect Buttons using GDI+ UpdateLayeredWindow (C++)

Question

1.00/5 (1 vote)

See more:

Hey guys, I've been lurking around and found some answers for related stuff but I'm currently stuck at this point. I'm creating a WS_EX_LAYERED window with no borders / title bar etc. The background of the window is transparent using a PNG image I'm loading on WM_CREATE and assigning alphablending accordingly with this function:

BLENDFUNCTION blend = {0};
blend.BlendOp = AC_SRC_OVER;
blend.BlendFlags = 0;
blend.SourceConstantAlpha = 255;
blend.AlphaFormat = AC_SRC_ALPHA;
POINT ptPos = {left, top};
SIZE sizeWnd = {500, 300};
POINT ptSrc = {0, 0};
UpdateLayeredWindow(hWnd, hdcScreen, &ptPos, &sizeWnd, hDC, &ptSrc, 0, &blend, ULW_ALPHA);
SelectObject(hDC, hBmpOld);
DeleteObject(hBmp);
DeleteDC(hDC);
ReleaseDC(NULL, hdcScreen);

As a part of the GUI I'm using custom images for buttons placed on the same WM_CREATE because well, I'm treating em like background, they will never change (sort of). This is the code for the buttons

Image xxxImage(L"Images\\xxx.png");
	graphics.DrawImage(&xxxImage, 245, 130, 30, 20);

Until that point, everything is working. I've got a decent background with full / partial transparency as my image and buttons - text as needed.

However, I'm trying to make some hover effects for the buttons. I'm catching WM_MOUSEMOVE event to change the cursor and changing or showing an image on those coordinates. At first I thought I could simply draw the hover image on top of my buttons but it didn't work. I tried using the same code above for my hover-image but nothing happened. I read somewhere about creating a new transparent-window on top of my Main Window and draw controls there. The best thing I could do was draw my new images but I couldn't delete them afterwards. I tried using InvalidateRect and FillRect and nothing, even tried FillRect with solid colors just to see if something happened, I couldn't erase the contents of the transparent window.

Posted 19-Oct-11 11:40am

Atroc

Add a Solution

Comments

Code-o-mat 20-Oct-11 10:58am

Not sure i understand you but...did you try simply re-rendering the whole thing with the hover-image instead of the normal image for the given button and use UpdateLayeredWindow again with the newly created bitmap?

Atroc 20-Oct-11 12:22pm

Not really, do you mean creating the entire contents of my window with the hover image and calling another UpdateLayeredWindow? Didn't try that, sounded like a really bad solution for me, is there a way to update only the part where the button is using updatelayeredwindow?

Edit: Imagine the home button on top of the page. I want to create an effect like what you see when your mouse is above the home link, it changes the appearance. How can I do that if my background image is created on a WS_EX_LAYERE and using UpdateLayeredWindow after the drawing.

Code-o-mat 20-Oct-11 14:13pm

Well, with UpdateLayeredWindow there seems to be no way to do partial update, but there's UpdateLayeredWindowIndirect (from Vista and up it seems, don't know what your target OS is), the struct passed to this has a member called prcDirty, i belive that can be used to do what you want.
Not sure what you mean in the 'Edit' part of your comment, if you are asking WHEN to update your image, i'd say, every time some visual change is done, e.g. in the handler for WM_MOUSEMOVE when you detect that the mouse got over your button(s) or when it left. If you mean how to get a "clean" background each time you either have to load it every time you update, Or keep your background image loaded AND create a "backbuffer", every time an update is in order, blit the background onto the backbuffer, render your buttons also onto the backbuffer and then use the backbuffer to update the layered window. You could also try storing only the parts of the background that is "under" the buttons to save up on some memory. Does this answer your question?

Atroc 20-Oct-11 18:41pm

Ok I'm working on the buffering stuff. I'll update asap. Need to study it since I've never used double buffering before lol.
Edit: Alright, it works now. I used BitBblt and draw my hover images on a new WS_EX_LAYERED | WS_EX_TRANSPARENT window that i keep over my original window so i don't redraw the entire contents (aka background) every time which is a waste imo. Just need to polish some weird behavior but I'm sure is more bad code than anything else. This problem is solved. Thanks Code-o-mat.

Code-o-mat 21-Oct-11 7:25am

Ok, glad you got it to work.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)