# Dynamically display rectangles?

**URL:** <https://forum.xojo.com/t/dynamically-display-rectangles/17122>\
**Category:** macOS\
**Created:** [June 8, 2014, 11:57am UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122 "2014-06-08T11:57:36Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 8, 2014, 11:57am UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/1 "2014-06-08T11:57:36Z")

</div>

Hi,  
I would like to know if it is possible to remove my single column listbox (which displays the values of a database column), and somehow programmatically / dynamically create a white rectangle containing the value for each result in a recordset.

S0 basically - instead of having a listbox with 3 single column rows - I have 3 white rectangles (separated on the Y-axis by 50 pixels), each containing the value.

I know how to loop through the database and return a recordset of all the results alphabetically - but have no idea where to begin in order to replace the code segment below, with code to dynamically display and position the rectangles and their accompanying text values:

I only need this to work on OS X, hence the post in this forum 🙂  
Any pointers as to if this is even possible, or where to begin would be appreciated.

[code] // CLEAR THE LISTBOX  
Listbox1.deleteAllRows

// RETURN THE RESULTS AS A RECORDSET  
rs=db.sqlSelect(sql )

// POPULATE THE LISTBOX  
while not rs.eof  
Listbox1.addRow rs.Field(“Title”).StringValue  
rs.moveNext  
wend[/code]

---

<div class="post-metadata">

**Author:** ![Antonio\_Simone](https://forum.xojo.com/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@Antonio\_Simone](https://forum.xojo.com/u/Antonio_Simone)\
**Post date:** [June 8, 2014, 1:31pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/2 "2014-06-08T13:31:14Z")

</div>

Richard, I was just facing something similar. I was thinking about using a textfield as a rectangle along with a control array. That should give me the possibility to instantiate the number of new textfield I need. Another option would see the use the graphics class, thus DrawRect, DrawRoundRect, DrawString and so on.

---

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 8, 2014, 2:31pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/3 "2014-06-08T14:31:07Z")

</div>

I also thought about dynamically displaying rounded text fields containing the values (which would normally be displayed in a listbox row), but I am totally unfamiliar with DrawRect, DrawRoundRect etc. as I am only a VERY part time / hobby developer.

I am trying to work out the code which replaces the Listbox1.addrow blah blah blah:

`while not rs.eof
    Listbox1.addRow rs.Field("Title").StringValue
    rs.moveNext`

I am presuming the code would be something like:

`while not rs.eof
CREATE A NEW RECTANGLE, THEN PUT THE RECORDSET COLUMN VALUE INTO IT, THEN SET THE Y-AXIS VALUE TO THE CURRENT Y-AXIS VALUE + 50
    rs.moveNext`

Hope that made sense 🙂

If I was clever, I would make a class / control to do this - I am sure it could be a good little money maker for people who make and sell controls.

---

<div class="post-metadata">

**Author:** ![Roger\_Clary](https://forum.xojo.com/letter_avatar_proxy/v4/letter/r/eada6e/32.png) [@Roger\_Clary](https://forum.xojo.com/u/Roger_Clary)\
**Post date:** [June 8, 2014, 3:42pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/4 "2014-06-08T15:42:51Z")

</div>

A rectangle alone can’t display your text. Use a canvas, use g.drawrect or drawroundrect or whatever to create your rectangle. Use g.drawsting myTxt, x, y to place your text where myTxt is obtained from your recordset.

---

<div class="post-metadata">

**Author:** ![Antonio\_Simone](https://forum.xojo.com/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@Antonio\_Simone](https://forum.xojo.com/u/Antonio_Simone)\
**Post date:** [June 8, 2014, 4:00pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/5 "2014-06-08T16:00:09Z")

</div>

Richard, I’d try like this:

1. create a textfield on the prefect window, which default name will be textfield1
2. modify the textfield1 “control set” option to “new control set”. (you can fine this option on the second tab on the property panel on the right part of the ide)
3. create a property (conta as integer) inside the window1 control to keep track of the increments to be added to the new controls to position them at the correct position,
4. create a button with the following code and push it as many time as many the textfields you want.

` dim a as new TextField1
 conta = conta+30
 a.text = str(conta)
 a.Top = Conta
 `

---

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 8, 2014, 4:05pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/6 "2014-06-08T16:05:46Z")

</div>

Thanks Roger / Antonio - I will look into both of these options 🙂

---

<div class="post-metadata">

**Author:** ![Antonio\_Simone](https://forum.xojo.com/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@Antonio\_Simone](https://forum.xojo.com/u/Antonio_Simone)\
**Post date:** [June 8, 2014, 4:26pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/7 "2014-06-08T16:26:28Z")

</div>

another way:

create the property (conta as integer) to keep track of the y position, then put the following code inside a paint canvas control event

```auto
  dim rettangolo as new RectShape // Create a new instance (named rettangolo) of the Rectshape class
  
  rettangolo.FillColor = rgb(255,0,255,155) // set color for the new instance
  rettangolo.Height =30 // set the height of the rectangle
  rettangolo.Width=180 // set the width of the rectangle
  
// let's draw the rectangles, now

  for contatore as integer = 1 to 3 // run a loop just to see how it works
    conta=conta+50 // increase the (conta as integer) property to keep track of the Y position
    g.DrawObject(rettangolo,0,conta) // draw the rectangle at the previous position +50 (given by the conta incremented property)
    g.DrawString("hello World " + str(contatore),0, conta) // draw the string "hello world" 1, 2, 3, as many the loop numbers
  next
  
```

---

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 8, 2014, 4:55pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/8 "2014-06-08T16:55:52Z")

</div>

Antonio - I am presuming that I need to create a Canvas1 in my Window1 (in which to display all the rectangles and enable scrolling).

Then I create 2 properties in Window1:

`xAxisPosition as Integer = 20
yAxisPosition as Integer = 20`

Then, in the Canvas1.open event:

[code]Dim Rectangle as New RectShape  
Rectangle.FillColor = rgb(255, 255, 255)  
Rectangle.Height = 30  
Rectangle.Width = 180

while not rs.eof  
yAxisPosition = yAxisPosition + 50  
g.DrawObject (Rectangle, xAxisPosition, yAxisPosition)  
g.DrawString (rs.Field(“Title”).StringValue, xAxisPosition, yAxisPosition)  
rs.moveNext  
wend[/code]

The above code is my translated and slightly modified code, which uses my database recordset values.  
Hope this looks correct??

---

<div class="post-metadata">

**Author:** ![Antonio\_Simone](https://forum.xojo.com/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@Antonio\_Simone](https://forum.xojo.com/u/Antonio_Simone)\
**Post date:** [June 8, 2014, 5:50pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/9 "2014-06-08T17:50:41Z")

</div>

Richards, yes, it seems to be correct. Anyway, if you wish to be more flexible, in the case you’d have more rectangle to be filled in, take a look at the scroll’s canvas method.

---

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 8, 2014, 6:06pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/10 "2014-06-08T18:06:20Z")

</div>

Antonio - do you mean that if I had 50 rectangles the canvas would not automatically display a scrollbar?

---

<div class="post-metadata">

**Author:** ![Antonio\_Simone](https://forum.xojo.com/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@Antonio\_Simone](https://forum.xojo.com/u/Antonio_Simone)\
**Post date:** [June 8, 2014, 6:15pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/11 "2014-06-08T18:15:22Z")

</div>

Yes, exactly, if you yAxisPosition \> canvas1.Heigh it will contains the rectangles but won’t display the ones exceeding the canvas height.

---

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 8, 2014, 6:16pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/12 "2014-06-08T18:16:57Z")

</div>

Just realised - I have the “piDogScrollingCanvas” control. 🙂  
I have never used it yet, but all of his other controls are excellent and Jim is really helpful, so I am sure that is exactly what is needed.

You should take a look at it.

---

<div class="post-metadata">

**Author:** ![Simon\_Berridge](https://forum.xojo.com/letter_avatar_proxy/v4/letter/s/cc9497/32.png) [@Simon\_Berridge](https://forum.xojo.com/u/Simon_Berridge)\
**Post date:** [June 9, 2014, 8:56am UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/13 "2014-06-09T08:56:14Z")

</div>

Richard

Are you looking to have these rectangles inside the Listbox instead of using the standard AddRow?

If you are then you can use the two methods within Listbox CellBackgroundPaint and CellTextPaint. Check these out and you will see that they both have the graphics classed passed to them so you can draw what you like within the row.

---

<div class="post-metadata">

**Author:** ![Simon\_Berridge](https://forum.xojo.com/letter_avatar_proxy/v4/letter/s/cc9497/32.png) [@Simon\_Berridge](https://forum.xojo.com/u/Simon_Berridge)\
**Post date:** [June 9, 2014, 10:02am UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/14 "2014-06-09T10:02:02Z")

</div>

Richard

Try out my MagicListbox that will do what you want (I think).

[https://dl.dropboxusercontent.com/u/10747116/RealStudioClasses/MagicListbox.zip](https://dl.dropboxusercontent.com/u/10747116/RealStudioClasses/MagicListbox.zip)

---

<div class="post-metadata">

**Author:** ![Richard\_Summers](https://forum.xojo.com/user_avatar/forum.xojo.com/richard_summers/32/477_2.png) [@Richard\_Summers](https://forum.xojo.com/u/Richard_Summers)\
**Post date:** [June 9, 2014, 12:42pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/15 "2014-06-09T12:42:49Z")

</div>

Simon - in answer to your question -no, I want to totally replace the listbox with a canvas containing the rectangles.  
So instead of having rows in a listbox, I have rectangles in a canvas.

However, thanks for the MagicListbox - It looks interesting and I am sure I will learn a lot it, the next time I need to use a listbox 🙂

---

<div class="post-metadata">

**Author:** ![system](https://forum.xojo.com/uploads/default/original/1X/455b4dcc0e61630e9f81940004ddffa49c432a46.png) [@system](https://forum.xojo.com/u/system)\
**Post date:** [October 29, 2020, 5:15pm UTC](https://forum.xojo.com/t/dynamically-display-rectangles/17122/16 "2020-10-29T17:15:41Z")

</div>