title: How can I add a "Clear" Button to a TextBox in WPF?
body: <p>I'm working on a control for my WPF application in which I want a <code>Button</code> inside of a <code>TextBox</code>. The <code>Button</code> will contain an image that changes with a mouseover, but I already know how to do that part. What I'm having trouble with is actually including the <code>Button</code> in the <code>TextBox</code> so that it only takes up as much space as the image and is transparent. Below is the markup that I've tried so far:</p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;Grid&gt;
    &lt;TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/&gt;
    &lt;Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"&gt;
      &lt;Button.Content&gt;
        &lt;Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/&gt;
      &lt;/Button.Content&gt;
    &lt;/Button&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>I've followed along with this question: <a href="https://stackoverflow.com/questions/13624606/how-to-implement-a-textbox-with-a-clear-button-in-wpf">How to implement a textbox with a clear button in wpf?</a>, which also linked to this article: <a href="http://davidowens.wordpress.com/2009/02/18/wpf-search-text-box/" rel="nofollow noreferrer">WPF Search Text Box</a>. The XAML suggested in the question didn't work, which I think is because of the <code>Style</code> they use, which I don't have access to. The article provided too much information, mostly talking about the triggers and dependency properties needed in order to swap out searching and deleting icons on mouseovers. So, I'm asking for help finding a simple solution on how to make this happen. Thank you!</p>
  
  <p>EDIT: I've followed the advice of the answers, and I'm able to style the button correctly, but it won't show up in the textbox still, and if it does, the text still runs underneath it. I've included the XAML and a picture of what's happening:</p>
  
  <p>XAML: </p>
  
  <pre><code>&lt;Grid Margin="5, 5, 10, 5"&gt;
    &lt;Grid.ColumnDefinitions&gt;
      &lt;ColumnDefinition Width="*"/&gt;
      &lt;ColumnDefinition Width="Auto"/&gt;
    &lt;/Grid.ColumnDefinitions&gt;
    &lt;TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/&gt;
    &lt;Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1"&gt;
      &lt;Button.Template&gt;
        &lt;ControlTemplate&gt;
          &lt;Border HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
            &lt;Image Source="Image.png" Width="12" Height="12"/&gt;
          &lt;/Border&gt;
        &lt;/ControlTemplate&gt;
      &lt;/Button.Template&gt;
    &lt;/Button&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Image:</p>
  
  <p><img src="https://i.stack.imgur.com/I8aRL.png" alt="Searchbox w/ Button"></p>