how to change the check image on a checkbox

Question

it has text, an image, and then the checkbox,

I want to use a better image for the check, but cannot find a way to change the checked and unchecked images

this.checkBox1.CheckAlign = System.Drawing.ContentAlignment.MiddleRight;
this.checkBox1.Checked = true;
this.checkBox1.CheckState = System.Windows.Forms.CheckState.Checked;
this.checkBox1.Image = global::ClientExam.Properties.Resources.action32;
this.checkBox1.Location = new System.Drawing.Point(145, 140);
this.checkBox1.Name = "checkBox1";
this.checkBox1.Size = new System.Drawing.Size(273, 127);
this.checkBox1.TabIndex = 0;
this.checkBox1.Text = "checkBox1";
this.checkBox1.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage;
this.checkBox1.UseVisualStyleBackColor = true;

anybody know of one that doesn't require me to write my own control?

Solution 1

If you are looking for how to do this in Winforms, the simple answer is to create a new checkbox class that derives from CheckBox, then override the OnPaint method.

Here is an example on how to create custom looking checkboxes by overriding the OnPaint method:

public class CustomCheckBox : CheckBox
{
    public CustomCheckBox()
    {
        this.SetStyle(ControlStyles.UserPaint, true);
        this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
    }

    protected override void OnPaint(PaintEventArgs pevent)
    {
        base.OnPaint(pevent);
        if (this.Checked)
        {
            pevent.Graphics.FillRectangle(new SolidBrush(Color.Blue), new Rectangle(0, 0, 16, 16));
        }
        else
        {
            pevent.Graphics.FillRectangle(new SolidBrush(Color.Red), new Rectangle(0, 0, 16, 16));
        }
    }
}

It's very simple, but it gives you the basic idea.

Solution 2

For anyone who'd prefer not to override OnPaint, there's an alternative solution:

1. Add an ImageList control and fill it with images to reflect checked/unchecked states.
2. Set your Checkbox control's Appearance property to Button (to get rid of standard CheckBox icon)
3. Set its' FlatStyle property to Flat (so that the control doesn't really look like a button).
   Note: You may want to check its' FlatAppearance group of properties too. Namely CheckedBackColor, MouseDownBackColor, MouseOverBackColor, i.e. set them all to Control value.
4. Set Checkbox control's ImageList property to the name of your ImageList control.
5. Set Checkbox control's Imageindex and ImageAlign properties to reflect its' current state.
6. Last and most importantly set Checkbox control's TextImageRelation property (this value won't let the text and image overlap unless you want them to). I.e. ImageBeforetext value represents common CheckBox icon location.

Now the only thing left to do is to change the image when the state is changed, smth like this:

    private void chkMyCheckBoxWithAnImage_CheckedChanged(object sender, EventArgs e)
    {
        if (chkMyCheckBoxWithAnImage.Checked)
            chkMyCheckBoxWithAnImage.ImageIndex = 1;
        else
            chkMyCheckBoxWithAnImage.ImageIndex = 0;
    }

Comments

[rory.ap]

In my opinion this should be the answer. The other answer doesn't mention that you have to handle drawing the text in addition to the images.

[Darryn Frost]

You can do exactly the same thing without the image list just by setting the image property directly in the CheckedChanged event.