making a WYSIWYG report designer .NET control
the report designer is made up of three elements, a listBox that contains the report controls, a propertyGrid where we edit control properties, and the bandContainer.
Figure1 shows the reportDesigner control at design time.
Figure2 shows the designer at runtime with some reportControls in place.
Figure1
 | Figure2
 |
most of the interesting stuff occurs in the reportBand control. it is made up of a verticalRuler, a bandHeader (which is a usercontrol made to look like a button control) and a drawingSurface. the drawingSurface is where we drag and drop reportControls. the verticalRuler allows us to grow or shrink the reportBand. the bandHeader which is docked at the bottom of the reportBand also allows as to size the band aside from telling us the type of band.
the reportDesigner follows the MVC architecture pattern. mouse events in the drawingSurface are routed back to the controller for processing. the controller then calls appropriate methods in the view object depending on the current state.
the controller's state can be
Normal, Select, Drag, SizeHorizontal and SizeVertical. the controller goes into the
Select state whenever the left mouse button is clicked on a vacant area of the drawingSurface. if a widget is clicked, the controller goes into the
Drag state unless the mouse pointer is located on the right edge or the bottom edge of the widget. if the mouse pointer is on the former then the controller goes into the
SizeHorizontal state and if it is on the latter then the controller goes into the
SizeVertical state. the code below shows how to get this done.
state = DesignState.Select;
widget = context.FindWidget(pt);
if (widget != null)
{
if (!widget.IsSelected)
context.SelectWidget(widget);
state = DesignState.Drag;
if (widget.PointAtRight(pt))
state = DesignState.SizeHorizontal;
else if (widget.PointAtBottom(pt))
state = DesignState.SizeVertical;
}