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">
    <TextBox
        MinWidth="50"
        Text="{Binding ElementName=uiThis, Path=Text, Mode=TwoWay}"
        x:Name="editBox"/>
        
    <Button
        MinWidth="30"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Click="clrBtn_Click"
        x:Name="clrBtn">
        <Button.Template>
            <ControlTemplate>
                <TextBlock                                
                    FontSize="25"            
                    Margin="0 0 20 0"
                    Foreground="Gray"            
                    FontWeight="Bold"
                    Text="X"/>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

// 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()
    {
        InitializeComponent();
    }

    private static void HandleTextChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        var box = obj as ClearableTextBox;
        if (null != box)
            box.OnPropertyChanged("Text");
    }

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

    #endregion
}

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




Clearable TextBox UserControl



Now Playing: Eminem - Airplanes