如何在WPF中为TextBox添加“清除”按钮？

Question

如何在WPF中为TextBox添加“清除”按钮？

6

我正在开发一个WPF应用程序的控件，其中我希望在TextBox内放置一个Button。该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>

我跟进了这个问题：如何在WPF中实现带清除按钮的文本框？，其中还链接到了这篇文章：WPF搜索文本框。问题中建议使用的XAML没有起作用，我认为这是因为他们使用的Style，而我无法访问。该文章提供了太多信息，主要讲解了需要交换搜索和删除图标的触发器和依赖属性。因此，我请求帮助找到一个简单的解决方案来实现这一点。谢谢！

编辑：我按照答案的建议进行了跟进，我能够正确地设置按钮样式，但它仍然不会显示在文本框中，如果显示了，文本仍然会在其下面。我包括了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>

图片：

带按钮的搜索框

- Sean Cogan

目前的 XAML 中按钮位于网格中，但你没有任何网格行。你是真的需要将按钮放在文本框中，还是只放在控件中？ - paparazzo

@Blam 如果您查看我对ArsenMkrt答案的评论，您会看到我需要什么，或者至少认为我需要什么。 - Sean Cogan

好的，但我建议您将问题更改为控件中的按钮，如果您不需要它在文本框中。 - paparazzo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arsen Mkrtchyan · Accepted Answer

指定 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和输入的文本。我建议将这些控件放置在网格的不同列中，如下所示。

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