DataTrigger applied to text property of a Textbox causes its binding to stop working

Question

I have a functional binding on my TextBox which acts as a searbar. However, when I add the following trigger applied on the same binding (The first trigger), it stops the binding.

  <TextBox>
    <TextBox.Style>
      <Style TargetType="TextBox">
        <Setter Property="Text" Value="{Binding Path=SearchFilterString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
        <Style.Triggers>
          <!-- 1st trigger -->
          <DataTrigger Binding="{Binding Path=SearchFilterString}" Value="">
            <Setter Property="Text" Value="Type in part name to search."/>
          </DataTrigger>
          <!-- 2nd trigger -->
          <Trigger Property="IsFocused" Value="true">
            <Setter Property="Text" Value="{x:Null}"/>
          </Trigger>
        </Style.Triggers>
      </Style>
    </TextBox.Style>
  </TextBox>

I also included the second trigger, to make sure after I fix the problem with the first one it won't create a endless loop situation. So please comment on that one as well.

The purpose of these two triggers is to show some guidline inside the TextBox to describe what is this texbox about and the guidline disapears as soon as TextBox gains focus and user attempts to type in the search keyword.Let me know if you believe there is a better approach on doing the same thing.

Frank · Answer 1 · 2014-12-10T02:16:53.020

Your binding won't work, because you are overriding it with your trigger's setter: You are setting the Text property of it to a value, while you are binding the same Text property to the view model. Both things can't work at the same time.

Essentially you're trying to create something that is called "watermark" on a textbox. I like the following the solution in particular, because it doesn't modify the TextBox itself but layers an adorner ontop of it:

Watermark Behavior for TextBox

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

You are looking for a watermark textbox. The standard WPF TextBox does not support this behavior.

However, there are 3rd party controls available such as the one pointed out by Frank: http://wpfplayground.com/2014/06/30/watermark-behavior-for-textbox/

Ways to do your own can be found at Watermark / hint text / placeholder TextBox in WPF

Finally, you can always just overlay your own TextBox or TextBlock over the real one and hide it on focus, which will do basically the same thing.

edited May 23 '17 at 12:27

Community

1
1

answered Dec 10 '14 at 02:06

BradleyDotNET

60,462
10
96
117

I'm sorry, but this answer is plain wrong. While masked text boxes are only accepting a specific range of input (e.g. Numeric or controlled by a RegEx), a watermark just layers an informational text ontop. As OP is building a search box, he likely wants the latter. – Frank Dec 10 '14 at 02:24
@Frank I had my terminology mixed up, sorry about that. I have fixed it now. – BradleyDotNET Dec 10 '14 at 17:40

Mehrad · Answer 3 · 2014-12-10T05:15:54.170

This is how I achieved it using Brad's idea.

I simply put a Label with the watermark I wanted and overlapped my TextBox on top of it. All I am doing is setting the TextBox's Background property to Transparent when it's binding content is empty. When this happens you can see the label on the back.

Hence, the moment you start typing watermark disappears.

XAML

  <!-- Watermark Label -->
  <Label 
    Foreground="Gray"
    Content="Type the part name to start the search."
    />

  <!-- Search TextBox -->
  <TextBox Grid.Column="0" 
           HorizontalAlignment="Stretch" 
           >
    <TextBox.Style>
      <Style TargetType="TextBox">
        <Setter Property="Text" Value="{Binding Path=SearchFilterString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
        <Style.Triggers>
          <DataTrigger Binding="{Binding Path=SearchFilterString}" Value="">
            <Setter Property="Background" Value="Transparent"/>
          </DataTrigger>
        </Style.Triggers>
      </Style>
    </TextBox.Style>
  </TextBox>

Outcome

enter image description here

Thanks @Frank for letting me know what is it called. I knew it should have a name but I just couldn't link the dots. — Mehrad, Dec 10 '14 at 05:10

DataTrigger applied to text property of a Textbox causes its binding to stop working

3 Answers3