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

  1. 3 months ago

    Dave S

    Jul 11 San Diego, California USA
    Edited 3 months ago

    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 :)

    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"

  2. Markus W

    Jul 11 Pre-Release Testers #JeSuisHuman New Zealand, Auc...

    Put it on GitHub?

  3. Dave S

    Jul 11 San Diego, California USA

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

  4. Dave S

    Jul 12 San Diego, California USA

    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 :) http://www.rdsisemore.com/donate.html

    Source code link : http://www.rdsisemore.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

  5. Dave S

    Jul 13 San Diego, California USA
    Edited 3 months ago

    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
    -image-

    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

  6. Nathan W

    Jul 14 Pre-Release Testers, Xojo Pro Europe (UK, Jersey)
    Edited 3 months ago

    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?

  7. Markus W

    Jul 14 Pre-Release Testers #JeSuisHuman New Zealand, Auc...

    @Nathan W 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.rdsisemore.com/canvasStack.xojo_xml_project.zip

  8. Nathan W

    Jul 14 Pre-Release Testers, Xojo Pro Europe (UK, Jersey)

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

  9. Dave S

    Jul 14 San Diego, California USA

    @Nathan W Will it also have a Double Click event?

    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)

  10. Nathan W

    Jul 14 Pre-Release Testers, Xojo Pro Europe (UK, Jersey)

    @Dave S 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.

or Sign Up to reply!