Outlook Mobile Style Textbox

There was a question on how to create a Textbox similar in style to Outlook Mobile contacts textbox shown below (single line shown for inputs).


Contacts


So to accomplish this I wrote a quick custom control that included a textbox internally and the control was on pixel higher than the textbox and set the Textbox.BorderStyle to None. On the OnPaint method of the custom control I just call Graphics.Clear() to draw a black line since only one pixel height is visible.


Here is the source.  It still requires a lot of work but it’s a good start and it answers the original question.

public class OutlookMobileTextBox : Control
{
private TextBox m_textBox;

public OutlookMobileTextBox()
{
m_textBox = new TextBox();
m_textBox.Location = new System.Drawing.Point(48, 107);
m_textBox.BorderStyle = BorderStyle.None;
m_textBox.Size = new System.Drawing.Size(100, 21);
Controls.Add(m_textBox);
}

protected override void OnResize(EventArgs e)
{
base.OnResize(e);
m_textBox.Bounds = new Rectangle(0, 0, this.Width, m_textBox.Height);
base.Height = m_textBox.Height + 1;

}
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.Clear(Color.Black);
}
protected override void OnPaintBackground(PaintEventArgs e)
{
}

public override string Text
{
get
{
return this.m_textBox.Text;
}
set
{
this.m_textBox.Text = value;
}
}


And here is what it looks like on a device:


 OutlookMobileTextbox


Warning: count(): Parameter must be an array or an object that implements Countable in /nfs/c07/h02/mnt/110221/domains/markarteaga.com/html/wp-includes/class-wp-comment-query.php on line 405

Leave a Reply