如何在WPF中实现带有清除按钮的文本框？

Question

我有以下的。它是一个带有的：

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

在Windows 7中看起来很棒，但在Windows XP中我遇到了以下问题：

如果我将背景设为透明，则按钮没有问题，但文字会出现在按钮下方，看起来很奇怪。有没有解决这个问题的想法？

- Ignacio Soler Garcia

Answer 1

使按钮变小和/或添加一小段边距来“缩小”可见背景。

编辑：在四处寻找时（想知道为什么没有将其作为新功能添加），我发现了这篇文章，其中包含逐步说明，您可以尝试。

- Mario

---

如果我这样做，那么在W7上，按钮会比文本框小，当你悬停/点击它时，它看起来也很丑:( - Ignacio Soler Garcia

请尝试我链接的博客文章。 - Mario

Answer 2

试一下。

<TextBox x:Name="SearchFilter" VerticalAlignment="Center" Width="200"  
                                 Text="{Binding SearchItemString}" />
<Button Margin="-20,10,5,0" Width="25" Height="25" Content="X" 
                        Style="{StaticResource TransparentStyle}" />

这里是样式。

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Result:

- cnuis2cool

---

相当快速而简单...谢谢。您甚至可以将TextBox的右填充设置为按钮宽度的数量，以便您的文本不会出现在按钮下面。 - Smitty-Werben-Jager-Manjenson

Answer 3

我认为您在这里应该使用ControlTemplates，例如您可以参考搜索文本框控件和这里您可以找到文本框模板。

- Rustem