2015/2/7

【C#】客製化外觀的三態按鈕(Three State CheckBox)

.NET提供的CheckBox元件本身就支援三態按鈕(三種選取狀態),只要把屬性ThreeState設定為True即可
但有時候預設的外觀顯示與操作體驗可能無法準確呈現使用情境,這時可以新建一個類別繼承CheckBox並重載OnPaint與OnClick方法來客製化符合使用情境的三態按鈕
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class CheckBoxTriState : CheckBox
{
    public CheckBoxTriState()
    {
        ThreeState = true;
        CheckState = System.Windows.Forms.CheckState.Indeterminate;
        Text = String.Empty;
        Size = new Size(20, 40);
    }

    protected override void OnPaint(PaintEventArgs pevent)
    {
        Graphics g = pevent.Graphics;
        g.Clear(Color.LightGray);
        Brush b = new SolidBrush(Color.DarkGray);
        g.DrawRectangle(new Pen(b), 0, 0, Width, Height);

        float radius = (float)(Width * 0.9);
        float margin = (float)(Width * 0.05);
        if (CheckState == System.Windows.Forms.CheckState.Indeterminate)
            g.FillEllipse(b, margin, (float)(Height / 4.0) + margin, radius, radius);
        else if (CheckState == System.Windows.Forms.CheckState.Checked)
            g.FillEllipse(b, margin, margin, radius, radius);
        else
            g.FillEllipse(b, margin, (float)(Height / 2.0 - margin), radius, radius);
    }

    protected override void OnClick(EventArgs e)
    {
        Point pos = this.PointToClient(Cursor.Position);
        if (pos.Y < Height / 3)
            CheckState = System.Windows.Forms.CheckState.Checked;
        else if (pos.Y > Height * 2 / 3)
            CheckState = System.Windows.Forms.CheckState.Unchecked;
        else
            CheckState = System.Windows.Forms.CheckState.Indeterminate;
    }
}
使用方始與一般的CheckBox相同
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        CheckBoxTriState check = new CheckBoxTriState();
        check.Location = new Point(10, 10);
        Controls.Add(check);

        CheckBoxTriState check2 = new CheckBoxTriState();
        check2.Location = new Point(40, 10);
        check2.CheckState = CheckState.Checked;
        Controls.Add(check2);

        CheckBoxTriState check3 = new CheckBoxTriState();
        check3.Location = new Point(70, 10);
        check3.CheckState = CheckState.Unchecked;
        Controls.Add(check3);
    }
}
Keyword:How to customize a tri-state checkbox / button in C#

2015/2/2

【C#】客制化可調大小的勾選元件(CheckBox)

CheckBox的方框大小是以Hard Coded方式寫死的,因此沒辦法藉由設定CheckBox任何參數來改變勾選框框的大小,但可以透過override方是依自己需求重新繪製方框,直接看程式碼:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
class CheckBoxEx : CheckBox
{
    public CheckBoxEx()
    {
    }

    public override string Text
    {
        get
        {
            return base.Text;
        }
        set
        {
            base.Text = value;
            Size size = TextRenderer.MeasureText(value, Font);
            if (Width < size.Width + ClientSize.Height)
                Width = size.Width + ClientSize.Height;
        }
    }

    public override Font Font
    {
        get
        {
            return base.Font;
        }
        set
        {
            base.Font = value;
            Size size = TextRenderer.MeasureText(Text, value);
            if (Width < size.Width + ClientSize.Height)
                Width = size.Width + ClientSize.Height;
        }
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        int h = ClientSize.Height;
        Rectangle rc = new Rectangle(new Point(0, 0), new Size(h, h));
        e.Graphics.Clear(Parent.BackColor);
        ControlPaint.DrawCheckBox(e.Graphics, rc,
            this.Checked ? ButtonState.Checked : ButtonState.Normal);
        SizeF size = e.Graphics.MeasureString(Text, Font);
        e.Graphics.DrawString(Text, this.Font,
            new SolidBrush(Color.Blue), new PointF(h, size.Height < h ? (h - size.Height) / 2 : 0));
    }
}
重點在於重載OnPaint這個繪圖函數,在函數內使用ControlPaint.DrawCheckBox重新繪製方框外形,因重載了原本OnPaint,因此要自己把文字補畫上去(參考44 ~ 46行)。
  因重設字型大小或顯示文字內容會影響CheckBox的呈現寬度,因此一併重載TextFont屬性,當使用者更改這兩個屬性值,則要重新計算CheckBox的寬度,否則文字呈現可能會被截斷。
  使用方法跟一般CheckBox一樣:
1
2
3
4
5
6
CheckBoxEx check = new CheckBoxEx();
check.Location = new Point(40, 40);
check.ClientSize = new Size(30, 30);
check.Text = "Hello CheckBox";
check.Font = new System.Drawing.Font("新細明體", 18);
Controls.Add(check);

Keyword:Customize checkbox size