Remove text after clicking in the textbox

Question

When you activate an application, a textbox with text "hello" will appear.

My question is:
When you click on the textbox in order to make input data, I want to remove the text automatically in XAML code, how do I do it?

Answer 1

Handle the UIElement.GotFocus event, and in the handler, clear the text. You'll also want to remove the handler, so that if you click on the TextBox a second time you don't lose what you've already entered.

Something like this:

XAML:

<TextBox Text="Hello" GotFocus="TextBox_GotFocus" />

Code-behind:

public void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
   TextBox tb = (TextBox)sender;
   tb.Text = string.Empty;
   tb.GotFocus -= TextBox_GotFocus;
}

Answer 2

A XAML implementation that requires no code-behind. This is copied from the template of a custom control I built, and you'd probably want to make this a custom control yourself.

The basic idea is that there are two TextBoxes in a Grid. The top one is the actual control that the user interacts with, but it's invisible (its 'Opacity' is zero) unless it contains text or has the focus. The bottom one contains the prompt text. It will only be visible when the TextBox on top of it is not, and it will never get the focus.

You'll probably have to mess around with the binding on the editable TextBox, but this should get you started.

    <Grid>
      <TextBox Text="This is the prompt text"
               FontStyle="Italic"
               Foreground="LightGray"
               Focusable="False">
      </TextBox>
      <TextBox Text="{Binding TextProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
               Focusable="True">
          <TextBox.Style>
              <Style TargetType="TextBox">
                  <Setter Property="Opacity"
                          Value="1" />
                  <Style.Triggers>
                      <MultiTrigger>
                          <MultiTrigger.Conditions>
                              <Condition Property="IsFocused"
                                         Value="False" />
                              <Condition Property="Text"
                                         Value="" />
                          </MultiTrigger.Conditions>
                          <Setter Property="Opacity"
                                  Value="0" />
                      </MultiTrigger>
                  </Style.Triggers>
              </Style>
          </TextBox.Style>
      </TextBox>
  </Grid>

Answer 3

You have to implement both GetFocus and LostFocus events. In this way you can set the default text back in lost focus event if no text is entered.

private const string defaultText = "Hello";

private void myTextBox_GotFocus(object sender, RoutedEventArgs e)
{
   myTextBox.Text = myTextBox.Text == defaultText ? string.Empty : myTextBox.Text;
}

private void myTextBox_LostFocus(object sender, RoutedEventArgs e)
{
   myTextBox.Text = myTextBox.Text == string.Empty ? defaultText : myTextBox.Text;
}

Answer 4

To expound upon Donut's answer so that your textbox will keep the text a user inputs unless it's purely whitespace, here's a solution that I use:

XAML

<TextBox Text="Search..."
         Width="250"
         Foreground="LightGray"
         GotFocus="TextBox_GotFocus"
         LostFocus="TextBox_LostFocus" />

C#

void TextBox_GotFocus( object sender, RoutedEventArgs e )
{
    TextBox box = sender as TextBox;
    box.Text = string.Empty;
    box.Foreground = Brushes.Black;
    box.GotFocus -= TextBox_GotFocus;
}

void TextBox.LostFocus( object sender, RoutedEventArgs e )
{
    TextBox box = sender as TextBox;
    if( box.Text.Trim().Equals( string.Empty ) )
    {
        box.Text = "Search...";
        box.Foreground = Brushes.LightGray;
        box.GotFocus += TextBox_GotFocus;
    }
}