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

Answer 1

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.