Windows Form TextBox UI 調整

近日著手修改 Windows Form 專案中，執行程式與視覺設計的原搞差很大，其中以 TextBox 為例有以下要求：

A. 所有採用控制項採用相同字型與顏色

B. 可輸入的TextBox

    (1)其邊框顏色是…

    (2)取得焦點時背景顏色是…

    (3)離開焦點時背景顏色是…

C. 不可輸入的TextBox

    (1)其邊框顏色是…

    (2)背景顏色是…

SNAGHTML3c0474

UI 一致性

基於以上考量新增一個使用者控制項，來取代原本的 TextBox，

這個 UserControl 中僅有一個自訂的 TextBox 控制項，不讓消費端直接操控 TextBox 所有屬性與方法，如此即可做到 UI 一致性。

public partial class nsTextBoxControl : Control
    {
        nsTextBox textBox = new nsTextBox();
 
        public nsTextBoxControl()
        {
            InitializeComponent();
            this.Paint += new PaintEventHandler(UserControl1_Paint);
            this.Resize += new EventHandler(UserControl1_Resize);

            textBox.Multiline = false;
            textBox.BorderStyle = BorderStyle.None;
            textBox.Font = new System.Drawing.Font("Meiryo UI", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(136)));
            this.Controls.Add(textBox);
        }
...

}


 



繪製邊框顏色



Windows Form 原生的 TextBox 並沒有邊框顏色的屬性，而實際執行會因不同的作業系統呈現而有所不同。



後來參考 [How to change TextBox border color in C# ?]  進行實作如下：



private void UserControl1_Paint(object sender, PaintEventArgs e)
        {
            if (!ReadOnly)
            {

                ControlPaint.DrawBorder(e.Graphics, this.ClientRectangle
                    , BorderColorForInput, 1, ButtonBorderStyle.Solid
                    , BorderColorForInput, 1, ButtonBorderStyle.Solid
                    , BorderColorForInput, 1, ButtonBorderStyle.Solid
                    , BorderColorForInput, 1, ButtonBorderStyle.Solid
                    );
            }
            else
            {
                this.textBox.ForeColor = System.Drawing.Color.Gray;
                ControlPaint.DrawBorder(e.Graphics, this.ClientRectangle
                    , BorderColorForReadOnly, 1, ButtonBorderStyle.Solid
                    , BorderColorForReadOnly, 1, ButtonBorderStyle.Solid
                    , BorderColorForReadOnly, 1, ButtonBorderStyle.Solid
                    , BorderColorForReadOnly, 1, ButtonBorderStyle.Solid
                    );
            }

        }





取得焦點時變更顏色



這部份覆寫 TextBox 函式 OnGotFocus,  OnLostFocus ，改變控制項的底色。



protected override void OnGotFocus(EventArgs e)
        {
            if (!this.ReadOnly)
                this.BackColor = DefaultBackColorOnFocusForInput;
            else
                this.BackColor = DefaultBackColorOnFocusForReadOnly;

            base.OnGotFocus(e);
        }
        protected override void OnLostFocus(EventArgs e)
        {
            if (!this.ReadOnly)
                this.BackColor = DefaultBackColorOffFocusForInput;
            else
                this.BackColor = DefaultBackColorOffFocusForReadOnly;

            base.OnLostFocus(e);
        }


 



範例下載



這是以 VS2010 + .NET Framework 4.0 所撰寫，下載連結: NewStyleTextBox.zip



 



參考