A scrollable stack of "Canvas"... a "Listbox" like control

For anyone who is interested…
I have created a custom “listbox” like control.
It is only ONE column (by design). each row can have its own row height (including 0 to make it "invisible)
the displayed content of each row can be inset by a user specified amount (left and right), as well as setting a space between rows

if has both Horizontal and Vertical scrollbars

The control itself does not have a “datastore”… this is up to the developer to manage via the CellPaint event

while it does support DarkMode… its up to the developer to deal with the CellPaint content

Events

  • cellClick(row as integer)
  • cellPaint(g as graphics, row) // unlike Listbox, the row must exist
  • Paint(g as graphics, areas() ) … this is to allow developer to overlay the entire control, with other drawing

Methods

  • addRow(height as integer) // add One Row … unlike Listbox that adds “text”
  • addRows(count as integer,height as integer) // adds multiple rows at once
  • deleteAllRows // removes all existing rows
  • RowHeight(row as integer)=value // set the height of a specific row

Properties

  • Border as Boolean
  • columnWidth as integer // defaults to control width unless this value is GREATER than that (hScroll)
  • leftMargin // amount to offset the left side of CellPaint content
  • rightMargin // amount to inset from the right
  • topMargin // amount to move down before the first drawn cell
  • ScrollPostion // the visible offset in pixels … set by user or by vScroll
  • ScrollPositionX // the visible HORIZONTAL offset in pixels … seby user or hScroll
  • Suspend as Boolean // suspend any redraw operations if doing a bunch of changes
  • textFont // default font to use in CellPaint
  • textSize // default font size to use in CellPaint
  • rowTag(row) as variant // same function as listbox rowtag
  • SepLine // draw a line horizontally between rows (uses same color as border)

So far this looks like it will do what I want… (not bad for less than 4 hours work…probably less than 2)

My intent is to use this as a TIMELINE display of Life Events in a Genealogy Program

may still be a work in progress as I find various “bugs” or new features :slight_smile:

I will post the source code for this in a bit.
Feel free to use it, but if you make an updates/changes etc… they should be forwarded back to me so they can be incorporated for the benefit of everyone else
and you must give credit in your “About” and/or “documentation”

Put it on GitHub?

Once I test it a bit more, I’ll post it on my own server and provide a link.

Here is the source code and a demo of the “CanvasStack” control.
Some of the features mentioned above have been renamed, and a few more have been added (expand and collapse row for example). The demo is a quick and dirty example of making a “timeline”. This is actually the main reason I developed this… for use in a Genealogy program.

It is free to use (as long as the embedded document remains intact), and a visible credit is provided in any app you use it in.

And of course, if you would LIKE to make a donation :slight_smile: http://www.rdS.com/donate.html

Source code link : http://www.rdS.com/canvasStack.xojo_xml_project.zip

This was developed using Xojo2019 on an iMac… and minor testing for Windows was done using Win10

If you have any suggestions, feature requests etc… let me know

1 Like

Here is a tiny example of what this control could be used for… as I said I developed it for a Genealogy app.

The finished version of this screen will contain a lot more information than this sample

this sample consists of 4 rows or cells

FYI… the final version will replace that UUID with the demographics/name etc of the actual person

Looking forward to you releasing this @Dave S as I can already think of a way to use it in the project I am working on. Will it also have a Double Click event?

Blind fox! He has released it: Source code link : http://www.rdS.com/canvasStack.xojo_xml_project.zip

Thanks @Markus Winter downloaded and donation made, very pleased and know how I am going to use it.

Thanks Nathan… I am probably going to add a DoubleClick… which will be “diffrent” than a listbox as in I will have it return the same info as a Single Click (why the Xojo List box doesn’t do that I don’t know)

That would be great.

Any idea where is that link now ? as it seems that the current link is gone missing. Thanks

DaveS got kicked from the forum. Maybe he removed all Xojo related links too.

For macOS you should take a look at NSTableView (ThomasT did a great job on this).
The Appkit from Sam has also something similar.

The StackView isn’t yet in the App Kit. When it launches, I want it to be as stable as can be and as it’s crucial part of App Wrapper 4’s interface, I am elongating the testing of it.

In fact many of the new components in the App Kit are being tested via App Wrapper 4 (and some require the application to be processed via App Wrapper 4 to work).

With everything that’s going on right at the moment, my entire schedule has once again been delayed :frowning: