如何优雅的为文本框添加清除按钮

如何优雅的为文本框添加清除按钮

ElementHelper

作 者：WPFDevelopersOrg - 驚鏵

原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers

码云链接[2]：https://gitee.com/WPFDevelopersOrg/WPFDevelopers

框架支持.NET4 至 .NET8；Visual Studio 2022;如何优雅的为文本框添加清除按钮？

答：一般情况都会选择自定义控件，这样的话不清真，所以我们通过附加属性，可以让你的文本框变得更简洁。

新建一个 ElementHelper 辅助类

附加属性定义：

代码语言：javascript复制 public static readonly DependencyProperty IsClearProperty =

DependencyProperty.RegisterAttached("IsClear", typeof(bool), typeof(ElementHelper),

new PropertyMetadata(false, OnIsClearChanged));

定义IsClearProperty 附加属性默认是 false。

附加属性变更处理：

代码语言：javascript复制 private static void OnIsClearChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

var button = d as Button;

if (button != null)

{

if ((bool)e.NewValue)

button.Click += ButtonClear_Click;

else

button.Click -= ButtonClear_Click;

}

}

OnIsClearChanged 当 IsClear 属性的值发生变化，调用这个方法。

当 IsClear 属性的值为 true，则监听按钮的 Click 事件；如果为 false，移除监听事件。

按钮点击事件处理：

代码语言：javascript复制private static void ButtonClear_Click(object sender, RoutedEventArgs e)

{

if (sender is Button button)

{

if (button.TemplatedParent is TextBox textBox)

{

textBox.Clear();

}

}

}

当按钮被点击时，它检查按钮的模板父级是否是一个 TextBox 。

如果是，则调用 Clear() 方法来清除文本框的内容。

1）ElementHelper.cs 代码如下：

代码语言：javascript复制public class ElementHelper : DependencyObject

{

public static readonly DependencyProperty IsClearProperty =

DependencyProperty.RegisterAttached("IsClear", typeof(bool), typeof(ElementHelper),

new PropertyMetadata(false, OnIsClearChanged));

public static void SetIsClear(UIElement element, bool value)

{

element.SetValue(IsClearProperty, value);

}

public static bool GetIsClear(UIElement element)

{

return (bool)element.GetValue(IsClearProperty);

}

private static void OnIsClearChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

var button = d as Button;

if (button != null)

{

if ((bool)e.NewValue)

button.Click += ButtonClear_Click;

else

button.Click -= ButtonClear_Click;

}

}

private static void ButtonClear_Click(object sender, RoutedEventArgs e)

{

if (sender is Button button)

{

if (button.TemplatedParent is TextBox textBox)

{

textBox.Clear();

}

}

}

}

2）TextBoxStyle.xaml 代码如下：

附件属性 helpers:ElementHelper.IsClear 值为 True 并 Text 值为 {x:Null} 则显示清除按钮。

附件属性 helpers:ElementHelper.IsClear 值为 True 并 Text 值为空字符串 ""则显示清除按钮。

代码语言：javascript复制

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:controls="clr-namespace:WPFDevelopers.Controls"

xmlns:helpers="clr-namespace:WPFDevelopers.Helpers"

xmlns:resx="clr-namespace:WPFDevelopers">

x:Key="WD.DefaultTextBox"

BasedOn="{StaticResource WD.ControlBasicStyle}"

TargetType="{x:Type TextBox}">

Name="PART_Border"

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{Binding Path=(helpers:ElementHelper.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}">

x:Name="PART_Watermark"

Margin="{TemplateBinding Padding}"

Padding="1,0"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

FontSize="{StaticResource WD.NormalFontSize}"

Foreground="{DynamicResource WD.RegularTextSolidColorBrush}"

Text="{Binding Path=(helpers:ElementHelper.Watermark), RelativeSource={RelativeSource TemplatedParent}}"

Visibility="Collapsed" />

x:Name="PART_CloseButton"

Width="20"

Height="20"

Margin="0,0,4,0"

HorizontalAlignment="Right"

helpers:ElementHelper.IsClear="{Binding Path=(helpers:ElementHelper.IsClear), RelativeSource={RelativeSource TemplatedParent}}"

helpers:ElementHelper.IsRound="True"

Style="{StaticResource WD.NormalButton}"

ToolTip="{Binding [Clear], Source={x:Static resx:LanguageManager.Instance}}"

Visibility="Collapsed">

Width="10"

Height="10"

Foreground="{DynamicResource WD.SecondaryTextSolidColorBrush}"

Kind="WindowClose" />