Pages

Windows Form TextBox UI 調整

Aug 15, 2013

近日著手修改 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



 



參考