Implementing MS Access style 'relationships' GUI

Question

I have no idea what the correct name for this UI style is. In MS Access the 'relationships' tool shows the db tables as little movable boxes that can be linked with lines. It's the same with Visio and a few audio apps - boxes that are movable, containing lines of text that can be joined together in a meaningful way.

How could I create a similar thing in .NET using Visual Studio 2008 and C#? I've never created my own controls before.

Here's an image of the sort of thing I mean: Click for example

Database Schema - http://en.wikipedia.org/wiki/Database_schema — Russ Cam, Apr 21 '09 at 20:30
Right, so how do I make one of those types of diagram in my own application? How do I draw boxes, lines and put text in them, using code? — Piku, Apr 24 '09 at 02:10
It kinda depends on what UI framework you want to use. If you are using Windows forms you'll probably want to look into GDI+ (System.Windows.Drawing) if you use WPF it might be easier. In fact it really would be. One way of doing it would be to restyle a ListBox. I suggest you get to know WPF and then read this article: http://www.beacosta.com/blog/?p=40 — TimothyP, Apr 25 '09 at 15:24

score 1 · Accepted Answer · answered May 25 '09 at 08:43

You'll need two main custom controls: the main view and the table control.

The table control is responsible for drawing itself with all of its columns and ensuring that the item can scroll if need be. It is also responsible for providing an x/y co-ordinate for a specified row header. This is so that the relationship lines can match up to the correct row.

The main view is responsible for accepting a list of table objects (stored in a custom table object), creating the same number of table controls and arranging them in a specified order. It is also responsible for drawing the lines between the table controls.

All in all, this is not trivial. You'll want to override the OnPaint() method of both these controls to do all this custom drawing. Do some research on the GDI+ graphics routines to find out what methods you can use to draw this. You'll probably be using these objects/methods most often:

Pen
SolidBrush
LinearGradientBrush
DrawRectangle()
FillRectangle()
DrawString()
DrawImage()
DrawLine()
DrawPath()

You'll also need to trap all kinds of mouse events to enable moving the controls around. This can be done by overriding methods such as OnMouseDown or OnMouseMove.

Good luck.