C# WPF 文本框和密码框实现placehode水印效果

最新推荐文章于 2024-08-04 03:04:44 发布
最新推荐文章于 2024-08-04 03:04:44 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： c# WPF
c# 同时被 2 个专栏收录
26 篇文章 1 订阅
订阅专栏
WPF
7 篇文章 0 订阅
订阅专栏

主要功能皆为参考他人代码，在这里做封装汇总，没想到html上面一个placehode就能实现的功能，在wpf上要几百行代码才能实现……

1.准备两个样式文件

PasswordBoxStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:Core="clr-namespace:WpfApp1.Core">
<Style TargetType="PasswordBox">
    <Setter Property="Foreground" Value="#000000"/>
    <Setter Property="FontSize" Value="16"/>
    <!--光标的颜色-->
    <Setter Property="CaretBrush" Value="Green"/>
    <Setter Property="Core:PasswordBoxWaterMark.IsMonitoring" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type PasswordBox}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <Grid>
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        <TextBlock x:Name="WaterMark" Focusable="False" Visibility="Collapsed" Padding="7" Text="{TemplateBinding Tag}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Core:PasswordBoxWaterMark.PasswordLength" Value="0">
                        <Setter TargetName="WaterMark" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TextBoxStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:Convert="clr-namespace:WpfApp1.Converters"
                xmlns:Core="clr-namespace:WpfApp1.Core"
                xmlns:input="clr-namespace:System.Windows.Input;assembly=PresentationCore">
<Style x:Key="TxbBase" TargetType="TextBox">
    <Setter Property="Foreground" Value="#000000"/>
    <Setter Property="FontSize" Value="14"/>
    <!--光标的颜色-->
    <Setter Property="CaretBrush" Value="Green"/>
    <!--屏蔽系统右键菜单-->
    <Setter Property="ContextMenu">
        <Setter.Value>
            <ContextMenu Visibility="Collapsed"/>
        </Setter.Value>
    </Setter>
    <!--用来禁用掉中文输入法-->
    <!--<Setter Property="input:InputMethod.IsInputMethodEnabled" Value="False"/>-->
</Style>
<Convert:TextToVisibility x:Key="TextToVisibility"/>
<!--触发器的形式进行水印效果-->
<Style x:Key="TxbTrigger" TargetType="TextBox" BasedOn="{StaticResource TxbBase}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <Grid>
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        <TextBlock Padding="7" x:Name="WaterMark" Focusable="False" Visibility="Collapsed" Text="{TemplateBinding Tag}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                    </Trigger>
                    <Trigger Property="Text" Value="">
                        <Setter Property="Visibility" TargetName="WaterMark" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!--绑定和转换器的形式进行水印效果-->
<Style x:Key="TxbBing" TargetType="TextBox" BasedOn="{StaticResource TxbBase}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <Grid>
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        <TextBlock x:Name="WaterMark" Focusable="False" Visibility="{TemplateBinding Text,Converter={StaticResource TextToVisibility}}" Padding="7" Text="{TemplateBinding Tag}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

注意修改xaml文件的头中的命名空间为自己项目的命名控件

做两个工具类，用于转化水印与正文

TextToVisibility.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Data;

namespace WpfApp1.Converters
{
    /// <summary>
    /// 文本内容转换水印的可见性
    /// </summary>
    public class TextToVisibility : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //转换后的结果
            Visibility visible = Visibility.Visible;
            if (value != null)
            {
                string text = value.ToString();
                if (!string.IsNullOrEmpty(text.Trim()))
                {
                    int length = text.Length;
                    if (length > 0)
                    {
                        visible = Visibility.Collapsed;
                    }
                }
            }
            return visible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return string.Empty;
        }
    }
}
PasswordBoxWaterMark.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace WpfApp1.Core
{
    /// <summary>
    /// PasswordBox添加水印辅助类
    /// </summary>
    public class PasswordBoxWaterMark : DependencyObject
    {
        public static bool GetIsMonitoring(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsMonitoringProperty);
        }

        public static void SetIsMonitoring(DependencyObject obj, bool value)
        {
            obj.SetValue(IsMonitoringProperty, value);
        }

        public static readonly DependencyProperty IsMonitoringProperty =
            DependencyProperty.RegisterAttached("IsMonitoring", typeof(bool), typeof(PasswordBoxWaterMark), new UIPropertyMetadata(false, OnIsMonitoringChanged));



        public static int GetPasswordLength(DependencyObject obj)
        {
            return (int)obj.GetValue(PasswordLengthProperty);
        }

        public static void SetPasswordLength(DependencyObject obj, int value)
        {
            obj.SetValue(PasswordLengthProperty, value);
        }

        public static readonly DependencyProperty PasswordLengthProperty =
            DependencyProperty.RegisterAttached("PasswordLength", typeof(int), typeof(PasswordBoxWaterMark), new UIPropertyMetadata(0));

        private static void OnIsMonitoringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var pb = d as PasswordBox;
            if (pb == null)
            {
                return;
            }
            if ((bool)e.NewValue)
            {
                pb.PasswordChanged += PasswordChanged;
            }
            else
            {
                pb.PasswordChanged -= PasswordChanged;
            }
        }

        private static void PasswordChanged(object sender, RoutedEventArgs e)
        {
            var pb = sender as PasswordBox;
            if (pb == null)
            {
                return;
            }
            SetPasswordLength(pb, pb.Password.Length);
        }
    }
}

同样注意修改命名空间

3.在App.xaml中引用样式文件

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Css/TextBoxStyle.xaml"/>
            <ResourceDictionary Source="/Css/PasswordBoxStyle.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

4.在控件中引入样式

TextBox文本框
<TextBox  Style="{StaticResource TxbTrigger}"  Tag="请输入用户名" />
PasswordBox密码框
<PasswordBox Tag="请输入密码" />

实现功能
demo下载地址（引用）
http://files.cnblogs.com/files/OhMonkey/Demo.zip

引用
https://www.cnblogs.com/OhMonkey/p/6057076.html

黑鸦log
关注
专栏目录
WPF文本框拖入
11-17
WPF的textbox处理方式与其他的不同。 具体见原文 http://www.codeproject.com/Articles/42696/Textbox-Drag-Drop-in-WPF.aspx?fid=1549895&df=90&mpp=25&sort=Position&view=Normal&spc=Relaxed 我只是代码搬运工...
WPF 带水印的密码输入框实现
weixin_30919919的博客
04-10 157
WPF 带水印的密码输入框实现 原文:WPF 带水印的密码输入框实现 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BYH371256/article/details/83505584 ...
WPF-TextBox与PasswordBox个性样式
最新发布
weixin_30546201的博客
08-04 64
TextBox样式（放到<Window.Resources/>里）：登录后复制 <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/> <SolidColorBrush x:Key="TextBox.MouseOv...
WPF文本框实现placeholder输入提示的两种方法
Documentlv的博客
04-21 3433
在WPF中，我们可以使用Watermark来实现文本框的placeholder效果。Watermark是一种帮助用户更好地理解文本框的提示信息，同时不会对用户的输入造成干扰的一种视觉效果。其中，"请输入文本"是我们要显示的placeholder文本，WatermarkService是我们自定义的一个附加属性类，用来实现Watermark效果。以上是两种实现方式的代码，你可以根据你的实际需求选择其中一种。希望本文对你有所帮助！我们也可以通过Style来实现文本框的placeholder效果。
wpf blend 导出的TextBox模板
dxm809的博客
08-02 228
<Window x:Class="WpfApp03.TestWin11" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" x.
wpf 修改输入框 光标_wpf下用webkitdotnet，页面中的输入框不显示光标（插入符号caret）。...
weixin_34260787的博客
12-24 358
1 //==================== 自绘光标开始 =======================2 //自绘光标说明：3 //以下语句请放到body末尾，确保html元素加载完后执行。4 //测试中光标颜色为红色，请把下面的red改为black。5 //搜索框中，font-size需指定，单位px。空则默认为12px。6 //搜索框需要限定字符数，若字符数超过宽度且显示不全时，则光标...
WPF TextBox水印效果制作方法详解
08-29
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中创建TextBox的水印效果。水印效果通常用于在TextBox控件中显示提示信息，当用户未输入任何内容时，这些提示信息会淡入背景，给用户提供...
WPF 文本框提示信息
12-20
WPF中，可以使用Trigger和DataTrigger来改变文本框的背景色和前景色，模拟占位符的效果。当文本框获得焦点或有内容时，颜色会变回正常，使占位符文本不可见。 4. **Validation（验证）** WPF的验证机制允许开发者...
C# 带水印 带提示信息 的文本框 Textbox
12-28
本篇将深入探讨如何在C#中实现带水印和提示信息的文本框。 首先，我们需要了解Windows Forms或WPF这两个C#开发桌面应用的主要框架。在Windows Forms中，我们可以自定义TextBox控件，而在WPF中，我们可以通过样式和...
C# 自定义组件 水印文本框
12-02
WPF提供了数据绑定和样式模板，这使得实现水印效果更加灵活。我们可以在模板中定义一个透明度渐变的TextBlock，然后根据文本框是否为空和是否有焦点来调整其可见性。 3. **核心知识点**： - **继承控件**：理解C#...
[c#] 给TextBox和PasswordBox添加水印提示文字
LumenWang
07-23 2522
https://www.cnblogs.com/BeiJing-Net-DaiDai/p/4191793.html 对于TextBox方便一些 把Style设置好，然后用TextBox控件就可以了 PasswordBox 在项目中创建一个Monitor类（最好放到Tools包里） 在xaml文件中引入命名空间(就是local空间) 设置Style，这里需要对项目进行编译，否则无法找到...
WPF 给文本框TextBlock以及密码框PassWord加背景水印实现用户登录提示
qq_41860461的博客
12-18 1650
WPF 给文本框TextBlock以及密码框PassWord加背景水印实现用户登录提示 最近在学WPF写一个登录界面，遇到了一个给文本框和密码框加水印的问题，部分解决方案与网上的有所不同。直接来效果： 文本框TextBlock加水印 这个方案是直接参考网上好心网友的，大致思路就是通过VisualBrush创建一个带有提示语的背景Background，判断TextBlock的内容是否为空进而设置背景是否显示。 代码如下： <!--用户名背景水印提示--> <VisualBru
WindowsPhone自定义控件详解（三） - 实战：自定义带水印的PasswordBox控件，WatermarkedPasswordBox
mr_raptor的专栏
02-13 6137
++++++++++++++++++++++++++++++++++++++++++ 本文系本站原创,欢迎转载! 转载请注明出处: http://blog.csdn.net/mr_raptor/article/details/7251992 ++++++++++++++++++++++++++++++++++++++++++   声明：这个控件是在WatermarkedTextBox的基
TextBox文本框与PasswordBox密码框水印
weixin_49756484的博客
11-29 621
TextBox文本框与PasswordBox密码框水印，看这遍就够了
创建WatermarkTextBox和WatermarkPasswordBox（带水印的文本框）
草莽的专栏
09-05 6023
使文本框带有文字提示是一个非常有用特性，不但让界面变得整洁，而且代码也简洁了不少。Windows登录时，输入用户名和密码的文本框和密码框就有这个功能。在WPF里面创建这样的文本框和密码框非常简单，下面就一步一步介绍如何实现这个功能。 首先创建一个WatermarkTextBox类从TextBox派生。然后添加两个依赖属性： Watermark：该属性类型为String，用于设置要显示在文本框里
WPF TextBox实现placeholder
琅嬛福地
11-20 1027
实现技巧是在 TextBox 控件的 Style 中使用触发器（Triggers）来显示和隐藏placeholder文本。需要注意的是，文本的上下边距，如果有蓝湖设计图写起来会很容易，比如上面代码中，使用Margin调整上边距。经过这样调整后placeholder的内容才比能竖直居中显示。TextBlock的Margin属性。
WPF PasswordBox样式(占位符，清除按钮 )
OneOnce的专栏
08-15 4849
有些部分是从别人那拿过来的。 效果： Style: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
关于WPF PasswordBox 增加提示文案，请输入密码，亲测最快方案,改最少的代码！！！
鸣的博客
06-21 1220
关于WPF PasswordBox 增加提示文案，请输入密码，亲测最快方案,不需要像其他方案改任何PasswordBox的样式，直接加个texbox控件显示隐藏即可1.xaml，注意关键代码，样式之类可以不管 2.xaml.cs
c#笔记--WPF文本框和密码框添加水印效果(背景文字提示)
06-02
在WPF中，我们可以使用控件的属性来实现文本框和密码框的水印效果（也称为背景文字提示）。下面是实现该效果的一些方法： 方法一：使用控件的Placeholder属性 WPF的文本框和密码框控件都有一个名为Placeholder的属性，该属性可以用来显示文本框或密码框中的默认提示文本。当用户在文本框或密码框中输入内容后，该提示文本就会自动隐藏。 例如，以下代码演示了在WPF中如何使用Placeholder属性来实现文本框的水印效果： ```xml <TextBox Placeholder="请输入文本"></TextBox> ``` 同样地，我们可以在密码框中使用Placeholder属性来实现密码框的水印效果： ```xml <PasswordBox Placeholder="请输入密码"></PasswordBox> ``` 方法二：使用控件的Adorner WPF中的Adorner是一种用于在控件上添加装饰元素的机制。我们可以使用Adorner来实现文本框和密码框的水印效果。 以下是实现该效果的一般步骤： 1.定义一个自定义控件，例如WatermarkTextBox。 2.在WatermarkTextBox中定义一个名为Watermark的依赖属性。该属性表示水印提示文本。 3.重写WatermarkTextBox的OnRender方法，使其在控件上绘制水印提示文本。 4.在WatermarkTextBox的TextChanged事件中判断文本框中是否有内容，如果有则隐藏水印提示文本，否则显示水印提示文本。 以下是WatermarkTextBox的示例代码： ```csharp public class WatermarkTextBox : TextBox { public static readonly DependencyProperty WatermarkProperty = DependencyProperty.Register( "Watermark", typeof(string), typeof(WatermarkTextBox), new PropertyMetadata(default(string))); public string Watermark { get { return (string)GetValue(WatermarkProperty); } set { SetValue(WatermarkProperty, value); } } protected override void OnRender(DrawingContext drawingContext) { base.OnRender(drawingContext); if (string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(Watermark)) { var formattedText = new FormattedText( Watermark, CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(FontFamily, FontStyle, FontWeight, FontStretch), FontSize, Foreground); drawingContext.DrawText(formattedText, new Point(2, 2)); } } protected override void OnTextChanged(TextChangedEventArgs e) { base.OnTextChanged(e); if (string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(Watermark)) { InvalidateVisual(); } } } ``` 使用WatermarkTextBox时，只需要在XAML中设置Watermark属性即可： ```xml <local:WatermarkTextBox Watermark="请输入文本"></local:WatermarkTextBox> ``` 同样地，我们也可以定义一个WatermarkPasswordBox类来实现密码框的水印效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值