如何将“清除”按钮添加到 WPF 中的文本框？

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

提问by Sean Cogan

I'm working on a control for my WPF application in which I want a Buttoninside of a TextBox. The Buttonwill 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 Buttonin the TextBoxso that it only takes up as much space as the image and is transparent. Below is the markup that I've tried so far:

我正在为我的 WPF 应用程序开发一个控件，其中我想要Button一个TextBox. 在Button将包含一个鼠标悬停改变图像，但我已经知道如何做到这一点的一部分。我遇到的问题实际上是将Buttonin包含在内，TextBox以便它只占用与图像一样多的空间并且是透明的。以下是我迄今为止尝试过的标记：

XAML:

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

我一直在关注这个问题：How to implement a textbox with a clear button in wpf? ，这也链接到这篇文章：WPF 搜索文本框。问题中建议的 XAML 不起作用，我认为这是因为Style他们使用了我无权访问的 XAML 。这篇文章提供了太多信息，主要讨论了在鼠标悬停时切换搜索和删除图标所需的触发器和依赖属性。所以，我在寻求帮助，寻找一个简单的解决方案来实现这一目标。谢谢！

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 和正在发生的事情的图片：

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>

Image:

图片：

采纳答案by Arsen Mkrtchyan

Specify Buttontemplate, instead of content

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

EDIT

编辑

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

顺便说一句，在您的情况下，图像将覆盖TextBox并输入文本。我建议将此控件放在网格的不同列中，如下所示

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