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