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;
    }
}

Answer 5

I just did this:

XAML:

<TextBox Name="Filename"
         Grid.Column="0" 
         Height="23" 
         Margin="10,9,0,0" 
         Text="Enter Export Filename here" 
         Width="193"
         GotFocus="Filename_GotFocus"
         />

Code behind:

 private void Filename_GotFocus(object sender, RoutedEventArgs e)
        {
            Filename.Text = "";            
        }

Answer 6

I want to update Donut's answer.(applicable for windows 8)

Code behind code be

public void TextBox_GotFocus(object sender, RoutedEventArgs e)
{

   TextBox tb = (TextBox)sender;

   if(tb.Text != "SOME DEFAULT TEXT")
   {

     String persentContentWithDefaultString = t.Text as string;
     tb.Text = persentContentWithDefaultString[0].ToString();
     // set cursor position 
      tb.Select(1, 0);         

      tb.GotFocus -= TextBox_GotFocus;
 }
}

Actully in my page , there were two textbox and one button. [Username,pass,and click button]. By default , focus goes to my first textbox and User was not able to see the default text.

Answer 7

you can use Tap method also , it is also working

private void tb1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        tb1.Text = "";
    }

Answer 8

Please don't over complicate the answer several ways to skin a cat but, less code the better I would presume.

Petermac's option is the way to go for me.

Add "GotFocus" in the main Xaml window to the control eg."textbox"

    private void Filename_GotFocus(object sender, RoutedEventArgs e)
    {
        Filename.Text = "";            
    }

or I like this option

    private void Filename_GotFocus(object sender, RoutedEventArgs e)
    {
        Filename.clear();            
    }

the question asked was just to empty the textbox.