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

Posted

技术标签:

【中文标题】如何在 wpf 中实现带有清除按钮的文本框?【英文标题】:How to implement a textbox with a clear button in wpf? 【发布时间】:2012-11-17 10:58:18 【问题描述】:

我有以下UserControl。这是一个TextBox 和一个Button

<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 中出现以下问题:

关于如何解决此问题的任何想法?如果我使背景透明,那么按钮就没有问题,但是文本会在按钮下方并且看起来很奇怪。

【问题讨论】:

【参考方案1】:

缩小Button 和/或添加一个小边距以“缩小”可见背景。

编辑:环顾四周(想知道这还没有作为一些新功能添加)我发现this article with step-by-step instructions you could give a try。

【讨论】:

如果我这样做了,那么在 W7 上,按钮比文本框小,当你悬停/点击它时,它看起来也很丑:( 试试我链接的博文。【参考方案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>

结果:

【讨论】:

相当快速和肮脏......谢谢。您甚至可以在 TextBox 中添加与按钮宽度相等的右边距,这样您的文本就不会出现在按钮下方。【参考方案3】:

我认为你应该在这里使用ControlTemplates,例如你可以看到Search Text Box Control 和here你可以找到文本框模板

【讨论】:

以上是关于如何在 wpf 中实现带有清除按钮的文本框?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WPF 中实现“查找下一个”功能?

如何在 MFC 的功能区文本框中实现数据验证

如何在 Access 2007 的窗体中实现点击按钮打开另一个窗体???

如何在单击按钮时复制和添加现有的网格元素(C#WPF)

如何在兼容模式下从 IE10 文本框中删除清除按钮(“X”按钮)?

如何禁用 IE10 插入文本框的清除按钮?