Как добавить кнопку "Очистить" в текстовое поле в WPF?

Я работаю над элементом управления для моего приложения WPF, в котором я хочу Button внутри TextBox. The Button будет содержать изображение, которое изменяется при наведении мыши, но я уже знаю, как это сделать. То, с чем у меня проблемы, на самом деле включает Button на TextBox Так что он занимает столько же места, сколько изображение, и является прозрачным. Ниже приведена разметка, которую я пробовал до сих пор:

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>

я следовал вместе с этим вопрос: как реализовать текстовое поле с кнопкой clear в wpf?, который также связан с этой статьи: текстовое поле поиска WPF. XAML, предложенный в вопросе, не работал, что, я думаю, связано с Style они используют, к которым у меня нет доступа. В статье содержалось слишком много информации, в основном о триггерах и свойствах зависимостей, необходимых для замены поиска и удаления значков при наведении мыши. Итак, я прошу помочь найти простое решение о том, как это произошло. Спасибо!

EDIT: я последовал совету ответов, и я могу правильно стилизовать кнопку, но она не будет отображаться в текстовом поле, и если это произойдет, текст все равно будет работать под ним. Я включил XAML и изображение того, что происходит:

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>

изображение:

Searchbox w/ Button

6
button c# styles wpf

1 ответов

указать Button шаблон, а не содержание

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

редактировать

кстати, в вашем случае изображение будет охватывать TextBox и введенный текст. Я бы рекомендовал поместить эти элементы управления в разные столбцы сетки, такие как 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>
5