Custom Canvas Button Class Issue

Getting Started
1

Hi all

I am baffled, and I have been working through this for hours and I can’t find where I am going wrong.

I have a custom canvas class to be the basis for buttons with a mouseover effect. What I want is for the canvas to draw the image of the button, start with a transparent background and change color if the mouse hovers, and have a different highlight during the actual mouse press. The instances react to the mouse enter and mouse exit opposite of how I expect (the code below makes it work as expected, but doesn’t seem right to me). Also, when I go to a different page panel and then return, the buttons render with the mouse enter highlight active, until I actually move the mouse over them, and then they again react as expected to the mouse, but opposite of the way I think I have coded. The highlight on the mouse down event works fine. The image renders fine.

In the custom canvas class, I have:
Event Handlers:
MouseDown

mDown = True Graphics.FillOval(0,0,32,32) Graphics.ForeColor = app.colorAccent Self.Invalidate(False) Return True

MouseEnter

Hover = True Self.Invalidate(False)

MouseExit

Hover = False Self.Invalidate(False)

Open

Graphics.FillOval(0,0,32,32) Graphics.ForeColor = app.colorTransparent)

Method - PaintButton

[code]//icon
Dim iconImage As Xojo.IO.FolderItem
iconImage = Xojo.IO.SpecialFolder.GetResource(actIcon)
Dim icon_ImagePath As New FolderItem(iconImage.Path, FolderItem.PathTypeNative)
Dim icon As Picture
Dim icon_scale As Double = 0.125

// icon highlight
select case hover
case false
Graphics.FillOval(0,0,32,32)
Graphics.ForeColor = app.colorLightBlue
case true
Graphics.FillOval(0,0,32,32)
Graphics.ForeColor = app.colorTransparent
end select

icon = Picture.Open(icon_ImagePath)
Graphics.DrawPicture(icon, 0, 0, icon.Width * icon_scale, icon.Height * icon_scale, 0, 0, icon.Width, icon.Height)[/code]

Properties - mDown, Hover (both boolean)

In the instances of the canvas, I have the following Event Handlers:
Mouse Up

mDown = False If X > 0 And X < Self.Width _ And Y > 0 And Y < Self.Height Then //do the action for this particular instance of the button End If

and Paint

me.mPaintActButton("edit256.png") // tells the method in the custom class what image to use for this particular instance of the button me.Invalidate

Any insight would be appreciated.

2

You know that the code below do nothing ?

Self.Invalidate(False)

and at compile time, you will get an error or:

Graphics.ForeColor = app.colorTransparent[b])[/b]

If you want to change a color, you’d bettet put the code before the place you need it:

Graphics.ForeColor = app.colorLightBlue Graphics.FillOval(0,0,32,32)

And I do not talk about the fixed image resolution in the Paint Event (HiDPI / Retina).

3

Emile - Thank you. Reversing the code for the color change above the draw made them behave the way i wanted. I knew it was something simple, I just couldn’t see it.

Dynamic scaling I have not wrapped my head around yet, it is on the list!

thanks!

4

Just a quick look while on my phone.

Please don’t do graphic updates in any events other than paint. Do state changes in events and call self.invalidate(false) to trigger a paint (if required). This will cause the raising of the paint event where you should be handling the drawing. If you don’t do it this way you will end up with huge problems hundreds of double/triple paints and a terribly performing app in the long run.