Resizing the click area of a checkbox.

  • Thread starter Thread starter Rob W
  • Start date Start date
R

Rob W

Greetings,

I'm developing an application for people with less than perfect eyesight ,
thus I'm ensuring all controls are clearly visible with the problem being
the checkbox.

I quickly discovered the size property relates to the container housing the
checkbox and optional text.

I then when to examine the checkbox properties from the Form1.Designer.vb
and couldn't see anything related to the checkbox.

I then thought about adding a custom control, never done this before ..

My code below (bottom of post), which well doesn't do anything.

Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?

Thanks
Rob
Public Class BiggerCheckBox

Inherits CheckBox

Protected Overrides Sub OnPaint( _

ByVal pevent As System.Windows.Forms.PaintEventArgs)

MyBase.OnPaint(e)

'Draw checkbox

End Sub

End Class
 
Rob W said:
Greetings,

I'm developing an application for people with less than perfect eyesight ,
thus I'm ensuring all controls are clearly visible with the problem being
the checkbox.

I quickly discovered the size property relates to the container housing
the checkbox and optional text.

I then when to examine the checkbox properties from the Form1.Designer.vb
and couldn't see anything related to the checkbox.

I then thought about adding a custom control, never done this before ..

My code below (bottom of post), which well doesn't do anything.

Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?

Thanks
Rob
Public Class BiggerCheckBox

Inherits CheckBox

Protected Overrides Sub OnPaint( _

ByVal pevent As System.Windows.Forms.PaintEventArgs)

MyBase.OnPaint(e)

'Draw checkbox

End Sub

End Class
Click to expand...

It looks like you started by inheriting CheckBox. I would suggest trying to
create a custom user control. To do this, just select "Add" "New User
Control" into your project. You will get what looks like a form with no
borders. I would add a picture box to the left and a label to the right.

Double click the picture box, so the IDE creates an event handler for the
picture box click. In this method toggle a boolean property that the
control holds. The picture displayed in the picture box can be based on the
boolean property. Just find (or create) two images, one with a big checked
box and one without the checkmark. You should not need to worry about the
paint method, just let the picture box handle that with the correct image.

You should connect the text label to a property so you can control it from
outside like the common check box control.
 
Rob W said:
Greetings,

I'm developing an application for people with less than perfect eyesight ,
thus I'm ensuring all controls are clearly visible with the problem being
the checkbox.

I quickly discovered the size property relates to the container housing
the checkbox and optional text.

I then when to examine the checkbox properties from the Form1.Designer.vb
and couldn't see anything related to the checkbox.

I then thought about adding a custom control, never done this before ..

My code below (bottom of post), which well doesn't do anything.

Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?

Thanks
Rob
Public Class BiggerCheckBox

Inherits CheckBox

Protected Overrides Sub OnPaint( _

ByVal pevent As System.Windows.Forms.PaintEventArgs)

MyBase.OnPaint(e)

'Draw checkbox

End Sub

End Class
Click to expand...

It looks like you started by inheriting CheckBox. I would suggest trying to
create a custom user control. To do this, just select "Add" "New User
Control" into your project. You will get what looks like a form with no
borders. I would add a picture box to the left and a label to the right.

Double click the picture box, so the IDE creates an event handler for the
picture box click. In this method toggle a boolean property that the
control holds. The picture displayed in the picture box can be based on the
boolean property. Just find (or create) two images, one with a big checked
box and one without the checkmark. You should not need to worry about the
paint method, just let the picture box handle that with the correct image.

You should connect the text label to a property so you can control it from
outside like the common check box control.
 
Hi,

Rob said:
Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?
Click to expand...

here's something that's far from perfect, but it should at least get you
started.
Basically it inherits from the standard checkbox control and just paints a
checkbox-image over where the original used to be. This code is actually
from a control I built a while time ago for completeley different reasons.
My control also included a designer-class to i.e. remove some of the
original properties and it only required two instead of three states.
In order to keep things simple, I thus removed some bits here and there and
i.e. replaced the color-properties.

The problem that you'll be facing is that the text in the control below is
still be drawn by means of the original textbox. If you enlarge the
checkbox-rectangle, you should be drawing the text yourself rather than
leave it up to the original control. In fact I'd remove the call to
<MyBase.OnPaint(pevent)> and do all the drawing myself. If you want to keep
the AutoSize property, you'll have to do some extra work (see i.e.
MeasureString, DrawString, TextRenderingHint, StringFormat et al).

<ToolboxBitmap(GetType(CheckBox))> _
Public Class BiggerCheckbox
Inherits System.Windows.Forms.CheckBox

Protected Overrides Sub OnPaint( _
ByVal pevent As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(pevent)

Dim g As Graphics = pevent.Graphics

'Set the size of the checkbox-image here
Const conCheckboxWidth As Integer = 11
Const conCheckboxHeight As Integer = 11

'Remove the original checkbox (original size in .Net = 13h * 11v)
g.FillRectangle( _
New SolidBrush(Me.BackColor), _
New Rectangle(Me.ClientRectangle.X + Me.Padding.Left, _
Me.ClientRectangle.Y + Me.Padding.Top, 13, _
Me.ClientRectangle.Height))

'Draw a custom checkbox

'1. Define the area of the checkbox
Dim rect As New Rectangle( _
Me.ClientRectangle.X + Me.Padding.Left, _
CType((Me.ClientRectangle.Height - conCheckboxHeight - 2) / 2, _
Integer), _
conCheckboxWidth, _
conCheckboxHeight)

'Draw the background (white rectangle)
g.FillRectangle(Brushes.White, rect)

'Draw the checkmark (add some code to keep it centered)
If Me.Checked Then ControlPaint.DrawMenuGlyph( _
g, _
rect.X + 1, _
rect.Y - 1, _
rect.Width + 3, _
rect.Height + 2, _
MenuGlyph.Checkmark, _
Color.Black, _
Color.Transparent)

'Draw an inner border ("3D-effect")
Dim p As New Pen(Color.FromArgb(202, 202, 202), 1)
g.DrawRectangle(p, _
rect.X + 1, rect.Y + 1, rect.Width - 1, rect.Height - 1)

'Draw an outer border
p.Color = Color.FromArgb(103, 110, 117)
g.DrawRectangle(p, rect)

If Not Me.Enabled Then
'Paint a transparent shape over the checkmark
g.FillRectangle( _
New SolidBrush(Color.FromArgb(120, 225, 225, 230)), rect)
End If
p.Dispose()
End Sub
End Class

Cheers,
Olaf
 
Hi,

Rob said:
Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?
Click to expand...

here's something that's far from perfect, but it should at least get you
started.
Basically it inherits from the standard checkbox control and just paints a
checkbox-image over where the original used to be. This code is actually
from a control I built a while time ago for completeley different reasons.
My control also included a designer-class to i.e. remove some of the
original properties and it only required two instead of three states.
In order to keep things simple, I thus removed some bits here and there and
i.e. replaced the color-properties.

The problem that you'll be facing is that the text in the control below is
still be drawn by means of the original textbox. If you enlarge the
checkbox-rectangle, you should be drawing the text yourself rather than
leave it up to the original control. In fact I'd remove the call to
<MyBase.OnPaint(pevent)> and do all the drawing myself. If you want to keep
the AutoSize property, you'll have to do some extra work (see i.e.
MeasureString, DrawString, TextRenderingHint, StringFormat et al).

<ToolboxBitmap(GetType(CheckBox))> _
Public Class BiggerCheckbox
Inherits System.Windows.Forms.CheckBox

Protected Overrides Sub OnPaint( _
ByVal pevent As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(pevent)

Dim g As Graphics = pevent.Graphics

'Set the size of the checkbox-image here
Const conCheckboxWidth As Integer = 11
Const conCheckboxHeight As Integer = 11

'Remove the original checkbox (original size in .Net = 13h * 11v)
g.FillRectangle( _
New SolidBrush(Me.BackColor), _
New Rectangle(Me.ClientRectangle.X + Me.Padding.Left, _
Me.ClientRectangle.Y + Me.Padding.Top, 13, _
Me.ClientRectangle.Height))

'Draw a custom checkbox

'1. Define the area of the checkbox
Dim rect As New Rectangle( _
Me.ClientRectangle.X + Me.Padding.Left, _
CType((Me.ClientRectangle.Height - conCheckboxHeight - 2) / 2, _
Integer), _
conCheckboxWidth, _
conCheckboxHeight)

'Draw the background (white rectangle)
g.FillRectangle(Brushes.White, rect)

'Draw the checkmark (add some code to keep it centered)
If Me.Checked Then ControlPaint.DrawMenuGlyph( _
g, _
rect.X + 1, _
rect.Y - 1, _
rect.Width + 3, _
rect.Height + 2, _
MenuGlyph.Checkmark, _
Color.Black, _
Color.Transparent)

'Draw an inner border ("3D-effect")
Dim p As New Pen(Color.FromArgb(202, 202, 202), 1)
g.DrawRectangle(p, _
rect.X + 1, rect.Y + 1, rect.Width - 1, rect.Height - 1)

'Draw an outer border
p.Color = Color.FromArgb(103, 110, 117)
g.DrawRectangle(p, rect)

If Not Me.Enabled Then
'Paint a transparent shape over the checkmark
g.FillRectangle( _
New SolidBrush(Color.FromArgb(120, 225, 225, 230)), rect)
End If
p.Dispose()
End Sub
End Class

Cheers,
Olaf
 
Hi Rob,

Rob said:
Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?
Click to expand...

here's something that's far from perfect, but it should at least get you
started.
Basically it inherits from the standard checkbox control and just paints a
checkbox-image over where the original used to be. This code is actually
from a control I built a while time ago for completeley different reasons.
My control also included a designer-class to i.e. remove some of the
original properties and it only required two instead of three states.
In order to keep things simple, I thus removed some bits here and there and
i.e. replaced the color-properties.

The problem that you'll be facing is that the text in the control below is
still be drawn by means of the original textbox. If you enlarge the
checkbox-rectangle, you should be drawing the text yourself rather than
leave it up to the original control. In fact I'd remove the call to
<MyBase.OnPaint(pevent)> and do all the drawing myself. If you want to keep
the AutoSize property, you'll have to do some extra work (see i.e.
MeasureString, DrawString, TextRenderingHint, StringFormat et al).

<ToolboxBitmap(GetType(CheckBox))> _
Public Class BiggerCheckbox
Inherits System.Windows.Forms.CheckBox

Protected Overrides Sub OnPaint( _
ByVal pevent As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(pevent)

Dim g As Graphics = pevent.Graphics

'Set the size of the checkbox-image here
Const conCheckboxWidth As Integer = 11
Const conCheckboxHeight As Integer = 11

'Remove the original checkbox (original size in .Net = 13h * 11v)
g.FillRectangle( _
New SolidBrush(Me.BackColor), _
New Rectangle(Me.ClientRectangle.X + Me.Padding.Left, _
Me.ClientRectangle.Y + Me.Padding.Top, 13, _
Me.ClientRectangle.Height))

'Draw a custom checkbox

'1. Define the area of the checkbox
Dim rect As New Rectangle( _
Me.ClientRectangle.X + Me.Padding.Left, _
CType((Me.ClientRectangle.Height - conCheckboxHeight - 2) / 2, _
Integer), _
conCheckboxWidth, _
conCheckboxHeight)

'Draw the background (white rectangle)
g.FillRectangle(Brushes.White, rect)

'Draw the checkmark (add some code to keep it centered)
If Me.Checked Then ControlPaint.DrawMenuGlyph( _
g, _
rect.X + 1, _
rect.Y - 1, _
rect.Width + 3, _
rect.Height + 2, _
MenuGlyph.Checkmark, _
Color.Black, _
Color.Transparent)

'Draw an inner border ("3D-effect")
Dim p As New Pen(Color.FromArgb(202, 202, 202), 1)
g.DrawRectangle(p, _
rect.X + 1, rect.Y + 1, rect.Width - 1, rect.Height - 1)

'Draw an outer border
p.Color = Color.FromArgb(103, 110, 117)
g.DrawRectangle(p, rect)

If Not Me.Enabled Then
'Paint a transparent shape over the checkmark
g.FillRectangle( _
New SolidBrush(Color.FromArgb(120, 225, 225, 230)), rect)
End If
p.Dispose()
End Sub
End Class

Cheers,
Olaf
 
Hi Rob,

Rob said:
Can anybody provide me with some pointers to help me in drawing my own
cusomised checkbox that is much bigger than original?
Click to expand...

here's something that's far from perfect, but it should at least get you
started.
Basically it inherits from the standard checkbox control and just paints a
checkbox-image over where the original used to be. This code is actually
from a control I built a while time ago for completeley different reasons.
My control also included a designer-class to i.e. remove some of the
original properties and it only required two instead of three states.
In order to keep things simple, I thus removed some bits here and there and
i.e. replaced the color-properties.

The problem that you'll be facing is that the text in the control below is
still be drawn by means of the original textbox. If you enlarge the
checkbox-rectangle, you should be drawing the text yourself rather than
leave it up to the original control. In fact I'd remove the call to
<MyBase.OnPaint(pevent)> and do all the drawing myself. If you want to keep
the AutoSize property, you'll have to do some extra work (see i.e.
MeasureString, DrawString, TextRenderingHint, StringFormat et al).

<ToolboxBitmap(GetType(CheckBox))> _
Public Class BiggerCheckbox
Inherits System.Windows.Forms.CheckBox

Protected Overrides Sub OnPaint( _
ByVal pevent As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(pevent)

Dim g As Graphics = pevent.Graphics

'Set the size of the checkbox-image here
Const conCheckboxWidth As Integer = 11
Const conCheckboxHeight As Integer = 11

'Remove the original checkbox (original size in .Net = 13h * 11v)
g.FillRectangle( _
New SolidBrush(Me.BackColor), _
New Rectangle(Me.ClientRectangle.X + Me.Padding.Left, _
Me.ClientRectangle.Y + Me.Padding.Top, 13, _
Me.ClientRectangle.Height))

'Draw a custom checkbox

'1. Define the area of the checkbox
Dim rect As New Rectangle( _
Me.ClientRectangle.X + Me.Padding.Left, _
CType((Me.ClientRectangle.Height - conCheckboxHeight - 2) / 2, _
Integer), _
conCheckboxWidth, _
conCheckboxHeight)

'Draw the background (white rectangle)
g.FillRectangle(Brushes.White, rect)

'Draw the checkmark (add some code to keep it centered)
If Me.Checked Then ControlPaint.DrawMenuGlyph( _
g, _
rect.X + 1, _
rect.Y - 1, _
rect.Width + 3, _
rect.Height + 2, _
MenuGlyph.Checkmark, _
Color.Black, _
Color.Transparent)

'Draw an inner border ("3D-effect")
Dim p As New Pen(Color.FromArgb(202, 202, 202), 1)
g.DrawRectangle(p, _
rect.X + 1, rect.Y + 1, rect.Width - 1, rect.Height - 1)

'Draw an outer border
p.Color = Color.FromArgb(103, 110, 117)
g.DrawRectangle(p, rect)

If Not Me.Enabled Then
'Paint a transparent shape over the checkmark
g.FillRectangle( _
New SolidBrush(Color.FromArgb(120, 225, 225, 230)), rect)
End If
p.Dispose()
End Sub
End Class

Cheers,
Olaf
 
Back
Top