Watermark hint text placeholder TextBox

Question

How can I put some text into a TextBox which is removed automatically when user types something in it

User · Answer

lt TextBox Controls TextBoxHelper Watermark  Watermark   gt    Add mahapps metro to your project   Add textbox with the above code to the window

User · Answer

This technique uses the Background property to show   hide placeholder textbox  Placeholder is shown event when Textbox has the focus  How it works    When empty  TextBox background set to Transparent to show PlaceHolder text  When not empty background set to White to cover up PlaceHolder text     Here is basic example   For my own purposes I turned this into a UserControl    lt Grid gt       lt Grid Resources gt           lt ux NotEmptyConverter x Key  NotEmptyConverter    gt            lt Style TargetType   x Type Control   x Key  DefaultStyle  gt               lt Setter Property  FontSize  Value  20    gt               lt Setter Property  Margin  Value  10   gt               lt Setter Property  VerticalAlignment  Value  Center  gt  lt  Setter gt               lt Setter Property  VerticalContentAlignment  Value  Center  gt  lt  Setter gt           lt  Style gt            lt Style TargetType   x Type TextBox   BasedOn   StaticResource DefaultStyle   gt  lt  Style gt        lt  Grid Resources gt        lt Grid RowDefinitions gt           lt RowDefinition Height  Auto   gt       lt  Grid RowDefinitions gt       lt TextBox Grid Row  0  Text  Placeholder Text Is Here  Foreground  DarkGray    gt       lt TextBox Grid Row  0  Name  TextBoxEdit               Text   Binding Path FirstName  Mode TwoWay  UpdateSourceTrigger PropertyChanged    gt           lt TextBox Style gt               lt Style TargetType   x Type TextBox   BasedOn   StaticResource DefaultStyle   gt                   lt Style Triggers gt                       lt DataTrigger Binding   Binding Path FirstName Length  FallbackValue 0  TargetNullValue 0   Value  0  gt                           lt Setter Property  Background  Value  Transparent   gt                       lt  DataTrigger gt                       lt DataTrigger Binding   Binding Path FirstName  FallbackValue 0  TargetNullValue 0  Converter  StaticResource NotEmptyConverter    Value  false  gt                           lt Setter Property  Background  Value  White   gt                       lt  DataTrigger gt                   lt  Style Triggers gt               lt  Style gt           lt  TextBox Style gt       lt  TextBox gt   lt  Grid gt    Here is the ValueConverter to detect non-empty strings in the DataTrigger   public class NotEmptyConverter   IValueConverter       public object Convert object value  Type targetType  object parameter  System Globalization CultureInfo culture                var s   value as string          return string IsNullOrEmpty s             public object ConvertBack object value  Type targetType  object parameter  System Globalization CultureInfo culture                return null

User · Answer

Veton - I really like the simplicity of your solution but my reputation isn t high enough to bump you yet    Tim Murphy - That  Two-way binding requires Path or XPath  error was an easy fix    updated code including some other little tweaks  only WPF tested    using System  using System Windows  using System Windows Controls  using System Windows Data  using System Windows Media   public class TextBoxWatermarked   TextBox     public string Watermark         get   return  string GetValue WaterMarkProperty         set   SetValue WaterMarkProperty  value           public static readonly DependencyProperty WaterMarkProperty         DependencyProperty Register  Watermark   typeof string   typeof TextBoxWatermarked   new PropertyMetadata new PropertyChangedCallback OnWatermarkChanged        private bool  isWatermarked   false    private Binding  textBinding   null     public TextBoxWatermarked           Loaded     s  ea    gt  ShowWatermark           protected override void OnGotFocus RoutedEventArgs e          base OnGotFocus e       HideWatermark           protected override void OnLostFocus RoutedEventArgs e          base OnLostFocus e       ShowWatermark           private static void OnWatermarkChanged DependencyObject sender  DependencyPropertyChangedEventArgs ea          var tbw   sender as TextBoxWatermarked      if  tbw    null     tbw IsLoaded  return    needed to check IsLoaded so that we didn t dive into the ShowWatermark   routine before initial Bindings had been made     tbw ShowWatermark           private void ShowWatermark           if  String IsNullOrEmpty Text   amp  amp   String IsNullOrEmpty Watermark                isWatermarked   true           save the existing binding so it can be restored        textBinding   BindingOperations GetBinding this  TextProperty            blank out the existing binding so we can throw in our Watermark       BindingOperations ClearBinding this  TextProperty            set the signature watermark gray       Foreground   new SolidColorBrush Colors Gray            display our watermark text       Text   Watermark               private void HideWatermark           if   isWatermarked               isWatermarked   false        ClearValue ForegroundProperty         Text             if   textBinding    null  SetBinding TextProperty   textBinding

User · Answer

Look at another simple solotion   I m focused GotFocus and LostFocus events   XAML    lt Grid gt   lt TextBlock x Name  DosyaIhtivaEdenDizinYansimasi  Text  Hedef Dizin Belirtin  VerticalAlignment  Center  HorizontalAlignment  Center  TextAlignment  Center  Foreground  White  Background  Transparent  Width  500  MinWidth  300  Margin  10 0 0 0  Opacity  0 7   gt   lt TextBox x Name  DosyaIhtivaEdenDizin  CaretBrush  White  Foreground  White  Background  Transparent  VerticalContentAlignment  Center  HorizontalContentAlignment  Center  VerticalAlignment  Center  HorizontalAlignment  Center  MinHeight  40  BorderThickness  1  BorderBrush  White  Width  500  MinWidth  300  Margin  10 0 0 0  GotFocus  DosyaIhtivaEdenDizin GotFocus  LostFocus  DosyaIhtivaEdenDizin LostFocus   gt   lt  Grid gt    C         region DosyaIhtivaEdenDizin     private void DosyaIhtivaEdenDizin GotFocus object sender  RoutedEventArgs e                if  DosyaIhtivaEdenDizin Text Length    0                        DosyaIhtivaEdenDizinYansimasi Text                            private void DosyaIhtivaEdenDizin LostFocus object sender  RoutedEventArgs e                if  DosyaIhtivaEdenDizin Text Length    0                        DosyaIhtivaEdenDizinYansimasi Text    Hedef Dizin Belirtin                        endregion

User · Answer

There is an article on CodeProject on how to do it in  quot 3 lines of XAML quot    lt Grid Background  quot  StaticResource brushWatermarkBackground  quot  gt     lt TextBlock Margin  quot 5 2 quot  Text  quot Type something    quot               Foreground  quot  StaticResource brushForeground  quot               Visibility  quot  Binding ElementName txtUserEntry  Path Text IsEmpty                            Converter  StaticResource BooleanToVisibilityConverter   quot    gt     lt TextBox Name  quot txtUserEntry quot  Background  quot Transparent quot             BorderBrush  quot  StaticResource brushBorder  quot    gt   lt  Grid gt   Ok  well it might not be 3 lines of XAML formatted  but it is pretty simple  One thing to note though  is that it uses a non-standard extension method on the Text property  called  quot IsEmpty quot   You need to implement this yourself  however the article doesn t seem to mention that

User · Answer

Also  see this answer  You can accomplish this much more easily with a VisualBrush and some triggers in a Style     lt TextBox gt       lt TextBox Style gt           lt Style TargetType  TextBox  xmlns sys  clr-namespace System assembly mscorlib  gt               lt Style Resources gt                   lt VisualBrush x Key  CueBannerBrush  AlignmentX  Left  AlignmentY  Center  Stretch  None  gt                       lt VisualBrush Visual gt                           lt Label Content  Search  Foreground  LightGray    gt                       lt  VisualBrush Visual gt                   lt  VisualBrush gt               lt  Style Resources gt               lt Style Triggers gt                   lt Trigger Property  Text  Value   x Static sys String Empty   gt                       lt Setter Property  Background  Value   StaticResource CueBannerBrush     gt                   lt  Trigger gt                   lt Trigger Property  Text  Value   x Null   gt                       lt Setter Property  Background  Value   StaticResource CueBannerBrush     gt                   lt  Trigger gt                   lt Trigger Property  IsKeyboardFocused  Value  True  gt                       lt Setter Property  Background  Value  White    gt                   lt  Trigger gt               lt  Style Triggers gt           lt  Style gt       lt  TextBox Style gt   lt  TextBox gt    To increase the re-usability of this Style  you can also create a set of attached properties to control the actual cue banner text  color  orientation etc

User · Answer

MahApps Metro for WPF has a built-in watermark control  if you d rather not roll your own  It s fairly straightforward to use     lt AdornerDecorator gt               lt TextBox Name  txtSomeText                       Width  200                       HorizontalAlignment  Right  gt                   lt Controls TextBoxHelper Watermark gt I m a watermark  lt  Controls TextBoxHelper Watermark gt               lt  TextBox gt           lt  AdornerDecorator gt

User · Answer

I decided to solve this via a Behavior  It uses a Hint property to define the text to display  could also be an object  if you prefer  and a Value property to evaluate wether the hint should be visible or not   The Behavior is declared as follows   using System  using System Windows  using System Windows Controls  using System Windows Data  using System Windows Interactivity  using System Windows Media       public class HintBehavior   Behavior lt ContentControl gt                public static readonly DependencyProperty HintProperty   DependencyProperty              Register  Hint   typeof  string   typeof  HintBehavior                  new FrameworkPropertyMetadata null  OnHintChanged                          public string Hint                       get   return  string  GetValue HintProperty                 set   SetValue HintProperty  value                        public static readonly DependencyProperty ValueProperty   DependencyProperty              Register  Value   typeof  object   typeof  HintBehavior                    new FrameworkPropertyMetadata null  OnValueChanged             private static void OnValueChanged DependencyObject d  DependencyPropertyChangedEventArgs e                        var visible   e NewValue    null              d SetValue VisibilityProperty  visible   Visibility Visible   Visibility Collapsed                      public object Value                       get   return GetValue ValueProperty                 set   SetValue ValueProperty  value                        public static readonly DependencyProperty VisibilityProperty   DependencyProperty              Register  Visibility   typeof  Visibility   typeof  HintBehavior                    new FrameworkPropertyMetadata Visibility Visible                         new PropertyChangedCallback OnVisibilityChanged                                   public Visibility Visibility                       get   return  Visibility  GetValue VisibilityProperty                 set   SetValue VisibilityProperty  value                        public static readonly DependencyProperty ForegroundProperty   DependencyProperty              Register  Foreground   typeof  Brush   typeof  HintBehavior                    new FrameworkPropertyMetadata new SolidColorBrush Colors DarkGray                          new PropertyChangedCallback OnForegroundChanged                                   public Brush Foreground                       get   return  Brush  GetValue ForegroundProperty                 set   SetValue ForegroundProperty  value                        public static readonly DependencyProperty MarginProperty   DependencyProperty              Register  Margin   typeof  Thickness   typeof  HintBehavior                    new FrameworkPropertyMetadata new Thickness 4  5  0  0                          new PropertyChangedCallback OnMarginChanged                                   public Thickness Margin                       get   return  Thickness  GetValue MarginProperty                 set   SetValue MarginProperty  value                         private static ResourceDictionary  hintBehaviorResources           public static ResourceDictionary HintBehaviorResources                       get                               if   hintBehaviorResources    null                                        var res   new ResourceDictionary                                               Source   new Uri   Mayflower Client Core component Behaviors HintBehaviorResources xaml                               UriKind RelativeOrAbsolute                                              hintBehaviorResources   res                                    return  hintBehaviorResources                                    protected override void OnAttached                         base OnAttached                var t    ControlTemplate  HintBehaviorResources  HintBehaviorWrapper                AssociatedObject Template   t              AssociatedObject Loaded    OnLoaded                     private void OnLoaded object sender  RoutedEventArgs e                        AssociatedObject Loaded -  OnLoaded              var label    Label  AssociatedObject Template FindName  PART HintLabel   AssociatedObject               label DataContext   this                label Content    Hello                  label SetBinding UIElement VisibilityProperty  new Binding  Visibility    Source   this  Mode   BindingMode OneWay                label SetBinding ContentControl ContentProperty  new Binding  Hint    Source   this  Mode   BindingMode OneWay                label SetBinding Control ForegroundProperty  new Binding  Foreground    Source   this  Mode   BindingMode OneWay                label SetBinding FrameworkElement MarginProperty  new Binding  Margin    Source   this  Mode   BindingMode OneWay                      It wraps the target with it s own template  adding to it a label    lt ResourceDictionary xmlns  http   schemas microsoft com winfx 2006 xaml presentation                      xmlns x  http   schemas microsoft com winfx 2006 xaml  gt       lt ControlTemplate x Key  HintBehaviorWrapper  TargetType   x Type ContentControl   gt           lt Grid gt               lt ContentPresenter Content   TemplateBinding Content     gt               lt Label x Name  PART HintLabel  IsHitTestVisible  False  Padding  0    gt           lt  Grid gt       lt  ControlTemplate gt   lt  ResourceDictionary gt    To use it  just add it as a behavior and bind your values  in my case I add it in a ControlTemplate  hence the binding     lt ContentControl gt       lt i Interaction Behaviors gt           lt behaviors HintBehavior Value   Binding Property  RelativeSource  RelativeSource TemplatedParent                                                            Hint   Binding Hint  RelativeSource  RelativeSource TemplatedParent      gt       lt  i Interaction Behaviors gt       lt TextBox       gt   lt  ContentControl gt    I would love feedback if this is considered a clean solution  It does not require static dictionaries and hence has no memory leak

User · Answer

My solution is quite simple   In my login window  the xaml is like this     lt DockPanel HorizontalAlignment  Center  VerticalAlignment  Center  Height  80  Width  300  LastChildFill  True  gt           lt Button Margin  5 0 0 0  Click  login Click  DockPanel Dock  Right   VerticalAlignment  Center  ToolTip  Login to system  gt              Login          lt  Button gt           lt StackPanel gt               lt TextBox x Name  userNameWatermarked  Height  25  Foreground  Gray  Text  UserName  GotFocus  userNameWatermarked GotFocus  gt  lt  TextBox gt               lt TextBox x Name  userName  Height  25   TextChanged  loginElement TextChanged  Visibility  Collapsed  LostFocus  userName LostFocus   gt  lt  TextBox gt               lt TextBox x Name  passwordWatermarked  Height  25  Foreground  Gray  Text  Password   Margin  0 5 0 5  GotFocus  passwordWatermarked GotFocus  gt  lt  TextBox gt               lt PasswordBox x Name  password  Height  25  PasswordChanged  password PasswordChanged  KeyUp  password KeyUp  LostFocus  password LostFocus  Margin  0 5 0 5  Visibility  Collapsed  gt  lt  PasswordBox gt               lt TextBlock x Name  loginError  Visibility  Hidden  Foreground  Red  FontSize  12  gt  lt  TextBlock gt           lt  StackPanel gt       lt  DockPanel gt    the code is like this   private void userNameWatermarked GotFocus object sender  RoutedEventArgs e                userNameWatermarked Visibility   System Windows Visibility Collapsed          userName Visibility   System Windows Visibility Visible          userName Focus               private void userName LostFocus object sender  RoutedEventArgs e                if  string IsNullOrEmpty this userName Text                         userName Visibility   System Windows Visibility Collapsed              userNameWatermarked Visibility   System Windows Visibility Visible                       private void passwordWatermarked GotFocus object sender  RoutedEventArgs e                passwordWatermarked Visibility   System Windows Visibility Collapsed          password Visibility   System Windows Visibility Visible          password Focus               private void password LostFocus object sender  RoutedEventArgs e                if  string IsNullOrEmpty this password Password                         password Visibility   System Windows Visibility Collapsed              passwordWatermarked Visibility   System Windows Visibility Visible                    Just decide to hide or show the watermark textbox is enough  Though not beautiful but work well

User · Answer

Here is another simple solution in XAML  XAML          lt TextBox gt               lt TextBox Resources gt                   lt Style TargetType  quot TextBox quot  gt                       lt Style Triggers gt                           lt Trigger Property  quot IsFocused quot  Value  quot True quot  gt                               lt  --text color-- gt                               lt Setter Property  quot Foreground quot  Value  quot Black quot   gt                               lt Setter Property  quot Text quot  Value  quot  quot   gt                           lt  Trigger gt                           lt Trigger Property  quot IsFocused quot  Value  quot False quot  gt                               lt  --placeholder color-- gt                               lt Setter Property  quot Foreground quot  Value  quot Gray quot   gt                               lt  --placeholder here-- gt                               lt Setter Property  quot Text quot  Value  quot Placeholder quot   gt                           lt  Trigger gt                       lt  Style Triggers gt                   lt  Style gt               lt  TextBox Resources gt           lt  TextBox gt

User · Answer

lt Window Resources gt        lt Style x Key  TextBoxUserStyle  BasedOn   x Null   TargetType   x Type TextBox   gt         lt Setter Property  Foreground  Value  Black   gt         lt Setter Property  HorizontalAlignment  Value  Center   gt         lt Setter Property  VerticalContentAlignment  Value  Center   gt         lt Setter Property  Width  Value  225   gt         lt Setter Property  Height  Value  25   gt         lt Setter Property  FontSize  Value  12   gt         lt Setter Property  Padding  Value  1   gt         lt Setter Property  Margin  Value  5   gt         lt Setter Property  AllowDrop  Value  true   gt         lt Setter Property  FocusVisualStyle  Value   x Null    gt         lt Setter Property  Template  gt           lt Setter Value gt             lt ControlTemplate TargetType   x Type TextBox   gt               lt Border x Name  OuterBorder  BorderBrush   5AFFFFFF  BorderThickness  1 1 1 1  CornerRadius  4 4 4 4  gt                 lt Border x Name  InnerBorder  Background   FFFFFFFF  BorderBrush   33000000  BorderThickness  1 1 1 1  CornerRadius  3 3 3 3  gt                   lt ScrollViewer SnapsToDevicePixels   TemplateBinding SnapsToDevicePixels   x Name  PART ContentHost   gt                 lt  Border gt               lt  Border gt             lt  ControlTemplate gt           lt  Setter Value gt         lt  Setter gt       lt  Style gt        lt Style x Key  PasswordBoxVistaStyle  BasedOn   x Null   TargetType   x Type PasswordBox   gt         lt Setter Property  Foreground  Value  Black   gt         lt Setter Property  HorizontalAlignment  Value  Center   gt         lt Setter Property  VerticalContentAlignment  Value  Center   gt         lt Setter Property  Width  Value  225   gt         lt Setter Property  Height  Value  25   gt         lt Setter Property  FontSize  Value  12   gt         lt Setter Property  Padding  Value  1   gt         lt Setter Property  Margin  Value  5   gt         lt Setter Property  AllowDrop  Value  true   gt         lt Setter Property  FocusVisualStyle  Value   x Null    gt         lt Setter Property  Template  gt           lt Setter Value gt             lt ControlTemplate TargetType   x Type PasswordBox   gt               lt Border x Name  OuterBorder  BorderBrush   5AFFFFFF  BorderThickness  1 1 1 1  CornerRadius  4 4 4 4  gt                 lt Border x Name  InnerBorder  Background   FFFFFFFF  BorderBrush   33000000  BorderThickness  1 1 1 1  CornerRadius  3 3 3 3  gt                   lt Grid gt                     lt Label x Name  lblPwd  Content  Password  FontSize  11  VerticalAlignment  Center  Margin  2 0 0 0  FontFamily  Verdana  Foreground   828385  Padding  0   gt                     lt ScrollViewer SnapsToDevicePixels   TemplateBinding SnapsToDevicePixels   x Name  PART ContentHost   gt                   lt  Grid gt                 lt  Border gt               lt  Border gt               lt ControlTemplate Triggers gt                 lt Trigger Property  IsFocused  Value  True  gt                   lt Setter Property  Visibility  TargetName  lblPwd  Value  Hidden   gt                 lt  Trigger gt               lt  ControlTemplate Triggers gt             lt  ControlTemplate gt           lt  Setter Value gt         lt  Setter gt       lt  Style gt     lt  Window Resources gt             lt PasswordBox Style   StaticResource PasswordBoxVistaStyle   Margin  169 143 22 0  Name  txtPassword  FontSize  14  TabIndex  2  Height  31  VerticalAlignment  Top    gt    This can help check it with your code When applied to password box it will show Password which will disappear when usertypes

User · Answer

lt TextBox x Name  OrderTxt  HorizontalAlignment  Left  VerticalAlignment  Top  VerticalContentAlignment  Center  Margin  10 10 0 0  Width  188  Height  32   gt    lt Label IsHitTestVisible  False  Content  Order number  DataContext   Binding ElementName OrderTxt   Foreground  DarkGray  gt       lt Label Style gt           lt Style TargetType   x Type Label   gt               lt Setter Property  Visibility  Value  Collapsed   gt               lt Setter Property  Width  Value   Binding Width    gt               lt Setter Property  Height  Value   Binding Height    gt               lt Setter Property  Margin  Value   Binding Margin    gt               lt Setter Property  VerticalAlignment  Value   Binding VerticalAlignment    gt               lt Setter Property  HorizontalAlignment  Value   Binding HorizontalAlignment    gt               lt Setter Property  VerticalContentAlignment  Value   Binding VerticalContentAlignment    gt               lt Style Triggers gt                   lt DataTrigger Binding   Binding Text   Value    gt                       lt Setter Property  Visibility  Value  Visible   gt                   lt  DataTrigger gt               lt  Style Triggers gt           lt  Style gt       lt  Label Style gt   lt  Label gt

User · Answer

Well here is mine  not necessarily the best  but as it is simple it is easy to edit to your taste    lt UserControl x Class  WPFControls ShadowedTextBox      xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      xmlns local  clr-namespace WPFControls      Name  Root  gt   lt UserControl Resources gt       lt local ShadowConverter x Key  ShadowConvert   gt   lt  UserControl Resources gt   lt Grid gt       lt TextBox Name  textBox                Foreground   Binding ElementName Root  Path Foreground                Text   Binding ElementName Root  Path Text  UpdateSourceTrigger PropertyChanged                TextChanged  textBox TextChanged               TextWrapping  Wrap               VerticalContentAlignment  Center   gt       lt TextBlock Name  WaterMarkLabel             IsHitTestVisible  False             Foreground   Binding ElementName Root Path Foreground              FontWeight  Thin             Opacity   345             FontStyle  Italic             Text   Binding ElementName Root  Path Watermark              VerticalAlignment  Center             TextWrapping  Wrap             TextAlignment  Center  gt           lt TextBlock Visibility gt               lt MultiBinding Converter   StaticResource ShadowConvert   gt                   lt Binding ElementName  textBox  Path  Text   gt               lt  MultiBinding gt           lt  TextBlock Visibility gt        lt  TextBlock gt   lt  Grid gt      The converter  as it is written now it is not necessary that it is a MultiConverter  but in this wasy it can be extended easily  using System  using System Globalization  using System Windows  using System Windows Data   namespace WPFControls       class ShadowConverter IMultiValueConverter                region Implementation of IMultiValueConverter          public object Convert object   values  Type targetType  object parameter  CultureInfo culture                        var text    string  values 0               return text    string Empty                          Visibility Visible                          Visibility Collapsed                     public object   ConvertBack object value  Type   targetTypes  object parameter  CultureInfo culture                        return new object 0                       endregion           and finally the code behind   using System Windows  using System Windows Controls   namespace WPFControls            lt summary gt          Interaction logic for ShadowedTextBox xaml          lt  summary gt      public partial class ShadowedTextBox   UserControl               public event TextChangedEventHandler TextChanged           public ShadowedTextBox                         InitializeComponent                       public static readonly DependencyProperty WatermarkProperty               DependencyProperty Register  Watermark                                           typeof  string                                           typeof  ShadowedTextBox                                           new UIPropertyMetadata string Empty             public static readonly DependencyProperty TextProperty               DependencyProperty Register  Text                                           typeof  string                                           typeof  ShadowedTextBox                                           new UIPropertyMetadata string Empty             public static readonly DependencyProperty TextChangedProperty               DependencyProperty Register  TextChanged                                           typeof  TextChangedEventHandler                                           typeof  ShadowedTextBox                                           new UIPropertyMetadata null             public string Watermark                       get   return  string GetValue WatermarkProperty                 set                               SetValue WatermarkProperty  value                                    public string Text                       get   return  string  GetValue TextProperty                 set SetValue TextProperty value                       private void textBox TextChanged object sender  TextChangedEventArgs e                        if  TextChanged    null  TextChanged this  e                      public void Clear                         textBox Clear

User · Answer

This library has a watermark   Nuget package  Sample usage    lt TextBox adorners Watermark Text  Write something here            adorners Watermark TextStyle   StaticResource AdornerTextStyle            adorners Watermark VisibleWhen  EmptyAndNotKeyboardFocused   gt

User · Answer

Here is the simplest solution                lt Grid gt                   lt Label Content  Placeholder text  VerticalAlignment  Center  Margin  10  gt                       lt Label Style gt                           lt Style TargetType  Label  gt                               lt Setter Property  Foreground  Value  Transparent   gt                               lt Style Triggers gt                                   lt DataTrigger Binding   Binding Expression   Value    gt                                       lt Setter Property  Foreground  Value  Gray   gt                                   lt  DataTrigger gt                               lt  Style Triggers gt                           lt  Style gt                       lt  Label Style gt                   lt  Label gt                   lt TextBox HorizontalAlignment  Stretch  Margin  5  Background  Transparent                   Text   Binding Expression  UpdateSourceTrigger PropertyChanged   VerticalAlignment  Center  Padding  5  gt                   lt  TextBox gt           lt  Grid gt    This is a textbox with transparent backgound overlaying a label   The label s gray text is turned transparent by a data trigger that fires whenever the bound text is something other than empty string

User · Answer

You can create a watermark that can be added to any TextBox with an Attached Property  Here is the source for the Attached Property   using System  using System Collections Generic  using System ComponentModel  using System Windows  using System Windows Controls  using System Windows Controls Primitives  using System Windows Documents        lt summary gt      Class that provides the Watermark attached property      lt  summary gt  public static class WatermarkService            lt summary gt          Watermark Attached Dependency Property          lt  summary gt      public static readonly DependencyProperty WatermarkProperty   DependencyProperty RegisterAttached          Watermark          typeof object          typeof WatermarkService          new FrameworkPropertyMetadata  object null  new PropertyChangedCallback OnWatermarkChanged           region Private Fields           lt summary gt          Dictionary of ItemsControls          lt  summary gt      private static readonly Dictionary lt object  ItemsControl gt  itemsControls   new Dictionary lt object  ItemsControl gt           endregion           lt summary gt          Gets the Watermark property   This dependency property indicates the watermark for the control           lt  summary gt           lt param name  d  gt  lt see cref  DependencyObject   gt  to get the property from lt  param gt           lt returns gt The value of the Watermark property lt  returns gt      public static object GetWatermark DependencyObject d                return  object d GetValue WatermarkProperty                   lt summary gt          Sets the Watermark property   This dependency property indicates the watermark for the control           lt  summary gt           lt param name  d  gt  lt see cref  DependencyObject   gt  to set the property on lt  param gt           lt param name  value  gt value of the property lt  param gt      public static void SetWatermark DependencyObject d  object value                d SetValue WatermarkProperty  value                   lt summary gt          Handles changes to the Watermark property           lt  summary gt           lt param name  d  gt  lt see cref  DependencyObject   gt  that fired the event lt  param gt           lt param name  e  gt A  lt see cref  DependencyPropertyChangedEventArgs   gt  that contains the event data  lt  param gt      private static void OnWatermarkChanged DependencyObject d  DependencyPropertyChangedEventArgs e                Control control    Control d          control Loaded    Control Loaded           if  d is ComboBox                        control GotKeyboardFocus    Control GotKeyboardFocus              control LostKeyboardFocus    Control Loaded                    else if  d is TextBox                        control GotKeyboardFocus    Control GotKeyboardFocus              control LostKeyboardFocus    Control Loaded                TextBox control  TextChanged    Control GotKeyboardFocus                     if  d is ItemsControl  amp  amp    d is ComboBox                         ItemsControl i    ItemsControl d                  for Items property               i ItemContainerGenerator ItemsChanged    ItemsChanged              itemsControls Add i ItemContainerGenerator  i                   for ItemsSource property               DependencyPropertyDescriptor prop   DependencyPropertyDescriptor FromProperty ItemsControl ItemsSourceProperty  i GetType                 prop AddValueChanged i  ItemsSourceChanged                         region Event Handlers           lt summary gt          Handle the GotFocus event on the control          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  RoutedEventArgs   gt  that contains the event data  lt  param gt      private static void Control GotKeyboardFocus object sender  RoutedEventArgs e                Control c    Control sender          if  ShouldShowWatermark c                         ShowWatermark c                     else                       RemoveWatermark c                             lt summary gt          Handle the Loaded and LostFocus event on the control          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  RoutedEventArgs   gt  that contains the event data  lt  param gt      private static void Control Loaded object sender  RoutedEventArgs e                Control control    Control sender          if  ShouldShowWatermark control                         ShowWatermark control                             lt summary gt          Event handler for the items source changed event          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  EventArgs   gt  that contains the event data  lt  param gt      private static void ItemsSourceChanged object sender  EventArgs e                ItemsControl c    ItemsControl sender          if  c ItemsSource    null                        if  ShouldShowWatermark c                                 ShowWatermark c                             else                               RemoveWatermark c                                   else                       ShowWatermark c                             lt summary gt          Event handler for the items changed event          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  ItemsChangedEventArgs   gt  that contains the event data  lt  param gt      private static void ItemsChanged object sender  ItemsChangedEventArgs e                ItemsControl control          if  itemsControls TryGetValue sender  out control                         if  ShouldShowWatermark control                                 ShowWatermark control                             else                               RemoveWatermark control                                       endregion       region Helper Methods           lt summary gt          Remove the watermark from the specified element          lt  summary gt           lt param name  control  gt Element to remove the watermark from lt  param gt      private static void RemoveWatermark UIElement control                AdornerLayer layer   AdornerLayer GetAdornerLayer control               layer could be null if control is no longer in the visual tree         if  layer    null                        Adorner   adorners   layer GetAdorners control               if  adorners    null                                return                             foreach  Adorner adorner in adorners                                if  adorner is WatermarkAdorner                                        adorner Visibility   Visibility Hidden                      layer Remove adorner                                                             lt summary gt          Show the watermark on the specified control          lt  summary gt           lt param name  control  gt Control to show the watermark on lt  param gt      private static void ShowWatermark Control control                AdornerLayer layer   AdornerLayer GetAdornerLayer control               layer could be null if control is no longer in the visual tree         if  layer    null                        layer Add new WatermarkAdorner control  GetWatermark control                               lt summary gt          Indicates whether or not the watermark should be shown on the specified control          lt  summary gt           lt param name  c  gt  lt see cref  Control   gt  to test lt  param gt           lt returns gt true if the watermark should be shown  false otherwise lt  returns gt      private static bool ShouldShowWatermark Control c                if  c is ComboBox                        return  c as ComboBox  Text    string Empty                    else if  c is TextBoxBase                        return  c as TextBox  Text    string Empty                    else if  c is ItemsControl                        return  c as ItemsControl  Items Count    0                    else                       return false                        endregion     The Attached Property uses a class called WatermarkAdorner  here is that source   using System Windows  using System Windows Controls  using System Windows Data  using System Windows Documents  using System Windows Media        lt summary gt      Adorner for the watermark      lt  summary gt  internal class WatermarkAdorner   Adorner        region Private Fields           lt summary gt           lt see cref  ContentPresenter   gt  that holds the watermark          lt  summary gt      private readonly ContentPresenter contentPresenter        endregion       region Constructor           lt summary gt          Initializes a new instance of the  lt see cref  WatermarkAdorner   gt  class          lt  summary gt           lt param name  adornedElement  gt  lt see cref  UIElement   gt  to be adorned lt  param gt           lt param name  watermark  gt The watermark lt  param gt      public WatermarkAdorner UIElement adornedElement  object watermark           base adornedElement                this IsHitTestVisible   false           this contentPresenter   new ContentPresenter            this contentPresenter Content   watermark          this contentPresenter Opacity   0 5          this contentPresenter Margin   new Thickness Control Margin Left   Control Padding Left  Control Margin Top   Control Padding Top  0  0            if  this Control is ItemsControl  amp  amp    this Control is ComboBox                         this contentPresenter VerticalAlignment   VerticalAlignment Center              this contentPresenter HorizontalAlignment   HorizontalAlignment Center                        Hide the control adorner when the adorned element is hidden         Binding binding   new Binding  IsVisible            binding Source   adornedElement          binding Converter   new BooleanToVisibilityConverter            this SetBinding VisibilityProperty  binding               endregion       region Protected Properties           lt summary gt          Gets the number of children for the  lt see cref  ContainerVisual   gt            lt  summary gt      protected override int VisualChildrenCount               get   return 1                endregion       region Private Properties           lt summary gt          Gets the control that is being adorned          lt  summary gt      private Control Control               get   return  Control this AdornedElement                endregion       region Protected Overrides           lt summary gt          Returns a specified child  lt see cref  Visual   gt  for the parent  lt see cref  ContainerVisual   gt            lt  summary gt           lt param name  index  gt A 32-bit signed integer that represents the index value of the child  lt see cref  Visual   gt   The value of index must be between 0 and  lt see cref  VisualChildrenCount   gt  - 1  lt  param gt           lt returns gt The child  lt see cref  Visual   gt   lt  returns gt      protected override Visual GetVisualChild int index                return this contentPresenter                  lt summary gt          Implements any custom measuring behavior for the adorner           lt  summary gt           lt param name  constraint  gt A size to constrain the adorner to  lt  param gt           lt returns gt A  lt see cref  Size   gt  object representing the amount of layout space needed by the adorner  lt  returns gt      protected override Size MeasureOverride Size constraint                   Here s the secret to getting the adorner to cover the whole control         this contentPresenter Measure Control RenderSize           return Control RenderSize                  lt summary gt          When overridden in a derived class  positions child elements and determines a size for a  lt see cref  FrameworkElement   gt  derived class            lt  summary gt           lt param name  finalSize  gt The final area within the parent that this element should use to arrange itself and its children  lt  param gt           lt returns gt The actual size used  lt  returns gt      protected override Size ArrangeOverride Size finalSize                this contentPresenter Arrange new Rect finalSize            return finalSize              endregion     Now you can put a watermark on any TextBox like this    lt AdornerDecorator gt      lt TextBox x Name  SearchTextBox  gt         lt controls WatermarkService Watermark gt            lt TextBlock gt Type here to search text lt  TextBlock gt         lt  controls WatermarkService Watermark gt      lt  TextBox gt   lt  AdornerDecorator gt    The watermark can be anything you want  text  images        In addition to working for TextBoxes  this watermark also works for ComboBoxes and ItemControls   This code was adapted from this blog post

User · Answer

If rather than having the watermark s visibility depend on the control s focus state  you want it to depend on whether the user has entered any text  you can update John Myczek s answer  from OnWatermarkChanged down  to   static void OnWatermarkChanged DependencyObject d  DependencyPropertyChangedEventArgs e        var textbox    TextBox d      textbox Loaded    UpdateWatermark      textbox TextChanged    UpdateWatermark     static void UpdateWatermark object sender  RoutedEventArgs e        var textbox    TextBox sender      var layer   AdornerLayer GetAdornerLayer textbox       if  layer    null            if  textbox Text    string Empty                layer Add new WatermarkAdorner textbox  GetWatermark textbox               else               var adorners   layer GetAdorners textbox               if  adorners    null                    return                             foreach  var adorner in adorners                    if  adorner is WatermarkAdorner                        adorner Visibility   Visibility Hidden                      layer Remove adorner                                                       This makes more sense if your textbox gets focus automatically when displaying the form  or when databinding to the Text property   Also if your watermark is always just a string  and you need the style of the watermark to match the style of the textbox  then in the Adorner do   contentPresenter   new ContentPresenter       Content   new TextBlock           Text    string watermark          Foreground   Control Foreground          Background   Control Background          FontFamily   Control FontFamily          FontSize   Control FontSize

User · Answer

I saw John Myczek s solution  and its comments about Compatibility to ComboBox and PasswordBox  so I improved John Myczek s solution  and here it is   using System  using System Collections Generic  using System ComponentModel  using System Windows  using System Windows Controls  using System Windows Controls Primitives  using System Windows Documents        lt summary gt      Class that provides the Watermark attached property      lt  summary gt  public static class WatermarkService            lt summary gt          Watermark Attached Dependency Property          lt  summary gt      public static readonly DependencyProperty WatermarkProperty   DependencyProperty RegisterAttached          Watermark          typeof object          typeof WatermarkService          new FrameworkPropertyMetadata  object null  new PropertyChangedCallback OnWatermarkChanged           region Private Fields           lt summary gt          Dictionary of ItemsControls          lt  summary gt      private static readonly Dictionary lt object  ItemsControl gt  itemsControls   new Dictionary lt object  ItemsControl gt           endregion           lt summary gt          Gets the Watermark property   This dependency property indicates the watermark for the control           lt  summary gt           lt param name  d  gt  lt see cref  DependencyObject   gt  to get the property from lt  param gt           lt returns gt The value of the Watermark property lt  returns gt      public static object GetWatermark DependencyObject d                return  object d GetValue WatermarkProperty                   lt summary gt          Sets the Watermark property   This dependency property indicates the watermark for the control           lt  summary gt           lt param name  d  gt  lt see cref  DependencyObject   gt  to set the property on lt  param gt           lt param name  value  gt value of the property lt  param gt      public static void SetWatermark DependencyObject d  object value                d SetValue WatermarkProperty  value                   lt summary gt          Handles changes to the Watermark property           lt  summary gt           lt param name  d  gt  lt see cref  DependencyObject   gt  that fired the event lt  param gt           lt param name  e  gt A  lt see cref  DependencyPropertyChangedEventArgs   gt  that contains the event data  lt  param gt      private static void OnWatermarkChanged DependencyObject d  DependencyPropertyChangedEventArgs e                Control control    Control d          control Loaded    Control Loaded           if  d is TextBox    d is PasswordBox                        control GotKeyboardFocus    Control GotKeyboardFocus              control LostKeyboardFocus    Control Loaded                    else if  d is ComboBox                        control GotKeyboardFocus    Control GotKeyboardFocus              control LostKeyboardFocus    Control Loaded               d as ComboBox  SelectionChanged    new SelectionChangedEventHandler SelectionChanged                     else if  d is ItemsControl                        ItemsControl i    ItemsControl d                  for Items property               i ItemContainerGenerator ItemsChanged    ItemsChanged              itemsControls Add i ItemContainerGenerator  i                   for ItemsSource property               DependencyPropertyDescriptor prop   DependencyPropertyDescriptor FromProperty ItemsControl ItemsSourceProperty  i GetType                 prop AddValueChanged i  ItemsSourceChanged                             lt summary gt          Event handler for the selection changed event          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  ItemsChangedEventArgs   gt  that contains the event data  lt  param gt      private static void SelectionChanged object sender  SelectionChangedEventArgs e                Control control    Control sender          if  ShouldShowWatermark control                         ShowWatermark control                     else                       RemoveWatermark control                         region Event Handlers           lt summary gt          Handle the GotFocus event on the control          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  RoutedEventArgs   gt  that contains the event data  lt  param gt      private static void Control GotKeyboardFocus object sender  RoutedEventArgs e                Control c    Control sender          if  ShouldShowWatermark c                         RemoveWatermark c                             lt summary gt          Handle the Loaded and LostFocus event on the control          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  RoutedEventArgs   gt  that contains the event data  lt  param gt      private static void Control Loaded object sender  RoutedEventArgs e                Control control    Control sender          if  ShouldShowWatermark control                         ShowWatermark control                             lt summary gt          Event handler for the items source changed event          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  EventArgs   gt  that contains the event data  lt  param gt      private static void ItemsSourceChanged object sender  EventArgs e                ItemsControl c    ItemsControl sender          if  c ItemsSource    null                        if  ShouldShowWatermark c                                 ShowWatermark c                             else                               RemoveWatermark c                                   else                       ShowWatermark c                             lt summary gt          Event handler for the items changed event          lt  summary gt           lt param name  sender  gt The source of the event  lt  param gt           lt param name  e  gt A  lt see cref  ItemsChangedEventArgs   gt  that contains the event data  lt  param gt      private static void ItemsChanged object sender  ItemsChangedEventArgs e                ItemsControl control          if  itemsControls TryGetValue sender  out control                         if  ShouldShowWatermark control                                 ShowWatermark control                             else                               RemoveWatermark control                                       endregion       region Helper Methods           lt summary gt          Remove the watermark from the specified element          lt  summary gt           lt param name  control  gt Element to remove the watermark from lt  param gt      private static void RemoveWatermark UIElement control                AdornerLayer layer   AdornerLayer GetAdornerLayer control               layer could be null if control is no longer in the visual tree         if  layer    null                        Adorner   adorners   layer GetAdorners control               if  adorners    null                                return                             foreach  Adorner adorner in adorners                                if  adorner is WatermarkAdorner                                        adorner Visibility   Visibility Hidden                      layer Remove adorner                                                             lt summary gt          Show the watermark on the specified control          lt  summary gt           lt param name  control  gt Control to show the watermark on lt  param gt      private static void ShowWatermark Control control                AdornerLayer layer   AdornerLayer GetAdornerLayer control               layer could be null if control is no longer in the visual tree         if  layer    null                        layer Add new WatermarkAdorner control  GetWatermark control                               lt summary gt          Indicates whether or not the watermark should be shown on the specified control          lt  summary gt           lt param name  c  gt  lt see cref  Control   gt  to test lt  param gt           lt returns gt true if the watermark should be shown  false otherwise lt  returns gt      private static bool ShouldShowWatermark Control c                if  c is ComboBox                        return  c as ComboBox  SelectedItem    null                return  c as ComboBox  Text    string Empty                    else if  c is TextBoxBase                        return  c as TextBox  Text    string Empty                    else if  c is PasswordBox                        return  c as PasswordBox  Password    string Empty                    else if  c is ItemsControl                        return  c as ItemsControl  Items Count    0                    else                       return false                        endregion     Now  a ComboBox can be also Editable  and PasswordBox can add a watermark too  Don t forget to use JoanComasFdz s comment above to solve the margin problem   And  of course  All the credit goes to John Myczek

User · Answer

Just using XAML  no extensions  no converters    lt Grid gt       lt TextBox  Width  250   VerticalAlignment  Center  HorizontalAlignment  Left  x Name  SearchTermTextBox  Margin  5   gt       lt TextBlock IsHitTestVisible  False  Text  Enter Search Term Here  VerticalAlignment  Center  HorizontalAlignment  Left  Margin  10 0 0 0  Foreground  DarkGray  gt           lt TextBlock Style gt               lt Style TargetType   x Type TextBlock   gt                   lt Setter Property  Visibility  Value  Collapsed   gt                   lt Style Triggers gt                       lt DataTrigger Binding   Binding Text  ElementName SearchTermTextBox   Value    gt                           lt Setter Property  Visibility  Value  Visible   gt                       lt  DataTrigger gt                   lt  Style Triggers gt               lt  Style gt           lt  TextBlock Style gt       lt  TextBlock gt   lt  Grid gt

User · Answer

Set up the text box with placeholder text in a soft color     public MainWindow           InitializeComponent          txtInput Text    Type something here          txtInput Foreground   Brushes DimGray      When the text box gets the focus  clear it and change the text color  private void txtInput GotFocus   object sender  EventArgs e         MessageBox Show    got focus         txtInput Text           txtInput Foreground   Brushes Red

User · Answer

Simple solution using style    lt TextBox gt       lt TextBox Style gt           lt Style TargetType  TextBox  xmlns sys  clr-namespace System assembly mscorlib  gt               lt Style Resources gt                   lt VisualBrush x Key  CueBannerBrush  AlignmentX  Left  AlignmentY  Center  Stretch  None  gt                       lt VisualBrush Visual gt                           lt Label Content  MM SS HH AM PM  Foreground  LightGray    gt                       lt  VisualBrush Visual gt                   lt  VisualBrush gt               lt  Style Resources gt               lt Style Triggers gt                   lt Trigger Property  Text  Value   x Static sys String Empty   gt                       lt Setter Property  Background  Value   StaticResource CueBannerBrush     gt                   lt  Trigger gt                   lt Trigger Property  Text  Value   x Null   gt                       lt Setter Property  Background  Value   StaticResource CueBannerBrush     gt                   lt  Trigger gt                   lt Trigger Property  IsKeyboardFocused  Value  True  gt                       lt Setter Property  Background  Value  White    gt                   lt  Trigger gt               lt  Style Triggers gt           lt  Style gt       lt  TextBox Style gt   lt  TextBox gt    Great solution   https   code msdn microsoft com windowsdesktop In-place-hit-messages-for-18db3a6c

User · Answer

Telerik have a Control called the RadWatermarkTextBox specifically to solve this issue  If you are using Telerik controls  simply use in the following manner   lt telerik RadWatermarkTextBox     Text   Binding Path MyTextBoxText       WatermarkContent  Please enter some text    gt

User · Answer

I can t believe that no one posted the obvious Extended WPF Toolkit - WatermarkTextBox from Xceed  It works quite well and is open source in case you want to customise

User · Answer

you can use GetFocus   and LostFocus   events to do this  here is the example       private void txtData1 GetFocus object sender  RoutedEventArgs e                if  txtData1 Text     TextBox1abc                         txtData1 Text   string Empty                       private void txtData1 LostFocus object sender  RoutedEventArgs e                if  txtData1 Text    string Empty                        txtData1 Text    TextBox1abc

User · Answer

I ran into a bit of difficulty when using  john-myczek s code with a bound TextBox  As the TextBox doesn t raise a focus event when it s updated  the watermark would remain visible underneath the new text  To fix this  I simply added another event handler   if  d is ComboBox    d is TextBox        control GotKeyboardFocus    Control GotKeyboardFocus      control LostKeyboardFocus    Control Loaded       if  d is TextBox           d as TextBox  TextChanged    Control TextChanged      private static void Control TextChanged object sender  RoutedEventArgs e        var tb    TextBox sender      if  ShouldShowWatermark tb                 ShowWatermark tb             else               RemoveWatermark tb

User · Answer

namespace PlaceholderForRichTexxBoxInWPF   public MainWindow                         InitializeComponent                Application Current MainWindow WindowState   WindowState Maximized    maximize window on load              richTextBox1 GotKeyboardFocus    new KeyboardFocusChangedEventHandler rtb GotKeyboardFocus               richTextBox1 LostKeyboardFocus    new KeyboardFocusChangedEventHandler rtb LostKeyboardFocus               richTextBox1 AppendText  Place Holder                richTextBox1 Foreground   Brushes Gray             private void rtb GotKeyboardFocus object sender  KeyboardFocusChangedEventArgs e                        if  sender is RichTextBox                                TextRange textRange   new TextRange richTextBox1 Document ContentStart  richTextBox1 Document ContentEnd                     if  textRange Text Trim   Equals  Place Holder                                            RichTextBox sender  Foreground   Brushes Black                      richTextBox1 Document Blocks Clear                                                        private void rtb LostKeyboardFocus object sender  KeyboardFocusChangedEventArgs e                          Make sure sender is the correct Control              if  sender is RichTextBox                                  If nothing was entered  reset default text                  TextRange textRange   new TextRange richTextBox1 Document ContentStart  richTextBox1 Document ContentEnd                     if  textRange Text Trim   Equals                                              RichTextBox sender  Foreground   Brushes Gray                        RichTextBox sender  AppendText  Place Holder

User · Answer

I found this way to do it in a very fast and easy way   lt ComboBox x Name  comboBox1  SelectedIndex  0  HorizontalAlignment  Left  Margin  202 43 0 0  VerticalAlignment  Top  Width  149  gt     lt ComboBoxItem Visibility  Collapsed  gt       lt TextBlock Foreground  Gray  FontStyle  Italic  gt Please select     lt  TextBlock gt     lt  ComboBoxItem gt     lt ComboBoxItem Name  cbiFirst1  gt First Item lt  ComboBoxItem gt     lt ComboBoxItem Name  cbiSecond1  gt Second Item lt  ComboBoxItem gt     lt ComboBoxItem Name  cbiThird1  gt third Item lt  ComboBoxItem gt   lt  ComboBox gt    Maybe it can help to anyone trying to do this  Source  http   www admindiaries com displaying-a-please-select-watermark-type-text-in-a-wpf-combobox

User · Answer

hi i put this task into a behavior  so you just have to add somthing like this to your textbox   lt i Interaction Behaviors gt            lt Behaviors TextBoxWatermarkBehavior Label  Test Watermark  LabelStyle   StaticResource StyleWatermarkLabel    gt   lt  i Interaction Behaviors gt    you can find my blog post here

User · Answer

I have created siple code-only implementation which works fine for WPF and Silverlight as well   using System Windows  using System Windows Controls  using System Windows Data  using System Windows Media   public class TextBoxWatermarked   TextBox        region   Dependency Properties        public static DependencyProperty WatermarkProperty   DependencyProperty Register  Watermark                                                                                typeof string                                                                                typeof TextBoxWatermarked                                                                                new PropertyMetadata new PropertyChangedCallback OnWatermarkChanged            endregion        region   Fields        private bool  isWatermarked      private Binding  textBinding        endregion        region   Properties        protected new Brush Foreground               get   return base Foreground            set   base Foreground   value               public string Watermark               get   return  string GetValue WatermarkProperty             set   SetValue WatermarkProperty  value                 endregion        region    ctor        public TextBoxWatermarked                 Loaded     s  ea    gt  ShowWatermark                endregion        region   Event Handlers        protected override void OnGotFocus RoutedEventArgs e                base OnGotFocus e           HideWatermark               protected override void OnLostFocus RoutedEventArgs e                base OnLostFocus e           ShowWatermark               private static void OnWatermarkChanged DependencyObject sender  DependencyPropertyChangedEventArgs ea                var tbw   sender as TextBoxWatermarked          if  tbw    null  return          tbw ShowWatermark                endregion        region   Methods        private void ShowWatermark                 if  string IsNullOrEmpty base Text                          isWatermarked   true              base Foreground   new SolidColorBrush Colors Gray               var bindingExpression   GetBindingExpression TextProperty                textBinding   bindingExpression    null   null   bindingExpression ParentBinding              if  bindingExpression    null                  bindingExpression UpdateSource                SetBinding TextProperty  new Binding                 base Text   Watermark                       private void HideWatermark                 if   isWatermarked                         isWatermarked   false              ClearValue ForegroundProperty               base Text                   SetBinding TextProperty   textBinding    new Binding                           endregion     Usage    lt TextBoxWatermarked Watermark  Some text    gt

User · Answer

lt TextBox    Grid Column  0  Name  TextBox SearchBar  AcceptsReturn  False  AcceptsTab  False  TextWrapping  Wrap  KeyUp  TextBox SearchBar KeyUp    gt   lt TextBox    Grid Column  0  Name  TextBox Watermark  Text  Search Test Sets  Foreground  Gray  GotFocus  TextBox Watermark GotFocus    gt   private void TextBox Watermark GotFocus  object sender  RoutedEventArgs e         TextBox Watermark Visibility   Visibility Hidden      TextBox SearchBar Focus        This creates two TextBoxes  one for the field which receives the watermark and one for the watermark  The field which receives the watermark could be a ComboBox or other control   as long as you get the alignment correct and it gains Focus accordingly     The watermark MUST be a TextBox or other control which can GetFocus   a TextBlock can not GetFocus  as I learned the hard way    When the watermark TextBox gets focus  it hides itself and gives access to the other TextBox   If you want to reshow the watermark after the the SearchBar TextBox has lost focus  simply add a LostFocus event handler to TextBox SearchBar which checks the input and toggles TextBox Watermark visibility to Hidden or Visible  accordingly

User · Answer

You can keep a seperate value for the entered text and you can set it along with the  Text  field of the text box in the  GotFocus  and  LostFocus  events  When you get the focus  you ll want to clear the text box if there is no value  And when you loss the focus  you ll want to set the get the  Text  value from the text box and then reset the  Text  value of the text box to the place holder if it is empty   private String username        private void usernameTextBox GotFocus object sender  RoutedEventArgs e      if  String IsNullOrEmpty username         usernameTextBox Text              private void usernameTextBox LostFocus object sender  RoutedEventArgs e      username   usernameTextBox Text    if  String IsNullOrEmpty usernameTextBox Text         usernameTextBox Text    Username           Then you just have to make sure that the  Text  value of the text box is initialized to the place holder text    lt TextBox x Name  usernameTextBox  Text  Username  GotFocus  usernameTextBox GotFocus  LostFocus  usernameTextBox LostFocus    gt    You can further extract this into a class that extends the  TextBox  class and then reuse it through out your project   namespace UI     public class PlaceholderTextBox   TextBox       public String Value   get  set        public String PlaceholderText   get  set        public Brush PlaceholderBrush   get  set        private Brush ValuedBrush   get  set         public PlaceholderTextBox     base           protected override void OnInitialized EventArgs e          base OnInitialized e          ValuedBrush   this Foreground         if  String IsNullOrEmpty this Text             this Text   PlaceholderText          this Foreground   PlaceholderBrush                     protected override void OnGotFocus System Windows RoutedEventArgs e          this Foreground   ValuedBrush        if  String IsNullOrEmpty Value             this Text                      base OnGotFocus e              protected override void OnLostFocus System Windows RoutedEventArgs e          Value   this Text        if  String IsNullOrEmpty this Text             this Text   PlaceholderText          this Foreground   PlaceholderBrush                 base OnLostFocus e                 And then this can be added in the directly in the xaml    lt Window x Class  UI LoginWindow          xmlns  http   schemas microsoft com winfx 2006 xaml presentation          xmlns x  http   schemas microsoft com winfx 2006 xaml          xmlns m  clr-namespace UI          Initialized  Window Initialized  gt       lt Grid gt           lt m PlaceholderTextBox x Name  usernameTextBox  PlaceholderText  Username  PlaceholderBrush  Gray    gt       lt  Grid gt   lt  Window gt

User · Answer

Here s my approach Is great for MVVM where I also check if the Text box has focus  you can also use a regular trigger just for the text value  as well the point is I just change the background Image when value changes                         lt TextBox Style gt                           lt Style TargetType  TextBox  gt                                lt Style Triggers gt                                   lt MultiTrigger gt                                       lt MultiTrigger Conditions gt                                           lt Condition Property  IsFocused  Value  True   gt                                           lt Condition Property  Text  Value     gt                                       lt  MultiTrigger Conditions gt                                       lt MultiTrigger Setters gt                                           lt Setter Property  Background  gt                                               lt Setter Value gt                                                   lt ImageBrush ImageSource   Images Scan PNG  Stretch  Uniform  AlignmentX  Left   gt                                               lt  Setter Value gt                                           lt  Setter gt                                       lt  MultiTrigger Setters gt                                   lt  MultiTrigger gt                                lt  Style Triggers gt                           lt  Style gt                       lt  TextBox Style gt                   lt  TextBox gt

User · Answer

simplest Way to WaterMark Of TextBox     lt Window Resources gt       lt Style x Key  MyWaterMarkStyle  TargetType   x Type TextBox   gt           lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType   x Type TextBox   gt                       lt Grid gt                           lt Border Background  White  BorderBrush   FF7D8683  BorderThickness  1   gt                           lt ScrollViewer x Name  PART ContentHost  Margin  5 0 0 0  VerticalAlignment  Center    gt                           lt Label Margin  5 0 0 0  x Name  WaterMarkLabel  Content   TemplateBinding Tag   VerticalAlignment  Center                             Visibility  Collapsed  Foreground  Gray  FontFamily  Arial   gt                       lt  Grid gt                       lt ControlTemplate Triggers gt                           lt MultiTrigger gt                               lt MultiTrigger Conditions gt                                   lt Condition Property  Text  Value     gt                               lt  MultiTrigger Conditions gt                               lt Setter Property  Visibility  TargetName  WaterMarkLabel  Value  Visible   gt                           lt  MultiTrigger gt                           lt Trigger Property  IsEnabled  Value  False  gt                               lt Setter Property  Foreground  Value  DimGray   gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt   lt  Window Resources gt    and  add textbox StaticResource style      lt TextBox                 Style   StaticResource MyWaterMarkStyle                   Tag  Search Category                  Grid Row  0                  Text   Binding CategorySearch Mode TwoWay UpdateSourceTrigger PropertyChanged                   TextSearch Text  Search Category                   gt

User · Answer

This is a sample which demonstrates how to create a watermark textbox in WPF    lt Window x Class  WaterMarkTextBoxDemo Window1      xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      xmlns local  clr-namespace WaterMarkTextBoxDemo      Height  200  Width  400  gt        lt Window Resources gt            lt SolidColorBrush x Key  brushWatermarkBackground  Color  White    gt           lt SolidColorBrush x Key  brushWatermarkForeground  Color  LightSteelBlue    gt           lt SolidColorBrush x Key  brushWatermarkBorder  Color  Indigo    gt            lt BooleanToVisibilityConverter x Key  BooleanToVisibilityConverter    gt           lt local TextInputToVisibilityConverter x Key  TextInputToVisibilityConverter    gt            lt Style x Key  EntryFieldStyle  TargetType  Grid   gt               lt Setter Property  HorizontalAlignment  Value  Stretch    gt               lt Setter Property  VerticalAlignment  Value  Center    gt               lt Setter Property  Margin  Value  20 0    gt           lt  Style gt        lt  Window Resources gt         lt Grid Background  LightBlue  gt            lt Grid RowDefinitions gt               lt RowDefinition   gt               lt RowDefinition   gt               lt RowDefinition   gt           lt  Grid RowDefinitions gt            lt Grid Grid Row  0  Background   StaticResource brushWatermarkBackground   Style   StaticResource EntryFieldStyle    gt               lt TextBlock Margin  5 2  Text  This prompt dissappears as you type     Foreground   StaticResource brushWatermarkForeground                          Visibility   Binding ElementName txtUserEntry  Path Text IsEmpty  Converter  StaticResource BooleanToVisibilityConverter      gt               lt TextBox Name  txtUserEntry  Background  Transparent  BorderBrush   StaticResource brushWatermarkBorder     gt           lt  Grid gt            lt Grid Grid Row  1  Background   StaticResource brushWatermarkBackground   Style   StaticResource EntryFieldStyle    gt               lt TextBlock Margin  5 2  Text  This dissappears as the control gets focus     Foreground   StaticResource brushWatermarkForeground    gt                   lt TextBlock Visibility gt                       lt MultiBinding Converter   StaticResource TextInputToVisibilityConverter   gt                           lt Binding ElementName  txtUserEntry2  Path  Text IsEmpty    gt                           lt Binding ElementName  txtUserEntry2  Path  IsFocused    gt                       lt  MultiBinding gt                   lt  TextBlock Visibility gt               lt  TextBlock gt               lt TextBox Name  txtUserEntry2  Background  Transparent  BorderBrush   StaticResource brushWatermarkBorder     gt           lt  Grid gt        lt  Grid gt    lt  Window gt    TextInputToVisibilityConverter is defined as   using System  using System Windows Data  using System Windows   namespace WaterMarkTextBoxDemo       public class TextInputToVisibilityConverter   IMultiValueConverter               public object Convert  object   values  Type targetType  object parameter  System Globalization CultureInfo culture                            Always test MultiValueConverter inputs for non-null                 to avoid crash bugs for views in the designer              if  values 0  is bool  amp  amp  values 1  is bool                                bool hasText     bool values 0                   bool hasFocus    bool values 1                    if  hasFocus    hasText                      return Visibility Collapsed                             return Visibility Visible                      public object   ConvertBack  object value  Type   targetTypes  object parameter  System Globalization CultureInfo culture                         throw new NotImplementedException                        Note  This is not my code  I found it here  but I think this is the best approach

[c#] Watermark / hint text / placeholder TextBox

Examples related to c#

Examples related to wpf

Examples related to textbox

Examples related to watermark

Examples related to hint