Display caption in input field C#

Question

Possible Duplicate:
Watermark TextBox in WinForms

I'm currently programming the settings dialog of a C# application. The input fields should look like that:

Input field empty → Input field filled out

What's the best way to realize that? I've thought of creating a background-image but I would like to know if there's a better way to do that (something dynamically)...

Metro? WinForms? WPF? Silverlight? Windows Phone? ASP.Net? MonoTouch? — SLaks, Jul 22 '12 at 17:11
something like [this watermarked edit controls example](http://www.aaronlerch.com/blog/2007/12/01/watermarked-edit-controls/)? — Adam, Jul 22 '12 at 17:15
I don't think that's the same KeithS wanted to accomplish since my caption shouldn't disappear when a click event is fired... — libjup, Jul 22 '12 at 18:07

score 3 · Answer 1 · edited Jul 22 '12 at 17:51

3

Use a panel with white set as the BackColor.
In the panel control, on the left insert a TextBox with BorderStyle set to None.
In the panel control, on the right insert a Label with BackColor set to Transparent and set Text to "Firstname".

enter image description here

edited Jul 22 '12 at 17:51

Adam

15,537
2
42
63

answered Jul 22 '12 at 17:33

Hassan Boutougha

3,871
1
17
17

That's definitely a simple solution - thx! But actually I was looking for something I can use as one piece. Like the subclass of Forms.TextBox from the tutorial you suggested me earlier: [link](http://www.aaronlerch.com/blog/2007/12/01/watermarked-edit-controls/) – libjup Jul 22 '12 at 18:20

pescolino · Answer 2 · 2012-07-23T00:39:30.800

I think this does pretty much what you need:

public class MyTextBox : TextBox
{
    public const int WM_PAINT = 0x000F;

    protected override void WndProc(ref Message m)
    {
        switch (m.Msg)
        {
            case WM_PAINT:
                Invalidate();
                base.WndProc(ref m);
                if (!ContainsFocus && string.IsNullOrEmpty(Text))
                {
                    Graphics gr = CreateGraphics();
                    StringFormat format = new StringFormat();
                    format.Alignment = StringAlignment.Far;

                    gr.DrawString("Enter your name", Font, new SolidBrush(Color.FromArgb(70, ForeColor)), ClientRectangle, format);
                }
                break;
            default:
                base.WndProc(ref m);
                break;
        }
    }
}

Overriding OnPaint on a TextBox is usually not a good idea because the position of the caret will be calculated wrong.

Please notice that the label is shown only when the TextBox is empty and does not have the focus. But this is how most of such input boxes behave.

If the cue should be visible all the time you can just add it as a label:

public class MyTextBox : TextBox
{
    private Label cueLabel;

    public TextBoxWithLabel()
    {
        SuspendLayout();

        cueLabel = new Label();
        cueLabel.Anchor = AnchorStyles.Top | AnchorStyles.Right;
        cueLabel.AutoSize = true;
        cueLabel.Text = "Enter your name";
        Controls.Add(cueLabel);
        cueLabel.Location = new Point(Width - cueLabel.Width, 0);

        ResumeLayout(false);
        PerformLayout();
    }
}

Vibeeshan Mahadeva · Answer 3 · 2012-07-22T17:45:46.920

Just create a new textbox class

 public class MyTextBox : TextBox
    {

        public MyTextBox()
        {
            SetStyle(ControlStyles.UserPaint, true);
        }

     protected override void OnTextChanged(EventArgs e)
    {
        base.OnTextChanged(e);
        this.Invalidate();
    }

        protected override void OnPaint(PaintEventArgs e)
        {

 e.Graphics.DrawString(this.Text, this.Font, new SolidBrush(Color.Black), new System.Drawing.RectangleF(0, 0, this.Width , this.Height ), System.Drawing.StringFormat.GenericDefault);


            e.Graphics.DrawString("Lloyd", this.Font, new SolidBrush(Color.Red), new System.Drawing.RectangleF(0, 0, 100, 100), System.Drawing.StringFormat.GenericTypographic);
            base.OnPaint(e);
        }
    }

make appropriate changes to the Draw String params

Though this is a pretty simple solution, it's pretty buggy... The caption is disappearing as soon as text is selected or a double click is fired etc. Also the space between the cursor and the last letter is not constant. It's adequately growing with the amount of letters. — libjup, Jul 22 '12 at 18:33

score 1 · Answer 4 · answered Jul 23 '12 at 00:45

Create a composition of a 3 controls, and put it in another UserControl. Three controls would be:

textbox, no borders
label, at the right of the textbox
panel, carrying the border for both of them.

Take the recipe from Hassan, then put that on the UserControl and use it as one new control.

Display caption in input field C#

4 Answers4