With wxWidgets, is there a straightforward way to draw lines between items in two lists?

Question

Specifically in wxHaskell, but in general, would like to be able to draw lines between items in two lists that are side by side to show that there is a relationship between the items. Something like the mockup below.

Answer 1

Perhaps there is something about your setup that I do not understand, but this seems perfectly straightforward.

Suppose you want to draw a line between input one and output three.

• You need four co-ordinates in the co-ordinate system of the window that is the parent of the two lists. Lets call them xi, yi, xo, yo

• The xi and xo are constants

• The yi and yo depend only on the height of one row in your lists and the index number of the items.

• Now create a wxClientDC from the parent window

• And draw your line in the DC.

  parentWindowDC.DrawLine(xi,yi,xo,yo);

I notice that you have shown the arrows on TOP of the list windows. The above will draw them behind. To draw them in the top, you will have to do a little bit of computational geometry, then you can calculate the points where the line (xi,yi,xo,yo) intersects the edges of the two list boxes. Then you draw three lines, using the same brush,

• between xi,yi and the intersection with the input box edge in the input window DC
• between the two intersections in the parent window DC
• between the output box edge and xo,yo in the output box DC

Answer 2

There is no class for that in wxWidgets but there are some possible workarounds:

• If you need a cross-platform solution then there is definitely no simple way to implement this. You can try to create a non-rectangular top-level window which has the form of these arrows and move it together with your frame. It is an awful solution but I mentioned it just FYI.
• If your app is Windows only then you can try to take a look at Locus Effect article at CodeProject. Maybe it will provide a hint of how you can implement the desired functionality
• For Windows I thik that you also can user DirectX Overlay or just a non-rectangular control using SetWindowRgn function. Worked fine for me for non-rectangular buttons so should work in your case.
• Any other solution will be platform-specific and will require 'native' coding IMHO.