Wednesday, July 28, 2010

A Clearable TextBox for Win Phone 7

Update: I've updated this UserControl to a Custom Control for better templating and posted it for download. Check it out in the Clearable TextBox Custom Control post.

After seeing a tweet about the lack of a clearable text box similar to the IPhone by Eric Malamisura, I was inspired to whip together a simple control that fills this need.

Here is some code for the control, in case you don't want to download the full example. Just create a new UserControl called ClearableEditBox and paste these parts in the relevant places.

<!-- Put inside your new UserControl -->
<Grid x:Name="LayoutRoot">
        Text="{Binding ElementName=uiThis, Path=Text, Mode=TwoWay}"
                    Margin="0 0 20 0"

// Put inside your code behind for your new UserControl.
public partial class ClearableTextBox : UserControl, INotifyPropertyChanged
    public string Text
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }

    // Using a DependencyProperty as the backing store for EditText.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ClearableTextBox), new PropertyMetadata(string.Empty, HandleTextChanged));        

    public ClearableTextBox()

    private static void HandleTextChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        var box = obj as ClearableTextBox;
        if (null != box)

    private void clrBtn_Click(object sender, RoutedEventArgs e)
        Text = string.Empty;

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string name)
        if (null != PropertyChanged)
            PropertyChanged(null, new PropertyChangedEventArgs(name));


You can also download a sample project containing the control here.

Clearable TextBox UserControl

Now Playing: Eminem - Airplanes


  1. Hi,

    I hope that you accept a constructive comment ;) For this kind of component, I would rather use a custom control rather than a user control. This reduces the skinnability of your control. A custom control with a template makes it easier to create a new template for the component and change its appearance completely (for example provide a different button to clear the content).

    Of course, user control vs custom control is often a matter of personal taste, but I thought I would mention it ;)


  2. @LBugnion
    I agree. I think I'm going to put a custom control version together shortly. I'll update the post when that happens. It'll be a good intro for me into Custom Controls.

    The user control version did end up being a pretty small undertaking though, and I was aiming to get something out pretty quick in response to the tweet.