Silverlight Watermark TextBox Behavior

(using Visual Studio 2010 and .NET/Silverlight 4)

Maybe there is a working solution for this already out there, but I created my own Silverlight Behavior for a basic TextBox Watermark which might be useful.

I wanted to use it like this in my XAML (look at the behaviors tag):

<TextBlock Margin="5">Watermarked textbox:</TextBlock>
<TextBox Margin="5">
    <Interactivity:Interaction.Behaviors>
        <local:Watermark Text="Watermark" Foreground="LightGray" />
    </Interactivity:Interaction.Behaviors>
</TextBox>

 

The result should be something like this:

image

 

To create a Behavior for Silverlight, you must get hold of the System.Windows.Interactivity assembly which ships with Expression Blend. In my system it’s located at:

c:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries\System.Windows.Interactivity.dll

 

And the code for the Behavior:

public class Watermark : Behavior<TextBox>
{
    private bool _hasWatermark;
    private Brush _textBoxForeground;

    public String Text { get; set; }
    public Brush Foreground { get; set; }

    protected override void OnAttached()
    {
        _textBoxForeground = AssociatedObject.Foreground;

        base.OnAttached();
        if (Text != null)
            SetWatermarkText();
        AssociatedObject.GotFocus += GotFocus;
        AssociatedObject.LostFocus += LostFocus;
    }

    private void LostFocus(object sender, RoutedEventArgs e)
    {
        if (AssociatedObject.Text.Length == 0)
            if (Text != null)
                SetWatermarkText();
    }

    private void GotFocus(object sender, RoutedEventArgs e)
    {
        if (_hasWatermark)
            RemoveWatermarkText();
    }

    private void RemoveWatermarkText()
    {
        AssociatedObject.Foreground = _textBoxForeground;
        AssociatedObject.Text = "";
        _hasWatermark = false;
    }

    private void SetWatermarkText()
    {
        AssociatedObject.Foreground = Foreground;
        AssociatedObject.Text = Text;
        _hasWatermark = true;
    }

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

Like so many Watermark-solutions out there I’m hooking into the GotFocus/LostFocus events and to the work there. Works for me. Love Behaviors.

Published Friday, September 17, 2010 2:23 PM by jdanforth
Filed under:

Comments

# Twitter Trackbacks for Silverlight Watermark TextBox Behavior - IBlog&lt;Johan&gt; [asp.net] on Topsy.com

Pingback from  Twitter Trackbacks for                 Silverlight Watermark TextBox Behavior - IBlog&lt;Johan&gt;         [asp.net]        on Topsy.com

# re: Silverlight Watermark TextBox Behavior

Wednesday, October 13, 2010 3:01 AM by Matjaz Bravc

Hi,

thanks for this great behavior! I'd like to suggest a litle modification - support for binding. Instead Text property use WatermarkText property, declared as

public static readonly DependencyProperty WatermarkTextProperty = DependencyProperty.Register(

                   "WatermarkText",

                   typeof(string),

                   typeof(TextBoxWatermarkBehavior),

                   new PropertyMetadata("Enter text here ..."));

and

       [Description("Gets or sets the watermark text")]

       public string WatermarkText

       {

           get { return (string)GetValue(WatermarkTextProperty); }

           set { SetValue(WatermarkTextProperty, value); }

       }

Now you can bind WatermarkProperty in XAML like this:

<TextBox x:Name="txtSearch"

                                        Grid.Column="1"

                                        BorderThickness="0"

                                        HorizontalAlignment="Stretch"

                                        MaxLength="25"

                                        TextChanged="txtSearch_TextChanged">

                                   <i:Interaction.Behaviors>

                                       <Behaviors:Watermark WatermarkText="{Binding CommonResStrings.TypeHereToSearch, Source={StaticResource Resources}}"

                                                                           Foreground="LightGray" />

                                   </i:Interaction.Behaviors>

                               </TextBox>

Best regards,

Matjaz Bravc

# Windows Phone 7 Watermark on PasswordBox &laquo; Damian&#039;s Blog

Friday, January 21, 2011 6:36 PM by Windows Phone 7 Watermark on PasswordBox « Damian's Blog

Pingback from  Windows Phone 7 Watermark on PasswordBox &laquo; Damian&#039;s Blog

# Silverlight4 TextBox.Watermark &laquo; EmoSun&#039;s Blog

Tuesday, April 12, 2011 10:35 PM by Silverlight4 TextBox.Watermark « EmoSun's Blog

Pingback from  Silverlight4 TextBox.Watermark &laquo; EmoSun&#039;s Blog