WPF-23：水印文本框

最新推荐文章于 2024-02-26 15:07:07 发布
最新推荐文章于 2024-02-26 15:07:07 发布
阅读量7.2k 收藏 3
点赞数 3
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yysyangyangyangshan/article/details/9413237
版权

WPF中水印输入框应该是有很多地方使用，它的实现也比较简单。可以有两种方法，一是对TextBox进行控制，用代码实现。二是针对TextBox写一个样式实现。

效果如图，


先看第一种：
继承一个用户控件，上面放一个textbox， 
<UserControl x:Class="TestTextBoxWaterMark.SelfWateMarkTextbox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" >
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <TextBox  Name="textBox1" VerticalAlignment="Stretch"  HorizontalAlignment="Stretch"/>
    </Grid>
</UserControl>
后台， 
    /// <summary>
    /// WateMarkTextbox.xaml 的交互逻辑
    /// </summary>
    public partial class SelfWateMarkTextbox : UserControl
    {
        private const string defaultText = "请输入内容";


        public SelfWateMarkTextbox()
        {
            InitializeComponent();


            this.Loaded += new RoutedEventHandler(WateMarkTextbox_Loaded);


            this.GotFocus += new RoutedEventHandler(WateMarkTextbox_GotFocus);


            this.LostFocus += new RoutedEventHandler(WateMarkTextbox_LostFocus);


            this.textBox1.TextChanged += new TextChangedEventHandler(TextBox1_TextChanged);
        }


        void TextBox1_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(this.textBox1.Text) || this.textBox1.IsFocused)
            {
                this.textBox1.Text = this.textBox1.Text;
            }
            else
            {
                this.textBox1.Text = Watermark;
            }
        }


        void WateMarkTextbox_LostFocus(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(this.textBox1.Text))
            {
                this.textBox1.Text = string.Empty;
            }
        }


        void WateMarkTextbox_GotFocus(object sender, RoutedEventArgs e)
        {
            if (this.textBox1.Text.Equals(Watermark))
            {
                this.textBox1.Text = string.Empty;
            }
        }


        void WateMarkTextbox_Loaded(object sender, RoutedEventArgs e)
        {
            this.textBox1.Text = Watermark;
        }


        public string Watermark
        {
            get
            {
                string result = (string)GetValue(WatermarkProperty);


                if (string.IsNullOrEmpty(result))
                {
                    result = defaultText;
                }


                return result;
            }


            set { SetValue(WatermarkProperty, value); }
        }


        public static readonly DependencyProperty WatermarkProperty =
            DependencyProperty.Register("Watermark", typeof(string), typeof(SelfWateMarkTextbox), new UIPropertyMetadata(defaultText));
    }
效果如上图，第一个所示。
第二种，当然为了方便起见，可以直接使用样式控制：
直接继承TextBox， 
   public class WateMarkTextBox:TextBox
    {
        private TextBlock wateMarkTextBlock;


        private TextBox wateMarkTextBox;


          static WateMarkTextBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(WateMarkTextBox), new FrameworkPropertyMetadata(typeof(WateMarkTextBox)));
        }


          public WateMarkTextBox()
        {
            this.GotFocus += new RoutedEventHandler(WateMarkTextBox_GotFocus);


            this.LostFocus += new RoutedEventHandler(WateMarkTextBox_LostFocus);


            this.TextChanged += new TextChangedEventHandler(WateMarkTextBox_TextChanged);
        }


          void WateMarkTextBox_LostFocus(object sender, RoutedEventArgs e)
          {
              if (this.wateMarkTextBox!=null && !string.IsNullOrWhiteSpace(this.wateMarkTextBox.Text))
              {
                  this.wateMarkTextBlock.Visibility = Visibility.Hidden;
              }
              else
              {
                  this.wateMarkTextBlock.Visibility = Visibility.Visible;
              }
          }


          void WateMarkTextBox_GotFocus(object sender, RoutedEventArgs e)
          {
              this.wateMarkTextBlock.Visibility = Visibility.Hidden;
          }


          void WateMarkTextBox_TextChanged(object sender, TextChangedEventArgs e)
          {
              if (this.wateMarkTextBox != null && !string.IsNullOrWhiteSpace(this.wateMarkTextBox.Text) || !this.IsFocused)
              {
                  this.wateMarkTextBlock.Visibility = Visibility.Hidden;
              }
              else
              {
                  this.wateMarkTextBlock.Visibility = Visibility.Visible;
              }
          }  




        public string WateMark
        {
            get { return (string)GetValue(WateMarkProperty); }


            set { SetValue(WateMarkProperty, value); }
        }


        public static DependencyProperty WateMarkProperty =
            DependencyProperty.Register("WateMark", typeof(string), typeof(WateMarkTextBox), new UIPropertyMetadata("水印"));


        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();


            this.wateMarkTextBlock = this.GetTemplateChild("ChildWateMark") as TextBlock;


            this.wateMarkTextBox = this.GetTemplateChild("ChildTextBox") as TextBox;
        }
    }
样式， 
   <ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:TestTextBoxWaterMark">


    <Style  TargetType="{x:Type local:WateMarkTextBox}">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#AAB5C0"/>
        <Setter Property="Padding" Value="2"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="MinWidth" Value="45"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:WateMarkTextBox}">
                    <Grid Opacity="{TemplateBinding Opacity}" >
                        <Border BorderBrush="{TemplateBinding BorderBrush}"  CornerRadius="5" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="32"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                
                                <TextBox Grid.Column="1" x:Name="ChildTextBox" VerticalContentAlignment="Center"  IsTabStop="True" Margin="2" 
                                         Padding="{TemplateBinding Padding}" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}"/>


                                <TextBlock x:Name="ChildWateMark" VerticalAlignment="Center" Foreground="LightGray" Text="{TemplateBinding WateMark}" Grid.Column="1"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
效果如上图第二个所示。

 上面的样式还有更好的实现，参考了网上一个比较好的样式实现，如下

   public class PerfectWateMarkTextBox : TextBox
    {
        private Label wateMarkLable;

        private ScrollViewer wateMarkScrollViewer;

        static PerfectWateMarkTextBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(PerfectWateMarkTextBox), new FrameworkPropertyMetadata(typeof(PerfectWateMarkTextBox)));
        }

        public PerfectWateMarkTextBox()
        {
            this.Loaded += new RoutedEventHandler(PerfectWateMarkTextBox_Loaded);
        }

        void PerfectWateMarkTextBox_LostFocus(object sender, RoutedEventArgs e)
        {
            
        }

        void PerfectWateMarkTextBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.wateMarkLable.Content = WateMark;
        }

        void PerfectWateMarkTextBox_GotFocus(object sender, RoutedEventArgs e)
        {
            this.wateMarkLable.Visibility = Visibility.Hidden;
        }

        public string WateMark
        {
            get { return (string)GetValue(WateMarkProperty); }

            set { SetValue(WateMarkProperty, value); }
        }

        public static DependencyProperty WateMarkProperty =
            DependencyProperty.Register("WateMark", typeof(string), typeof(PerfectWateMarkTextBox), new UIPropertyMetadata("水印"));

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.wateMarkLable = this.GetTemplateChild("TextPrompt") as Label;

            this.wateMarkScrollViewer = this.GetTemplateChild("PART_ContentHost") as ScrollViewer;
        }
    }

对应的样式， 

   <Style TargetType="{x:Type local:PerfectWateMarkTextBox}">
        <Style.Resources>
            <SolidColorBrush x:Key="WatermaskTextBoxWatermaskForeground" Color="#FF707070" />
        </Style.Resources>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="MinWidth" Value="120"/>
        <Setter Property="MinHeight" Value="20"/>
        <Setter Property="AllowDrop" Value="True"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="Background" Value="#FFFFFFFF"/>
        <Setter Property="BorderBrush" Value="#FF707070"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:PerfectWateMarkTextBox}">
                    <Border x:Name="Border" CornerRadius="2" Padding="2" Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" >
                        <Grid>
                            <Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Focusable="False"  
                                   Foreground="{DynamicResource WatermaskTextBoxWatermaskForeground}" Height="{TemplateBinding Height}"
                                   Visibility="Collapsed" Padding="5,0,0,0" VerticalContentAlignment="Center" Margin="2,0,0,0"/>
                            <ScrollViewer Margin="0" x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="Border" Value="{DynamicResource TextBoxFocusBorderBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="{DynamicResource TextBoxDisabledBackground}"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}"/>
                            <Setter Property="Foreground" Value="{DynamicResource TextBoxDisabledForeground}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsFocused" Value="False"/>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="Text" Value=""/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsFocused" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Border" 
                                    Value="{DynamicResource TextBoxMouseOverBorderBrush}"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
如上图中，第三个的实现。

详细代码下载：http://download.csdn.net/detail/yysyangyangyangshan/5797465

包括样式实现2的代码下载：http://download.csdn.net/detail/yysyangyangyangshan/5800519

杨友山
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在WPF窗口中增加水印效果
liusarzn的博客
12-13 1654
*
gong-wpf-dragdrop：GongSolutions.WPF.DragDrop库是WPF的拖放框架
02-04
GongSolutions.WPF.DragDrop 一种易于使用的WPF拖放框架。 支持.NET Framework 4.5+和.NET Core 3（3.0和3.1） 产品特点 与MVVM一起使用：拖放的逻辑可以放在ViewModel中。 无需在代码背后放置任何代码，而是将...
wpf MessageBox 消息框
清风ai明月的专栏
02-28 5179
MessageBox 类 显示消息框。 MessageBoxButton 枚举 指定在消息框显示的按钮。 作为MessageBox.Show 方法的参数 OK 该消息框显示 确定 按钮。 OKCancel 该消息框显示 确定 和 取消 按钮。 YesNo 该消息框显示 是 和 否 按钮。 YesNoCancel 该消息框显示 是, ，否, ，和 取消 按钮。
WPF水印，旋转，颜色透明度，轮流显示不同文字
最新发布
weixin_55623158的博客
02-26 342
wpf文字水印
C#WPF实现TextBox控件水印效果的两种实现方法
weixin_44239774的博客
05-25 2609
C#WPF实现TextBox控件水印效果的两种实现方法 在WPF实际项目中往往需要在TextBox中加入水印，来告诉使用者输入TextBox中的内容，如下图片所示： 下面介绍两种方式，来添加上图中的水印效果： 第一种方法：也是最简单的一种，使用第三方的组件库HandyControl来实现， 首先在Nuget中查找HandyControl，并安装，如图： 随后在WPF前端Xaml中引用这个库： xmlns:hc="https://handyorg.github.io/handycontrol" 随后在Ap
WPF 自定义消息框
weixin_34194317的博客
02-10 736
说明：做一个简单的消息框，能够根据自定义显示图片和按钮。 步骤： 1.其实消息框就是一个Window,首先设置窗体的显示位置，显示大小，要让它看着有消息框的样子。这个很容易，代码如下: Height="206" Width="420" WindowStartupLocation="CenterScreen" BorderThickness="1,0,1,1" ShowIcon="Fals...
WPF-Diagram-Designer:WPF图表设计器源代码
03-24
WPF-Diagram-Designer:WPF图表设计器源代码
WPF-Depot:WPF
03-22
WPF演示
wpf-docs:Syncfusion WPF控件文档
04-12
Syncfusion WPF文档 这是Syncfusion WPF组件技术产品文档的GitHub存储库。 本文档已发布到 捐款欢迎！ 我们欢迎有关改进WPF组件用户指南文档的。 您对此的贡献将不胜感激。
wpf-bootstrap:WPF 引导程序
06-17
WPF 引导程序通过 使用此 WPF Bootstrap 启动带有 Telerik 控件的 WPF PRISM 应用程序。 它为 WPF PRISM 应用程序创建一个项目结构，然后继续与 Telerik WPF UI 控件集成，以提供一个停靠和选项卡丰富的用户界面，...
WPF实现水印文本框
07-22
WPF实现水印文本框，文章： http://blog.csdn.net/yysyangyangyangshan/article/details/9413237
Wpf输入框水印提示效果
08-01
Wpf输入框水印提示效果 就是输入的提示信息 输入的时候 隐藏提示信息
WPF水印（2）
07-23
文章：http://blog.csdn.net/yysyangyangyangshan/article/details/9413237 针对资源：http://download.csdn.net/detail/yysyangyangyangshan/5797465，增加了另一个样式的实现。
wpf带文字水印背景输入框优美登录界面
12-17
wpf带文字水印背景输入框优美登录界面。使用C# wpf写的无边框，可随意拖动的登录界面。账号密码输入框添加有背景文字水印。支持缩小和退出。
WPF控件添加水印
qq_36350266的博客
08-08 1034
WPF控件添加水印 方法一 使用自定义控件和附加属性制作水印效果 附加属性 #region WatermarkProperty 水印 /// <summary> /// 水印 /// </summary> public static readonly DependencyProperty WatermarkProperty = DependencyProperty.RegisterAttached(
WPF 通过TextBox实现一个带水印和图标的输入框
weixin_43259472的博客
09-02 1575
WPF 通过TextBox实现一个带水印和图标的输入框
WPF 标签化文本框控件
硬核小青年的博客
08-17 234
原项目 笔者借鉴了CSDN中文章标签的样式，对原项目进行调整，修改后的效果如下： CSDN文章标签 修改之后 参考文献： 标签化文本框控件 项目实例-Github
WPF教程（十四）文本框
刺猬的优雅
10-13 7833
文本框本质上并不是一个控件，因为它不继承于控件类，然而在WPF中它使用情况和其他控件几乎一样，因此我们仍称它为控件。 文本框控件是WPF中最基础的控件之一，非常实用。它将文字显示到屏幕上，和标签控件一样，但是比标签更简单，占资源更少。普遍的共识是标签用于简短的单行文本（包括图片），而文本框多用于多行文本。标签和文本框各有优点，根据具体情况来使用。 在"Hello, WPF!"一章中，我们已经使
c#笔记--WPF文本框和密码框添加水印效果(背景文字提示)
06-02
例如，以下代码演示了在WPF中如何使用Placeholder属性来实现文本框的水印效果： ```xml 请输入文本"> ``` 同样地，我们可以在密码框中使用Placeholder属性来实现密码框的水印效果： ```xml 请输入密码"> ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值