Library tutorials & articles

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.

Comments

  1. 30 Jan 2009 at 17:58
    Nice article, I'm writing a toolstrip type control and this helped me figure out how to remove the child component on deletion. I liked how you selected components in the control on mouse down, however, I had done it differently. Because my control was written in the compact framework, with the designer code being in the full framework. I couldn't select my component in the control code itself by checking for design mode. Therefore, I handled wndproc: protected override void WndProc(ref System.Windows.Forms.Message m) { // left mouse down if (m.Msg == WM_LBUTTONDOWN) { int data = m.LParam.ToInt32(); int y = (int)(data & 0xFFFF0000) >> 16; int x = (int)(data & 0x0000FFFF); Point pt = new Point(x, y); OptionStrip strip = (Control as OptionStrip); clickItem = strip.GetItemAt(pt); if (clickItem != null) return; } else if (m.Msg == WM_LBUTTONUP && clickItem != null) { int data = m.LParam.ToInt32(); int y = (int)(data & 0xFFFF0000) >> 16; int x = (int)(data & 0x0000FFFF); Point pt = new Point(x, y); OptionStrip strip = (Control as OptionStrip); if (strip.GetItemAt(pt).Equals(clickItem)) { ISelectionService ss = (ISelectionService)GetService(typeof(ISelectionService)); ArrayList list = new ArrayList(); list.Add(clickItem); ss.SetSelectedComponents(list, SelectionTypes.Primary); } clickItem = null; return; } I think your solution is simpler, and probably more solid, but this is necessary as the ISelectionService does not exist in the compact framework. However, it does seperate design time code.
  2. 23 May 2007 at 19:35

    GREAT ARTICLE¡¡¡  thank you very, very much, now i can finish my own control. 

    I could not save my own custom class object, NOW I CAN.

  3. 19 Mar 2007 at 09:08
    I've tried to compile the code I've downloaded but at run-time (placed in a form on another project) I don't see the buttons I've created at deign-time..
  4. 17 Jan 2007 at 19:46
    Is it safe to assume value (of complex type) of a property has instance descriptor converter for every component/control you dropped on design surface.

    Regards
    Phani




  5. 01 Jan 1999 at 00:00

    This thread is for discussions of Collection Controls with Rich Design Time Support.

Leave a comment

Sign in or Join us (it's free).

Tim Dawson

Related discussion

Related podcasts

  • More jQuery in ASP.NET

    In this episode Chris Brandsma, Rick Strahl, Dave Ward, Bertrand Le Roy, and Scott Koon conclude their discussion of Microsoft's jQuery in ASP.NET announcement1.This episode of the Alt.NET Podcast is brought to you by LLBLGen Pro, the most mature O/R mapper and code generator out there.Are ...

Events coming up

  • Dec 9

    GL.net Group Meeting - December 2009

    Gloucester, United Kingdom

    The beginning of this year holiday season will belong to mocks. Ronnie and Stephen will take us for a tour around exciting world of unit testing.

Want to stay in touch with what's going on? Follow us on twitter!