How to implement a textbox with a clear button in wpf?

Question

I have the following UserControl. It's a TextBox with a Button:

<Grid>
    <TextBox
        Grid.Column="0"
        Text="{Binding Text, 
               RelativeSource={RelativeSource AncestorType=UserControl}, 
               UpdateSourceTrigger=PropertyChanged}"
         x:Name="TextBox" />

     <Button
         Background="{Binding Background, ElementName=TextBox}"
         Grid.Column="1"
         Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
         HorizontalAlignment="Right"
         Visibility="{Binding IsClearButtonVisible,
                      RelativeSource={RelativeSource AncestorType=UserControl},
                      Converter={StaticResource BooleanToVisibilityConverter}}"
         Command="{Binding ClearTextCommand,
                   RelativeSource={RelativeSource AncestorType=UserControl}}"    
         HorizontalContentAlignment="Center"
         VerticalContentAlignment="Center" >

         <Button.Content>
             <Image
                 Source="{StaticResource Delete2}"
                 Stretch="None"
                 RenderOptions.BitmapScalingMode="NearestNeighbor"
                 VerticalAlignment="Center"
                 HorizontalAlignment="Center" />
        </Button.Content>
    </Button>
</Grid>

In Windows 7 it looks great but in Windows XP I have the following issue:

Any ideas on how to fix the issue? If I make the background transparent then there is no problem with the button but the text gets below the button and looks weird.

Answer 1

Make the Button smaller and/or add a small margin to "downsize" the visible background.

Edit: While looking around a bit (wondering that this hasn't been added as some new Feature) I've found this article with step-by-step instructions you could give a try.