How can I add a hint text to WPF textbox

Question

For example  Facebook has a  Search  hint text in the Search text box when the textbox is empty    How to achieve this with WPF text boxes

User · Answer

Another solution is to use a WPF toolkit like MahApps.Metro. It has many nice features, like a text box watermark:

Controls:TextBoxHelper.Watermark="Search..."

See http://mahapps.com/controls/textbox.html

User · 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

Another approach  -    this works also with PasswordBox  If you want to use it with TextBox  simply exchange PasswordChangedwith TextChanged   XAML    lt Grid gt       lt  -- overlay with hint text -- gt       lt TextBlock Margin  5 2                  Text  Password                  Foreground  Gray                  Name  txtHintPassword   gt       lt  -- enter user here -- gt       lt PasswordBox Name  txtPassword                  Background  Transparent                  PasswordChanged  txtPassword PasswordChanged   gt   lt  Grid gt    CodeBehind   private void txtPassword PasswordChanged object sender  RoutedEventArgs e        txtHintPassword Visibility   Visibility Visible      if  txtPassword Password Length  gt  0                txtHintPassword Visibility   Visibility Hidden

User · Answer

I accomplish this  with a VisualBrush and some triggers in a Style suggested by  sellmeadog    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     sellmeadog  Application running  bt Design not loading   the following Error comes  Ambiguous type reference  A type named  StaticExtension  occurs in at least two namespaces   MS Internal Metadata ExposedTypes Xaml  and  System Windows Markup   Consider adjusting the assembly XmlnsDefinition attributes   m using  net 3 5

User · Answer

Do it in the code-behind by setting the text color initially to gray and adding event handlers for gaining and losing keyboard focus   TextBox tb   new TextBox    tb Foreground   Brushes Gray  tb Text    Text   tb GotKeyboardFocus    new KeyboardFocusChangedEventHandler tb GotKeyboardFocus   tb LostKeyboardFocus    new KeyboardFocusChangedEventHandler tb LostKeyboardFocus     Then the event handlers   private void tb GotKeyboardFocus object sender  KeyboardFocusChangedEventArgs e        if sender is TextBox                  If nothing has been entered yet          if   TextBox sender  Foreground    Brushes Gray                          TextBox sender  Text                     TextBox sender  Foreground   Brushes Black                      private void tb LostKeyboardFocus object sender  KeyboardFocusChangedEventArgs e          Make sure sender is the correct Control      if sender is TextBox                  If nothing was entered  reset default text          if   TextBox sender  Text Trim   Equals                              TextBox sender  Foreground   Brushes Gray                TextBox sender  Text    Text

User · Answer

You can do in a very simple way   The idea is to place a Label in the same place as your textbox  Your Label will be visible if textbox has no text and hasn t the focus     lt Label Name  PalceHolder   HorizontalAlignment  Left  HorizontalContentAlignment  Center  VerticalContentAlignment  Center  Height  40  VerticalAlignment  Top  Width  239  FontStyle  Italic   Foreground  BurlyWood  gt PlaceHolder Text Here    lt Label Style gt       lt Style TargetType   x Type Label   gt         lt Setter Property  Visibility  Value  Hidden   gt         lt Style Triggers gt           lt MultiDataTrigger gt             lt MultiDataTrigger Conditions gt               lt Condition Binding    Binding ElementName PalceHolder  Path Text Length   Value  0   gt               lt Condition Binding    Binding ElementName PalceHolder  Path IsFocused   Value  False   gt             lt  MultiDataTrigger Conditions gt             lt Setter Property  Visibility  Value  Visible   gt           lt  MultiDataTrigger gt         lt  Style Triggers gt       lt  Style gt     lt  Label Style gt   lt  Label gt   lt TextBox  Background  Transparent  Name  TextBox1  HorizontalAlignment  Left  HorizontalContentAlignment  Center  VerticalContentAlignment  Center  Height  40 TextWrapping  Wrap  Text   Binding InputText Mode TwoWay   VerticalAlignment  Top  Width  239    gt    Bonus If you want to have default value for your textBox  be sure after to set it when submitting data  for example  InputText   PlaceHolder Text Here  if empty

User · Answer

That s my take   lt ControlTemplate gt       lt Grid gt           lt Grid Resources gt               lt  --Define look   layout for both TextBoxes here  I applied custom Padding and BorderThickness for my application-- gt               lt Style TargetType  quot TextBox quot  gt                   lt Setter Property  quot Padding quot  Value  quot 4 quot   gt                   lt Setter Property  quot BorderThickness quot  Value  quot 2 quot   gt               lt  Style gt           lt  Grid Resources gt            lt TextBox x Name  quot TbSearch quot   gt           lt TextBox x Name  quot TbHint quot  Text  quot Suche quot  Foreground  quot LightGray quot                   Visibility  quot Hidden quot  IsHitTestVisible  quot False quot  Focusable  quot False quot   gt       lt  Grid gt        lt ControlTemplate Triggers gt           lt MultiTrigger gt               lt MultiTrigger Conditions gt                   lt Condition SourceName  quot TbSearch quot  Property  quot Text quot  Value  quot  x Static sys String Empty  quot   gt                   lt Condition SourceName  quot TbSearch quot  Property  quot IsKeyboardFocused quot  Value  quot False quot   gt               lt  MultiTrigger Conditions gt               lt MultiTrigger Setters gt                   lt Setter TargetName  quot TbHint quot  Property  quot Visibility quot  Value  quot Visible quot   gt               lt  MultiTrigger Setters gt           lt  MultiTrigger gt            lt MultiTrigger gt               lt MultiTrigger Conditions gt                   lt Condition SourceName  quot TbSearch quot  Property  quot Text quot  Value  quot  x Null  quot   gt                   lt Condition SourceName  quot TbSearch quot  Property  quot IsKeyboardFocused quot  Value  quot False quot   gt               lt  MultiTrigger Conditions gt               lt MultiTrigger Setters gt                   lt Setter TargetName  quot TbHint quot  Property  quot Visibility quot  Value  quot Visible quot   gt               lt  MultiTrigger Setters gt           lt  MultiTrigger gt       lt  ControlTemplate Triggers gt   lt  ControlTemplate gt   Most other answers including the top one have flaws in my opinion  This solution works under all circumstances  Pure XAML  easily reusable

User · Answer

You have to create a custom control by inheriting the textbox  Below link has an excellent example about the search textbox sample  Please have a look at this  http   davidowens wordpress com 2009 02 18 wpf-search-text-box

User · Answer

I once got into the same situation  I solved it following way  I ve only fulfilled the requirements of a hint box  you can make it more interactive by adding effects and other things on other events like on focus etc   WPF CODE  I ve removed styling to make it readable    lt Grid Margin  0 0 0 0   Background  White  gt       lt Label Name  adminEmailHint  Foreground  LightGray  Padding  6   FontSize  14  gt Admin Email lt  Label gt       lt TextBox Padding  4 7 4 8  Background  Transparent  TextChanged  adminEmail TextChanged  Height  31  x Name  adminEmail  Width  180    gt   lt  Grid gt   lt Grid Margin  10 0 10 0  Background  White   gt       lt Label Name  adminPasswordHint  Foreground  LightGray  Padding  6   FontSize  14  gt Admin Password lt  Label gt       lt PasswordBox Padding  4 6 4 8  Background  Transparent  PasswordChanged  adminPassword PasswordChanged  Height  31  x Name  adminPassword  VerticalContentAlignment  Center  VerticalAlignment  Center  Width  180  FontFamily  Helvetica  FontWeight  Light  FontSize  14  Controls TextBoxHelper Watermark  Admin Password   FontStyle  Normal    gt   lt  Grid gt    C  Code  private void adminEmail TextChanged object sender  TextChangedEventArgs e                if adminEmail Text Length    0                        adminEmailHint Visibility   Visibility Visible                    else                       adminEmailHint Visibility   Visibility Hidden                   private void adminPassword PasswordChanged object sender  RoutedEventArgs e                if  adminPassword Password Length    0                        adminPasswordHint Visibility   Visibility Visible                    else                       adminPasswordHint Visibility   Visibility Hidden

User · Answer

lt Grid gt       lt TextBox Name  myTextBox   gt       lt TextBlock gt           lt TextBlock Style gt               lt Style TargetType  TextBlock  gt                   lt Style Triggers gt                       lt DataTrigger Binding   Binding ElementName myTextBox  Path Text IsEmpty   Value  True  gt                           lt Setter Property  Text  Value  Prompt      gt                       lt  DataTrigger gt                   lt  Style Triggers gt               lt  Style gt           lt  TextBlock Style gt       lt  TextBlock gt   lt  Grid gt

User · Answer

I used the got and lost focus events   Private Sub txtSearchBox GotFocus ByVal sender As System Object  ByVal e As System Windows RoutedEventArgs  Handles txtSearchBox GotFocus     If txtSearchBox Text    Search  Then         txtSearchBox Text          Else      End If  End Sub  Private Sub txtSearchBox LostFocus ByVal sender As System Object  ByVal e As System Windows RoutedEventArgs  Handles txtSearchBox LostFocus     If txtSearchBox Text      Then         txtSearchBox Text    Search      Else      End If End Sub   It works well  but the text is in gray still  Needs cleaning up  I was using VB NET

User · Answer

For WPF  there isn t a way  You have to mimic it  See this example  A secondary  flaky solution  is to host a WinForms user control that inherits from TextBox and send the EM SETCUEBANNER message to the edit control  ie    DllImport  user32 dll   CharSet   CharSet Auto   private static extern IntPtr SendMessage IntPtr hWnd  Int32 msg  IntPtr wParam  IntPtr lParam    private const Int32 ECM FIRST   0x1500  private const Int32 EM SETCUEBANNER   ECM FIRST   1   private void SetCueText IntPtr handle  string cueText        SendMessage handle  EM SETCUEBANNER  IntPtr Zero  Marshal StringToBSTR cueText       public string CueText       get           return m CueText             set           m CueText   value          SetCueText this Handle  m CueText       Also  if you want to host a WinForm control approach  I have a framework that already includes this implementation called BitFlex Framework  which you can download for free here   Here is an article about BitFlex if you want more information  You will start to find that if you are looking to have Windows Explorer style controls that this generally never comes out of the box  and because WPF does not work with handles generally you cannot write an easy wrapper around Win32 or an existing control like you can with WinForms   Screenshot

User · Answer

This is my simple solution  adapted from Microsoft  https   code msdn microsoft com windowsapps How-to-add-a-hint-text-to-ed66a3c6       lt Grid Background  quot White quot  HorizontalAlignment  quot Right quot  VerticalAlignment  quot Top quot    gt           lt  -- overlay with hint text -- gt           lt TextBlock Margin  quot 5 2 quot  MinWidth  quot 50 quot  Text  quot Suche    quot                      Foreground  quot LightSteelBlue quot  Visibility  quot  Binding ElementName txtSearchBox  Path Text IsEmpty  Converter  StaticResource MyBoolToVisibilityConverter   quot  IsHitTestVisible  quot False quot   gt           lt  -- enter term here -- gt           lt TextBox MinWidth  quot 50 quot  Name  quot txtSearchBox quot  Background  quot Transparent quot    gt       lt  Grid gt

User · Answer

what about using materialDesign HintAssist   i m using this which also you can add floating hint too     lt TextBox Width  150  Height  40  Text  hello  materialDesign HintAssist Hint  address   materialDesign HintAssist IsFloating  True  gt  lt  TextBox gt    i installed Material Design with Nuget Package there is installation guide in documentation link

[.net] How can I add a hint text to WPF textbox?

Examples related to .net

Examples related to wpf

Examples related to user-interface

Examples related to textbox