https://github.com/charlierobin/xojo-canvas-buttons
Canvas-based buttons that “track” like standard system buttons
https://github.com/charlierobin/xojo-canvas-buttons
button button-control realbasic xojo
Last synced: 4 months ago
JSON representation
Canvas-based buttons that “track” like standard system buttons
- Host: GitHub
- URL: https://github.com/charlierobin/xojo-canvas-buttons
- Owner: charlierobin
- Created: 2020-03-12T11:41:32.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-07-01T09:19:19.000Z (12 months ago)
- Last Synced: 2025-07-11T12:47:04.785Z (11 months ago)
- Topics: button, button-control, realbasic, xojo
- Language: Xojo
- Size: 166 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Button class based on built-in Canvas control
Very similar to the example(s) that ship with Xojo, except that those don’t show how to “track” the mouse pointer like standard system buttons.
This control responds in the (generally) accepted manner, handling a click in the bounding rect and then rolling out with the mouse button still down, clicking and then moving out (MouseExit) and then moving back in, and handling the mouse up correctly: when rolled out no action triggered, when still within bounds does trigger action.
Also adds a few custom events to assist with control painting. The original native `Paint( g as Graphics etc )` is replaced with:
`PrePaint_Normal( g As Graphics, areas() As REALbasic.Rect )` for setting up `g` in preparation for a “normal” paint pass (also checking if `enabled` is true or false, and drawing the control differently depending on the result)
`PrePaint_RolledOver( g As Graphics, areas() As REALbasic.Rect )` for setting up `g` in preparation for a paint pass when the button has been moused over
`PrePaint_MouseDown( g As Graphics, areas() As REALbasic.Rect )` for setting up `g` in preparation for a pass when the mouse button has been clicked down over the button
`Paint_Common( g As Graphics, areas() As REALbasic.Rect )` as the actual painting routine using whatever colours etc have been set-up in the pre-passes
All this is in the `CanvasButton` base class. The simple caption button in the test window is subclassed from that, showing how to use it as a simple jumping off point for more complicated buttons.
# Notes as of 9th June 2025
There's now an excellent series of blog posts (by Gabriel Ludosanu) on the Xojo website which go into a lot of great detail about creating a custom button control in Xojo using the canvas control:
[How To Create a Custom Button Control in Xojo](https://blog.xojo.com/2025/05/02/how-to-create-a-custom-button-control-in-xojo/)
[How To Create a Custom Button Control in Xojo – Part 2](https://blog.xojo.com/2025/05/14/how-to-create-a-custom-button-control-in-xojo-part-2/)
[How To Create a Custom Button Control in Xojo – Part 3: Make Your Controls Inspector-Friendly](https://blog.xojo.com/2025/05/28/how-to-create-a-custom-button-control-in-xojo-part-3-make-your-controls-inspector-friendly/)
[How To Create a Custom Button Control in Xojo – Part 4: Adding Focus](https://blog.xojo.com/2025/06/23/how-to-create-a-custom-button-control-in-xojo-part-4-adding-focus/)
[How To Create a Custom Button Control in Xojo – Part 5: Adding Text Alignment](https://blog.xojo.com/2025/10/08/how-to-create-a-custom-button-control-in-xojo-part-5-adding-text-alignment/)
Highly recommended!
(And also the [Github repository](https://github.com/xolabsro/CanvasButton) from where you can get the source files for the above blogposts.)