Popovers anchor to a control, not a location, which has been somewhat tricky to do in the past. DesktopTable has a CellBoundsAt method which returns a Rect containing the selected cell’s geometry and position relative to the table control’s location on its parent. This allows us to anchor the popover container to an individual cell.

This is useful when you need to show the full contents of a cell whose displayed area can’t fit the underlying data.

In this example, the popover container is intentionally simple – it is a TextArea sized to fill the container.  The container is named PopOverContainer. The Window includes a property named AnchorControl As DesktopRectangle that we’ll use as the popover’s anchor.

In the Window Opening event, we initialize the anchor rectangle:

Sub Opening() Handles Opening
  AnchorControl = New DesktopRectangle
  Window1.AddControl(AnchorControl)
  AnchorControl.BorderThickness = 0.0
  AnchorControl.FillColor = &c000000FF ' Transparent on MacOS, Window background color on Windows

End Sub

This initializes the rectangle that we will anchor the popover to.

Lastly the CellPressed Event Hanlder:

Function CellPressed(row As Integer, column As Integer, x As Integer, y As Integer) Handles CellPressed as Boolean
  #Pragma Unused x
  #Pragma Unused y
  If column <> 1 Then ' We only want the popover to show on Column 1
    Return False
  End If
  
  // Move the Anchor control to the selected cell position.
  AnchorControl.Left = me.CellBoundsAt(row, column).Left + me.Left
  AnchorControl.Top = me.CellBoundsAt(row, column).Top + me.Top + me.CellBoundsAt(row, column).Height ' I want the popover to anchor to the bottom of the control
  AnchorControl.Width = me.CellBoundsAt(row, column).Width
  AnchorControl.Height = If(TargetWindows, 0, 1) ' Windows can handle 0 height, MacOS doesn't  

  // Now that we have an anchor point at the correct location we can popover

  Var poc As New PopOverContainer

  poc.TextArea1.Text = me.CellTextAt(row, column)

  poc.ShowPopover(AnchorControl, DesktopContainer.DisplaySides.Bottom)
  Return True
End Function

Cross-platform Adjustments

Some adjustments will need to be made for the different ways targets handle transparency.  Windows doesn’t visually render transparent controls in the same way macOS does, and macOS may require the anchor control to occupy a space.  By setting the anchor height appropriately, we can ensure the popover is positioned correctly on both platforms.

Download the project.

Wayne Golding has been a Xojo developer since 2005 and is a Xojo MVP. He operates the IT Company Axis Direct Ltd which primarily develops applications using Xojo that integrate with Xero www.xero.com. Wayne’s hobby is robotics where he uses Xojo to build applications for his Raspberry Pi, often implementing IoT for remote control.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Download Xojo

Most existing DesktopListBox code will compile with little or no change when transitioning to DesktopTable. At the same time, DesktopTable adds features that previously required custom controls or additional code.

What’s New?

DesktopTable adds support for:

• Frozen columns and rows — Keep important columns, headers, or totals visible while scrolling

• Merged cells — Span cells across rows and columns for titles, groupings, and custom layouts
• Sticky section headers — Keep section headers pinned as their section scrolls
• Hidden and reorderable columns — Hide columns without removing their data, or let users rearrange them
• Per-row heights — Set individual row heights and optionally allow users to resize rows

• Insets — Add space before the first or after the last row
• Progress bars, checkboxes, and containers — Built-in cell types for richer data presentation

• Custom cell controls — Use CellBoundsAt to position your own controls over cells
• Automatic Right-to-Left support — The table automatically adapts and aligns columns and text for right-to-left languages

• Virtual data sources — Work with large datasets without storing every row in the control
• CSV and TSV support — Save and load table data directly
• Row swipe actions — Provide familiar leading and trailing actions on macOS, Windows, and Linux touchpads

• Live column resizing — Respond while a column is being resized, as well as when resizing finishes
• Custom drawing and macOS vibrancy — More control over the table’s appearance and behavior

Moving from DesktopListBox

The transition is intentionally straightforward. Change the super of your DesktopListBox control to DesktopTable, build your project, and address the few members that have been renamed.

Most familiar APIs—including AddRow, CellTextAt, ColumnCount, ColumnWidths, RemoveRowAt, and SelectedRowIndex—retain their existing names.

A Few Things to Check

Some behavior is intentionally different. In particular, row reordering with a DataSource or expandable rows requires you to handle DragReorderRows, and row dragging requires DragRow to populate the DragItem and return True.

Sorting also removes merged cells, so applications using merged cells should re-apply their merges after sorting. Frozen rows retain their position and cannot be reordered.

If you want to improve performance when adding and removing rows, you can set AllowRowAnimation to False.

An Enhanced IDE Experience

We couldn’t introduce DesktopTable without enhancing the IDE experience as well. Table editing in the IDE is now more intuitive, compared against DesktopListBox, making it easier to edit and work with your tables.

We’ve also updated the debugger to better handle DesktopTable contents, efficiently loading rows dynamically and allowing you to jump directly to and inspect specific rows without loading the entire table.

Final Thoughts

DesktopTable gives existing DesktopListBox applications a familiar starting point while opening the door to considerably richer table interfaces. Stay tuned for more blog posts exploring many of its exciting new features!

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Download Xojo