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">
    <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

2 comments:

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

    Cheers,
    Laurent

    ReplyDelete
  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.

    ReplyDelete