美文网首页
WPF如何在TextBox上显示类似水印的提示占位符效果

WPF如何在TextBox上显示类似水印的提示占位符效果

作者: 达哥傻乐 | 来源:发表于2024-12-12 11:03 被阅读0次

在WPF中需要显示水印的效果,有时候需要显示在TextBox上显示类似水印的灰色提示文本占位符效果来作为提醒信息类似如下效果:


图1. 水印显示的效果

要实现这样的效果有很多办法,这里介绍一个最简单的,就是在TextBox上叠加一个TextBlock来实现这个功能,这里对比显示完全的实现过程:

  1. 原始的没有占位符效果的代码如下:
<StackPanel Orientation="Horizontal">
    <Label Content="Print Ran_ge:"/>
    <TextBox Text="{Binding PrintRange, UpdateSourceTrigger=PropertyChanged}" MinWidth="300" VerticalContentAlignment="Center" ToolTip="Serial number in format: 1,3-5,8" />
</StackPanel>
  1. 是轻松实现两个控件叠加的效果,Grid是最简单直接的,要显示在上面的注意放在Grid里的后面部分,越前面越在底层,这里TextBlock在TextBox的后面,所以它显示在TextBox的上面,就出现了如上图1的效果:
<StackPanel Orientation="Horizontal" >
    <Label Content="Print Ran_ge:"/>
    <Grid>
        <TextBox Text="{Binding PrintRange, UpdateSourceTrigger=PropertyChanged}" MinWidth="300" VerticalContentAlignment="Center" ToolTip="Serial number in format: 1,3-5,8" />
        <TextBlock Text="Serial number in format: 1,3-5,8" Visibility="{Binding ShowPrintRangeWaterMark}" VerticalAlignment="Center" Foreground="Gray" Padding="5,0" IsHitTestVisible="False"/>
    </Grid>
</StackPanel>

上面代码两个要点:
a. <TextBox Text="{Binding PrintRange, UpdateSourceTrigger=PropertyChanged}",这个让属性改变的触发实时发生,而不是在TextBox失去焦点才发生。
b. <TextBlock Text="Serial number in format: 1,3-5,8" Visibility="{Binding ShowPrintRangeWaterMark}" VerticalAlignment="Center" Foreground="Gray" Padding="5,0" IsHitTestVisible="False"/>,加粗部分让TextBlock不响应任何点击或者输入事件,它悬浮在那里,但它不影响下面的TextBox的键盘鼠标的操作。

  1. 功能的实现,功能的实现我们是通过两个控件绑定的两个属性来实现的,一个是TextBox的Text属性,它绑定了其视图模型的PrintRange属性,一个是TextBlock的Visibility属性,它绑定了其视图模型的ShowPrintRangeWaterMark属性。
    代码很简单,打开视图模型的类,添加两个上面提到的属性:
        private string _printRange;
        public string PrintRange
        {
            get => _printRange;
            set
            {
                _printRange = value;
                OnPropertyChanged(nameof(PrintRange));
                OnPropertyChanged(nameof(ShowPrintRangeWaterMark));
            }
        }

        public Visibility ShowPrintRangeWaterMark => string.IsNullOrEmpty(_printRange) ? Visibility.Visible : Visibility.Collapsed;

需要注意的是,这个视图模型一定要实现INotifyPropertyChanged接口,就是要这些代码:

   public class MyViewModel : INotifyPropertyChanged
   {
       public event PropertyChangedEventHandler PropertyChanged;
       protected virtual void OnPropertyChanged(string propertyName)
       {
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
       }

相关文章

  • Glide占位符添加loading效果😉😉😉

    最近项目中有个需求,加载网络图片时,图片未显示出来时,显示占位符,占位符为一个圆弧不停旋转效果,图片加载完成后,占...

  • 强大的CSS:placeholder-shown伪类实现Mate

    一、Material Design规范中占位符交互效果 Material Design风格占位符交互效果官方示意见...

  • 美图秀秀如何给照片做水印

    核心提示:给照片留个记号,如何在照片上做水印呢? 给照片留个记号,如何在照片上用美图秀秀做水印呢?步骤如下! 1、...

  • 莹莹

    占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符...

  • 莹莹

    占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符...

  • 九个Console命令,让 JS 调试更简单

    一、显示信息的命令 二、占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s...

  • UITextView添加placeHolder效果

    UITextField可以默认占位符,给用户输入提示,如下图 然而,UITextView没有占位符属性,输入很多文...

  • 表单填写过程中的信息提示

    表单中常见的信息提示 占位符标签 与标签相关性弱,提示信息较少,概括回答方式。填写表单时占位符清空。 标签辅助文字...

  • 及时止损哪有那么容易

    占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符 晚上清理微博时,发现了我以前发的微博 心情如同标题 ...

  • 前端实用的调试命令console使用

    一、显示信息的命令 最常用的就是console.log了。 二:占位符 console支持printf的占位符格式...

网友评论

      本文标题:WPF如何在TextBox上显示类似水印的提示占位符效果

      本文链接:https://www.haomeiwen.com/subject/rbfxejtx.html