版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BYH371256/article/details/83505584
本章讲述：带水印的密码输入框实现
主要功能：带水印效果，控件提示图标，控件文本清除图标；
新建一个WPF项目，然后添加“自定义控件（WPF）”，命名为：“ExTextBox”
资源字典XAML前台样式
<Style TargetType="{x:Type local:ExTextBox}">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="Cursor" Value="IBeam"/>
<Setter Property="Padding" Value="3,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ExTextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding BorderCornerRadius}"
SnapsToDevicePixels="True">
<Grid x:Name="gdpassword">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image x:Name="TipImage" Source="{Binding TipImage, RelativeSource={RelativeSource TemplatedParent}}"
Height="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,2,0,0"
Width="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}"
Visibility="{Binding TipImageHide,RelativeSource={RelativeSource TemplatedParent}}"/>
<Grid Grid.Column="1">
<ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
<TextBlock x:Name="txtRemark" Text="{TemplateBinding WaterRemark}" Foreground="Gray" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}" Visibility="Collapsed"/>
</Grid>
<Image x:Name="OperateImage" Grid.Column="2" Source="{Binding OperateImage, RelativeSource={RelativeSource TemplatedParent}}"
Height="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,2,0,0"
Width="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}" Cursor="Hand"
Visibility="{Binding OperateHide,RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Visibility" Value="Visible" TargetName="txtRemark"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
实现
public class ExTextBox : TextBox //1.首先创建一个类，继承TextBox
{
//2.指定依赖属性的实例重写基类型的元数据
static ExTextBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ExTextBox), new FrameworkPropertyMetadata(typeof(ExTextBox)));
}
Image OperateImageE;
Image TipImageE;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var bord = VisualTreeHelper.GetChild(this, 0) as Border;
Grid gr = bord.FindName("gdpassword") as Grid;
TipImageE = gr.FindName("TipImage") as Image;
OperateImageE = gr.FindName("OperateImage") as Image;
//TipImageE.PreviewMouseLeftButtonUp +=TipImageE_PreviewMouseLeftButtonUp;
OperateImageE.PreviewMouseLeftButtonUp +=OperateImageE_PreviewMouseLeftButtonUp;
}
private void OperateImageE_PreviewMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.Text = "";
}
//3.定义依赖属性
public static DependencyProperty WaterRemarkProperty =
DependencyProperty.Register("WaterRemark", typeof(string), typeof(ExTextBox));
/// <summary>
/// 水印文字
/// </summary>
public string WaterRemark
{
get { return GetValue(WaterRemarkProperty).ToString(); }
set { SetValue(WaterRemarkProperty, value); }
}
public static DependencyProperty BorderCornerRadiusProperty =
DependencyProperty.Register("BorderCornerRadius", typeof(CornerRadius), typeof(ExTextBox));
/// <summary>
/// 边框角度
/// </summary>
public CornerRadius BorderCornerRadius
{
get { return (CornerRadius)GetValue(BorderCornerRadiusProperty); }
set { SetValue(BorderCornerRadiusProperty, value); }
}
public static DependencyProperty IsPasswordBoxProperty =
DependencyProperty.Register("IsPasswordBox", typeof(bool), typeof(ExTextBox), new FrameworkPropertyMetadata(false, new PropertyChangedCallback(OnIsPasswordBoxChnage)));
/// <summary>
/// 是否为密码框
/// </summary>
public bool IsPasswordBox
{
get { return (bool)GetValue(IsPasswordBoxProperty); }
set { SetValue(IsPasswordBoxProperty, value); }
}
public static DependencyProperty PasswordCharProperty =
DependencyProperty.Register("PasswordChar", typeof(char), typeof(ExTextBox), new FrameworkPropertyMetadata('●'));
/// <summary>
/// 替换明文的单个密码字符
/// </summary>
public char PasswordChar
{
get { return (char)GetValue(PasswordCharProperty); }
set { SetValue(PasswordCharProperty, value); }
}
public static DependencyProperty PasswordStrProperty =
DependencyProperty.Register("PasswordStr", typeof(string), typeof(ExTextBox), new FrameworkPropertyMetadata(string.Empty));
/// <summary>
/// 密码字符串
/// </summary>
public string PasswordStr
{
get { return GetValue(PasswordStrProperty).ToString(); }
set { SetValue(PasswordStrProperty, value); }
}
/// <summary>
/// 图标大小
/// </summary>
public double ImageSize
{
get { return (double)GetValue(ImageSizeProperty); }
set { SetValue(ImageSizeProperty, value); }
}
public static readonly DependencyProperty ImageSizeProperty =
DependencyProperty.Register("ImageSize", typeof(double), typeof(ExTextBox),
new FrameworkPropertyMetadata(26.0, FrameworkPropertyMetadataOptions.AffectsRender));
public static readonly DependencyProperty TipImageProperty = DependencyProperty.Register(
"TipImage",
typeof(string),
typeof(ExTextBox),
new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));
/// <summary>
///
/// <summary>
public string TipImage
{
get { return (string)GetValue(TipImageProperty); }
set { SetValue(TipImageProperty, value); }
}
public static readonly DependencyProperty OperateImageProperty = DependencyProperty.Register(
"OperateImage",
typeof(string),
typeof(ExTextBox),
new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));
/// <summary>
///
/// <summary>
public string OperateImage
{
get { return (string)GetValue(OperateImageProperty); }
set { SetValue(OperateImageProperty, value); }
}
public static readonly DependencyProperty TipImageHideProperty = DependencyProperty.Register(
"TipImageHide",
typeof(Visibility),
typeof(ExTextBox),
new FrameworkPropertyMetadata(Visibility.Collapsed));
/// <summary>
///
/// <summary>
public Visibility TipImageHide
{
get { return (Visibility)GetValue(TipImageHideProperty); }
set { SetValue(TipImageHideProperty, value); }
}
public static readonly DependencyProperty OperateHideProperty = DependencyProperty.Register(
"OperateHide",
typeof(Visibility),
typeof(ExTextBox),
new FrameworkPropertyMetadata(Visibility.Collapsed));
/// <summary>
///
/// <summary>
public Visibility OperateHide
{
get { return (Visibility)GetValue(OperateHideProperty); }
set { SetValue(OperateHideProperty, value); }
}
//依赖属性发生改变时候触发
private static void ImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
Application.GetResourceStream(new Uri((string)e.NewValue));
if(e.Property.Name == "TipImage")
{
(sender as ExTextBox).TextBox_Changed(0);
}
if (e.Property.Name == "OperateImage")
{
(sender as ExTextBox).TextBox_Changed(1);
}
}
private void TextBox_Changed(int index)
{
if (index == 0)
TipImageHide = Visibility.Visible;
else
OperateHide = Visibility.Visible;
}
//4.当设置为密码框时，监听TextChange事件，处理Text的变化，这是密码框的核心功能
private static void OnIsPasswordBoxChnage(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as ExTextBox).SetEvent();
}
/// <summary>
/// 定义TextChange事件
/// </summary>
private void SetEvent()
{
if (IsPasswordBox)
this.TextChanged += TextBox_TextChanged;
else
this.TextChanged -= TextBox_TextChanged;
}
//5.在TextChange事件中，处理Text为密码文，并将原字符记录给PasswordStr予以存储
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
if (!IsResponseChange) //响应事件标识，替换字符时，不处理后续逻辑
return;
//Console.WriteLine(string.Format("------{0}------", e.Changes.Count));
foreach (TextChange c in e.Changes)
{
//Console.WriteLine(string.Format("addLength:{0} removeLenth:{1} offSet:{2}", c.AddedLength, c.RemovedLength, c.Offset));
PasswordStr = PasswordStr.Remove(c.Offset, c.RemovedLength); //从密码文中根据本次Change对象的索引和长度删除对应个数的字符
PasswordStr = PasswordStr.Insert(c.Offset, Text.Substring(c.Offset, c.AddedLength)); //将Text新增的部分记录给密码文
lastOffset = c.Offset;
}
//Console.WriteLine(PasswordStr);
/*将文本转换为密码字符*/
IsResponseChange = false; //设置响应标识为不响应
this.Text = ConvertToPasswordChar(Text.Length); //将输入的字符替换为密码字符
IsResponseChange = true; //回复响应标识
this.SelectionStart = lastOffset + 1; //设置光标索引
//Console.WriteLine(string.Format("SelectionStar:{0}", this.SelectionStart));
}
/// <summary>
/// 按照指定的长度生成密码字符
/// </summary>
/// <param name="length"></param>
/// <returns></returns>
private string ConvertToPasswordChar(int length)
{
if (PasswordBuilder != null)
PasswordBuilder.Clear();
else
PasswordBuilder = new StringBuilder();
for (var i = 0; i < length; i++)
PasswordBuilder.Append(PasswordChar);
return PasswordBuilder.ToString();
}
//6.如果用户设置了记住密码，密码文(PasswordStr)一开始就有值的话，别忘了在Load事件里事先替换一次明文
private void ExTextBox_Loaded(object sender, RoutedEventArgs e)
{
if (IsPasswordBox)
{
IsResponseChange = false;
this.Text = ConvertToPasswordChar(PasswordStr.Length);
IsResponseChange = true;
}
}
private bool IsResponseChange = true;
private StringBuilder PasswordBuilder;
private int lastOffset = 0;
}
外部调用示例代码
<StackPanel VerticalAlignment="Center" >
<TextBlock Text="水印密码输入框" FontSize="25" TextAlignment="Center"/>
<local:ExTextBox Height="40" BorderCornerRadius="5" Margin="10,10" Background="White"
IsPasswordBox="False" PasswordStr="{Binding Password}" FontSize="20"/>
<local:ExTextBox Height="40" BorderCornerRadius="5" Margin="10,10" Background="White" WaterRemark="普通水印文本框"
IsPasswordBox="True" PasswordStr="{Binding Password}" FontSize="20"/>
<!--水印文本框-->
<local:ExTextBox Height="40" BorderCornerRadius="5" Margin="10,10" Background="White" WaterRemark="带删除普通水印文本框"
IsPasswordBox="False" PasswordStr="{Binding Password}" FontSize="20"
OperateImage="Pack://application:,,,/ExPasswordBox;component/Images/delete.png"/>
<!--水印密码框-->
<local:ExTextBox Height="40" BorderCornerRadius="5" Margin="10,10" Background="LightBlue" WaterRemark="密码输入框"
BorderBrush="Red" FontSize="20" ImageSize="32"
TipImage="Pack://application:,,,/ExPasswordBox;component/Images/man.png"
OperateImage="Pack://application:,,,/ExPasswordBox;component/Images/delete.png"
/>
</StackPanel>
效果图：
