Menu rollovers flicker - How to account for Mouse Leave activity - delphi

Question

I'm building a custom menu and have been having some issues with the hover states on the links. Now, after much tinkering I've managed to get my menu rectangle responding properly to mouse hover states - Almost.
I can't for the life of me work out how to get them to revert back to normal once the mouse has left the rectangle - it remains in it's hovered state. Moving onto a different rectangle resets correctly, anywhere else on the canvas is treated as still being in last rectangle hovered over.
My MouseMove procedure.
procedure TOC_MenuPanel.MouseMove(Shift:TShiftState; X,Y:Integer);
var
i : integer;
begin
pt := Mouse.CursorPos;
pt := ScreenToClient(pt);
for i := 0 to High(MenuRects) do
begin
if PtInRect(MenuRects[i], Point(X, Y)) then
begin
chosenRect := i;
Refresh;
end
else
begin
chosenRect := -1;
end;
end;
inherited;
end;
And my paint procedure:
procedure TOC_MenuPanel.Paint;
var
// TextStyle: TTextStyle;
R, itemR: TRect;
count : Integer;
x1,y1,x2,y2 : Integer;
begin
// Set length of array
SetLength(MenuRects, fLinesText.Count);
// Set TRect to Canvas size
R := Rect(5, 5, Width-5, Height-5);
x1 := 10;
y1 := 10;
x2 := Width-10;
inherited Paint;
with Canvas do begin
// Set fonts
Font.Height := MenuFontHeight;
Font.Color := clWhite;
// Draw outerbox
GradientFill(R, clLtGray, clWhite, gdVertical);
// Draw inner boxes
if fLinesText.Count = 0 then exit
else
for count := 0 to fLinesText.Count - 1 do
begin
// Define y2
y2 := TextHeight(fLinesText.strings[count])*2;
itemR := Rect(x1, y1, x2, y2*(count+1));
Pen.color := clGray;
// Test against chosenRect value and compare mouse position against that of the rectangle
if (chosenRect = count) and (PtInRect(MenuRects[count], pt)) then
Brush.color := stateColor[bttn_on]
else
Brush.color := stateColor[bttn_off];
Rectangle(itemR);
// Push rectangle info to array
MenuRects[count] := itemR;
// Draw the text
TextRect(itemR, x1+5, y1+5, fLinesText.strings[count]);
// inc y1 for positioning the next box
y1 := y1+y2;
end;
end;
end;

Answer 1

The painting that you do in the mouse move event handler is immediately lost because you force a paint cycle by calling Invalidate. As a general rule, it is best to do all painting to the screen in a paint cycle. In some scenarios it can make sense to paint outside of a paint cycle, but it is notoriously hard to get right.
So, I suspect that you need to move all the drawing code into your paint routine, wherever and whatever that is. So, in the mouse move event you need to invalidate the form or paint box or whatever it is that paints the scene. Then in your paint routine you use GetCursorPos, or Mouse.Pos or similar to find the position of the cursor. And you use that to determine how to paint the scene. You may well find it more effective, in terms of flicker avoidance, to paint to an off-screen bitmap and then blit that onto the canvas.
Now, if you invalidate on every single mouse move then you might find the painting burden to be excessive. So perhaps you should keep track of the state of the most recently painted scene. Test in the mouse move handler whether or not the new state differs from the most recently painted. Only if it does differ would you force a paint cycle.

Answer 2

The error was in the MouseMove procedure, the following produces the correct behaviour:
procedure TOC_MenuPanel.MouseMove(Shift:TShiftState; X,Y:Integer);
var
i : integer;
begin
// Get cursor position within the control
pt := Mouse.CursorPos;
pt := ScreenToClient(pt);
// loop through Array of Rectangles
for i := 0 to High(MenuRects) do
begin
if PtInRect(MenuRects[i], Point(X, Y)) then
begin
chosenRect := i;
Break; // If statement evaluates to true, stop the loop
end
else
begin
chosenRect := -1;
end;
end;
Refresh; // Refresh the canvs
inherited;
end;