Clear textbox when focused

Question

How can I clear my TextBox when it is focused? I want to do this in MVVM way. If it has meaning - my TextBox control has Text property binded with some property in ViewModel. TextBox displays sth like "50,30 zł". It is uncomfortable for user to select text, delete it and write new text, so I want to clear old Text when Texbox is focused.

Answer 1

You can write your own behavior or even control. I will try to explain the first one:

First, you should a add reference to the System.Windows.Interactivity assembly.

Then create a class (which will be the behavior) and derive it from System.Windows.Interactivity.Behavior< System.Windows.Controls.TextBox>, where templated (generic type) parameter is a control which should behave as I described.

For example:

class ClearOnFocusedBehavior : System.Windows.Interactivity.Behavior<System.Windows.Controls.TextBox>
{
    private readonly RoutedEventHandler _onGotFocusHandler = (o, e) =>
                                                        {
                                                            ((System.Windows.Controls.TextBox) o).Text =
                                                                string.Empty;
                                                        };

    protected override void OnAttached()
    {
        AssociatedObject.GotFocus += _onGotFocusHandler;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.GotFocus -= _onGotFocusHandler;
    }
}

Next, put the following reference declaration in your parent window in xaml

<Window x:Class="ManagementSolution.Views.UpdatePersonsWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
    //namespace with ur behaviors
    xmlns:behaviors="clr-namespace:ManagementSolution.Helper.Behaviours"
    //...
</Window>

Finally add the behavior to the appropriate UI element(TextBox in our case):

<TextBox x:Name="PersonFirstNameTextBox"
             Grid.Column="1"
             Margin="5,0"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Center"
             Style="{StaticResource TextBoxValidationStyle}"
             TextWrapping="Wrap"
             d:LayoutOverrides="Width, Height">
        //behavior added as the content
        <i:Interaction.Behaviors>   
            <behaviors:ClearOnFocusedBehavior /> 
        </i:Interaction.Behaviors>
        <TextBox.Text>
            <Binding Path="PersonFirstName"
                     UpdateSourceTrigger="PropertyChanged"
                     ValidatesOnDataErrors="True">
                <!--
                    <Binding.ValidationRules>
                    <rules:SingleWordNameValidationRule />
                    </Binding.ValidationRules>
                -->
            </Binding>
        </TextBox.Text>
    </TextBox>

Answer 2

textBox1.Clear();

It Clears the Content in textBox

Answer 3

Great answer from @Dmitry Martovoi.

This is the same solution, using an Attached Property (rather than a Blend Behavior). Attached behaviors make for simpler XAML, but less simple C#, whereas Blend behaviors are the opposite.

XAML:

Add behaviors:MyTextBox.MyClearOnFocusedIfTextEqualsSearch="True" to the TextBox to make it clear itself if it receives focus, and it contains Search.

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:behaviors="clr-namespace:MyApp">
    <StackPanel Margin="10">
        <!-- GotFocus="TextBox_GotFocus" -->
        <TextBox x:Name="MyTextBox" 
                 behaviors:MyTextBox.MyClearOnFocusedIfTextEqualsSearch="True" 
                 HorizontalAlignment="Left" 
                 Text="Search" 
                 MinWidth="96" ></TextBox>  
    </StackPanel>
</Window>

And the attached property:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace MyApp
{
    public class MyTextBox : DependencyObject
    {
        public static readonly DependencyProperty MyClearOnFocusedIfTextEqualsSearchProperty = DependencyProperty.RegisterAttached(
            "MyClearOnFocusedIfTextEqualsSearch",
            typeof (bool),
            typeof(MyTextBox),
            new PropertyMetadata(default(bool), PropertyChangedCallback));

        private static void PropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
        {
            var textBox = dependencyObject as TextBox;
            if (textBox != null)
            {
                if ((bool)dependencyPropertyChangedEventArgs.NewValue == true)
                {
                    textBox.GotFocus += textBox_GotFocus;
                }
            }
        }

        private static void textBox_GotFocus(object sender, RoutedEventArgs e)
        {
            var textBox = sender as TextBox;
            if (textBox != null)
            {
                if (textBox.Text.ToLower() == "search")
                {
                    textBox.Text = "";
                }
            }
        }

        public static void SetMyClearOnFocusedIfTextEqualsSearch(DependencyObject element, bool value)
        {
            element.SetValue(MyClearOnFocusedIfTextEqualsSearchProperty, value);
        }

        public static bool GetMyClearOnFocusedIfTextEqualsSearch(DependencyObject element)
        {
            return (bool)element.GetValue(MyClearOnFocusedIfTextEqualsSearchProperty);
        }
    }
}

It took me a few minutes to write this attached behavior. ReSharper has a great macro to do this, if you type attachedProperty, it will fill out most of this code for you.