How to change the image of a button when a textbox is empty in WPF?

Question

I want to create a SearchBox and currently my code looks like below. I tried to change the ImageSource of the ImageBrush tag when the text box is empty but I don't know to bind the Text property from the Textbox properly. I want my SearchBox to look like this:

When the SearchBox is empty the button must to show the search image and when the SearchBox is not empty the button must to show the clear search image. Can anyone hepl me with this?

<TextBox Name="SearchTextBox" />

<Button Grid.Column="0" Style="{DynamicResource NoChromeButton}" BorderThickness="1" 
        VerticalAlignment="Center" HorizontalAlignment="Right" Width="25" Height="25" Click="Search_Click" Panel.ZIndex="1">
  <Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
      <Border>
        <Grid>
          <ContentPresenter />
          <Grid x:Name="StatusPanel" Background="Black" Opacity="0"/>
        </Grid>
      </Border>

      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
          <Setter TargetName="StatusPanel" Property="Opacity" Value="0.1"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
          <Setter TargetName="StatusPanel" Property="Opacity" Value="0.3"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Button.Template>

  <Button.Content>
    <Rectangle x:Name="aaa" >
      <Rectangle.Fill>
        <ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img1.png" />
      </Rectangle.Fill>
      <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}" >
          <Style.Triggers>
            <DataTrigger Binding="{Binding Text.Length, ElementName=SearchTextBox, UpdateSourceTrigger=PropertyChanged}" Value="0" >
              <DataTrigger.Setters>
                <Setter Property="Fill">
                  <Setter.Value>
                    <ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img2.png" />
                  </Setter.Value>
                </Setter>
              </DataTrigger.Setters>
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </Rectangle.Style>
    </Rectangle>
  </Button.Content>
</Button>

https://stackoverflow.com/questions/833943/watermark-hint-text-placeholder-textbox-in-wpf might be of use — GrandMasterFlush, Jun 09 '18 at 12:58

ASh · Accepted Answer · 2018-06-09T13:08:52.427

you are close. instead of setting <Rectangle.Fill> locally, use Style setter:

<Rectangle x:Name="aaa" >
  <Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}" >
      <Setter Property="Fill">
        <Setter.Value>
          <ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img1.png" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <DataTrigger Binding="{Binding Text.Length, ElementName=SearchTextBox}" Value="0" >
          <DataTrigger.Setters>
            <Setter Property="Fill">
              <Setter.Value>
                <ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img2.png" />
              </Setter.Value>
            </Setter>
          </DataTrigger.Setters>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Rectangle.Style>
</Rectangle>

it is necessary because Trigger cannot override local value

You are perfectly right. Thank you very much for your help – Ionut Enache Jun 09 '18 at 17:37 — Ionut Enache, Jun 09 '18 at 17:37

How to change the image of a button when a textbox is empty in WPF?

1 Answers1