How can I add a "Clear" Button to a TextBox in WPF?

Question

I'm working on a control for my WPF application in which I want a Button inside of a TextBox. The Button 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 Button in the TextBox 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:

XAML:

<Grid>
  <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"/>
  <Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
    <Button.Content>
      <Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Button.Content>
  </Button>
</Grid>

I've followed along with this question: How to implement a textbox with a clear button in wpf?, which also linked to this article: WPF Search Text Box. The XAML suggested in the question didn't work, which I think is because of the Style 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!

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:

XAML:

<Grid Margin="5, 5, 10, 5">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
  <Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1">
    <Button.Template>
      <ControlTemplate>
        <Border HorizontalAlignment="Center" VerticalAlignment="Center">
          <Image Source="Image.png" Width="12" Height="12"/>
        </Border>
      </ControlTemplate>
    </Button.Template>
  </Button>
</Grid>

Image:

Solution

Specify Button template, instead of content

<Button>
    <Button.Template>
        <ControlTemplate>
            <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png" 
                               Width="16" 
                               Height="16"/>
            </Border>
        </ControlTemplate>
     </Button.Template>
</Button>

EDIT

BTW, in your case the image will cover TextBox and entered text. I would recommend to put this controls in the different columns of the grid like bellow

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <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"/>

   <Button
            Grid.Column="1"
            Background="Transparent"
            HorizontalAlignment="Right"
            HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
           <ControlTemplate>
                <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png" 
                                   Width="16" 
                                   Height="16"/>
                </Border>
            </ControlTemplate>
         </Button.Template>
    </Button>

Comments

[Sean Cogan]

This answer has worked great, but I'm running into the issue now where text will disappear behind the button because the button is simply placed over the textbox. Is there anyway I can actually put the button in the textbox? I realize this is different from my original question, but I think it's what I actually need. Thank you so much for your help so far, though.

[Arsen Mkrtchyan]

yes, put textbox and button in the different columns of the grid. Set the width of second column to Auto, and the first one leave default or set to *. if you want to ovverride textbox border, you can give some minor minus margin to the button.

[Sean Cogan]

I've put the textbox and button in different columns of the grid, and the button showed up halfway out of the textbox. So I messed with the margins of the button, and when I get it to show up in the textbox, the text of the textbox still goes underneath the button. I'd like it to stop at the button.

[Sean Cogan]

Crap. Just realized I didn't actually put the button in the second column... Sorry

[Arsen Mkrtchyan]

And did you set Grid.Column for button?

[Sean Cogan]

Ok, I realized how to fix my problem. I just set the Grid.ColumnSpan of the TextBox to 2, so that it would go under the button. Then, to stop the actual text from going under the button, I set the padding of the TextBox. Every works just as I wanted it now. Thank you very much for your help!