快閃人生: 2月 2015

2015/2/7

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

.NET提供的CheckBox元件本身就支援三態按鈕（三種選取狀態），只要把屬性ThreeState設定為True即可

但有時候預設的外觀顯示與操作體驗可能無法準確呈現使用情境，這時可以新建一個類別繼承CheckBox並重載OnPaint與OnClick方法來客製化符合使用情境的三態按鈕

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相同

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方是依自己需求重新繪製方框，直接看程式碼：

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的呈現寬度，因此一併重載Text與Font屬性，當使用者更改這兩個屬性值，則要重新計算CheckBox的寬度，否則文字呈現可能會被截斷。
　　使用方法跟一般CheckBox一樣：

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