Jak dodać przycisk "Wyczyść" do pola tekstowego w WPF?

Question

Pracuję nad kontrolą dla mojej aplikacji WPF, w której chcę Button wewnątrz TextBox. Button będzie zawierał obraz, który zmienia się po najechaniu kursorem myszy, ale już wiem, jak to zrobić. To, z czym mam problem, to w rzeczywistości Button w TextBox, tak że zajmuje on tylko tyle miejsca, ile jest w obrazie i jest przezroczysty. Poniżej znajduje się markup że próbowałem dotąd:

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> 

Mam następnie wraz z tym pytanie: How to implement a textbox with a clear button in wpf?, co również związane z tym artykułem: WPF Search Text Box. XAML zasugerowany w pytaniu nie zadziałał, co moim zdaniem wynika z tego, że używają one Style, do których nie mam dostępu. Artykuł dostarczył zbyt wiele informacji, głównie o wyzwalaczach i właściwościach zależności wymaganych w celu zamiany wyszukiwania i usuwania ikon na mouseover. Proszę o pomoc w znalezieniu prostego rozwiązania, jak to zrobić. Dziękuję Ci!

EDYCJA: Postąpiłam zgodnie z radą udzielonych odpowiedzi i jestem w stanie prawidłowo ustawić przycisk, ale nie pojawi się on w polu tekstowym, a jeśli tak, tekst nadal jest pod nim . Podaję XAML i obraz tego, co się dzieje:

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> 

Obrazek:

Answer 1

Określ Button szablon, zamiast zawartości

<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> 

EDYCJA

BTW, w twoim przypadku obraz będzie obejmować TextBox i wprowadzony tekst. Polecam umieścić tę kontrolę w różnych kolumnach siatki, jak poniżej:

<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>