Collection Controls with Rich Design Time Support

Drawing and Layout Logic

We have already created the CalculateLayout function (although it is blank at this point) and are calling it when buttons are added to or removed from the collection. We also need to override OnResize and call it there. For this example control we will display the buttons in one horizontal line, from left to right. We will leave some padding at the sides, then the buttons will take up the rest of the space vertically and make themselves as wide as they are tall.

The CalculateLayout function will also invalidate the control. Although you often redraw without calculating positions, you never calculate positions without redrawing.

VB.NET

Friend Sub CalculateLayout()
    Const PADDING As Integer = 3
    Dim buttonSize, x, i As Integer 'x is the current horizontal position
    Dim button As ColourButton
    Dim wrct As Rectangle
    x = PADDING
    buttonSize = ClientRectangle.Height - (2 * PADDING)
    For i = 0 To _buttons.Count - 1
        button = _buttons(i)
        'Create bounds rectangle for button and increment x
        wrct = New Rectangle(x, PADDING, buttonSize, buttonSize)
        button.Bounds = wrct
        x += buttonSize + PADDING
    Next
    'Mark the control as invalid so it gets redrawn
    Invalidate()
End Sub

C#

internal void CalculateLayout()
{
    const int PADDING = 3;
    int buttonSize, x, i; // x is the current horizontal position
    ColourButton button;
    Rectangle wrct;
    x = PADDING;
    buttonSize = ClientRectangle.Height - (2 * PADDING);
    for (i = 0; i < _buttons.Count; i++)
    {
        button = _buttons[i];
        // Create bounds rectangle for button and increment x
        wrct = new Rectangle(x, PADDING, buttonSize, buttonSize);
        button.Bounds = wrct;
        x += buttonSize + PADDING;
    }
    // Mark the control as invalid so it gets redrawn
    Invalidate();
}

Next is the drawing code, which for this example is incredibly simple. We override the OnPaint method to draw the buttons, simply filling their rectangles with a brush we create from their defined colour.

Note that there is another method, OnPaintBackground, which we do not touch. If we were doing anything special with the background of the control, like a different colour, we would. As it is, if we leave it we don't have to worry about painting the background at all. In fact since we're inheriting from UserControl our control already features a BackColor property and even a way to have an image as the background.

VB.NET

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
    Dim button As ColourButton
    Dim b As Brush
    Dim wrct As Rectangle
    For Each button In _buttons
        'Create brush from button colour
        If Not (b Is Nothing) Then b.Dispose()
        b = New SolidBrush(button.Colour)
        'Fill rectangle with this colour
        wrct = button.Bounds
        If highlightedButton Is button Then
            e.Graphics.FillRectangle(SystemBrushes.Highlight, RectangleF.op_Implicit(wrct))
            wrct.Inflate(-3, -3)
        End If
        e.Graphics.FillRectangle(b, wrct)
    Next
End Sub

C#

protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
    Brush b = null;
    Rectangle wrct;
    foreach(ColourButton button in _buttons)
    {
        // Create brush from button colour
        if (b != null)
            b.Dispose();
        b = new SolidBrush(button.Colour);
        // Fill rectangle with this colour
        wrct = button.Bounds;
        if (highlightedButton == button)
        {
            e.Graphics.FillRectangle(SystemBrushes.Highlight, wrct);
            wrct.Inflate(-3, -3);
        }
        e.Graphics.FillRectangle(b, wrct);
    }
}

Note that I've introduced a variable scoped to the control to contain a reference to the button which should have a highlight drawn on it, if any. This will be important later when we deal with the user selecting buttons as design time. At this point, the control actually works. Since I haven't hidden the Buttons property from the propertygrid yet, after adding the control to a form I can go in to the collection editor and add buttons to it. The buttons all show up as white squares, but we're well on our way.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“If Java had true garbage collection, most programs would delete themselves upon execution.” - Robert Sewell