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.

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.

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.