WPF 水印 TextBox MaskedTextBox

最新推荐文章于 2021-12-17 22:43:54 发布

孤夜一点星

最新推荐文章于 2021-12-17 22:43:54 发布

阅读量1.8k

点赞数

分类专栏： WPF 文章标签： wpf 自定义水印文本框TextBox WPF MaskedTextBox

本文链接：https://blog.csdn.net/lvguoshan/article/details/48707171

版权

WPF 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

设计出来的样子是这个样子的。

注：这是个封装在DLL中的控件，但不影响理解

一、样式字典 - 仅仅定义了基本的骨骼结构

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    
                    >
    <!--该字典中除非特殊声明，否则资源一律不能删除，会照成异常，因动态改变资源所以请务必不要随便改变动态资源为静态-->
    
    <!--TextBox视图-->
    <VisualBrush x:Key="TextBoxVisual">
        <VisualBrush.Visual>
            <TextBlock></TextBlock>
        </VisualBrush.Visual>
    </VisualBrush>
    <!--TextBoxMasked样式-->
    <Style TargetType="TextBox" x:Key="TextBoxStyle">
        <Style.Triggers>
            <Trigger Property="Text" Value="{x:Null}">
                <Setter Property="Background" Value="{DynamicResource TextBoxVisual}"></Setter>
            </Trigger>
            <Trigger Property="Text" Value="">
                <Setter Property="Background" Value="{DynamicResource TextBoxVisual}"></Setter>
            </Trigger>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Background" Value="{x:Null}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

二、控件的封装：定义了几个依赖属性用于界面设置

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

namespace DialogEx.Controls
{
    /// <summary>
    /// 水印TextBox
    /// </summary>
    public class TextBoxMasked : TextBox
    {
        #region 依赖属性
        
        public static readonly DependencyProperty MaskTextProperty = DependencyProperty.Register("MaskText", typeof(string), typeof(TextBoxMasked),new PropertyMetadata(string.Empty));
        public static readonly DependencyProperty MaskTextFontStyleProperty = DependencyProperty.Register("MaskFontStyle", typeof(FontStyle), typeof(TextBoxMasked),new PropertyMetadata(FontStyles.Italic));
        public static readonly DependencyProperty MaskTextVerticalContentProperty = DependencyProperty.Register("MaskVerticalContent", typeof(AlignmentY), typeof(TextBoxMasked), new PropertyMetadata(AlignmentY.Center));
        public static readonly DependencyProperty MaskTextHorizontalAlignmentContentProperty = DependencyProperty.Register("MaskHorizontalContent", typeof(AlignmentX), typeof(TextBoxMasked), new PropertyMetadata(AlignmentX.Left));
        public static readonly DependencyProperty MaskTextFontSizeProperty = DependencyProperty.Register("MaskFontSize", typeof(Double), typeof(TextBoxMasked), new PropertyMetadata((Double)12));
        public static readonly DependencyProperty MaskTextLineHeightProperty = DependencyProperty.Register("MaskLineHeight", typeof(Double), typeof(TextBoxMasked), new PropertyMetadata((Double)12));
        #endregion

        #region 公有字段
        /// <summary>
        /// 内容
        /// </summary>
        public string MaskedText
        {
            get { return ((string)GetValue(MaskTextProperty)).Replace("\\r\\n", "\r\n"); }
            set { SetValue(MaskTextProperty, value); }
        }

        /// <summary>
        /// 字体样式
        /// </summary>
        public FontStyle MaskFontStyle
        {
            get { return (FontStyle)GetValue(MaskTextFontStyleProperty); }
            set { SetValue(MaskTextFontStyleProperty, value); }
        }

        /// <summary>
        /// 字体大小
        /// </summary>
        public double MaskFontSize
        {
            get { return (double)GetValue(MaskTextFontSizeProperty); }
            set { SetValue(MaskTextFontSizeProperty, value); }
        }

        /// <summary>
        /// 字体大小
        /// </summary>
        public double MaskLineHeight
        {
            get { return (double)GetValue(MaskTextLineHeightProperty); }
            set { SetValue(MaskTextLineHeightProperty, value); }
        }

        /// <summary>
        /// 垂直位置
        /// </summary>
        public AlignmentY MaskVerticalContent
        {
            get { return (AlignmentY)GetValue(MaskTextVerticalContentProperty); }
            set { SetValue(MaskTextVerticalContentProperty, value); }
        }

        /// <summary>
        /// 水平位置
        /// </summary>
        public AlignmentX MaskHorizontalContent
        {
            get { return (AlignmentX)GetValue(MaskTextHorizontalAlignmentContentProperty); }
            set { SetValue(MaskTextHorizontalAlignmentContentProperty, value); }
        }
        #endregion

        #region 私有字段
        
        #endregion

        public TextBoxMasked()
        {
            Loaded += (sender, args) =>
            {
                //资源视图
                VisualBrush _MaskVisual = new VisualBrush()
                {
                    TileMode = TileMode.None,
                    Opacity = 0.3,
                    Stretch = Stretch.None,
                    AlignmentX = this.MaskHorizontalContent,
                    AlignmentY = this.MaskVerticalContent
                };
                _MaskVisual.Visual = new TextBlock()
                {
                    FontStyle = this.MaskFontStyle,
                    FontSize = this.MaskFontSize,
                    Text = this.MaskedText,
                    LineHeight = this.MaskLineHeight,
                };
               
                资源引用
                //this.Resources.Add("HelperBrush", _MaskVisual);

                //#region 触发器Setter
                //Setter NullSetter = new Setter()
                //{
                //    Property = BackgroundProperty,
                //    Value = this.Resources["HelperBrush"]
                //};
                //Setter EmptySetter = new Setter()
                //{
                //    Property = BackgroundProperty,
                //    Value = this.Resources["HelperBrush"]
                //};
                //Setter FocusedSetter = new Setter()
                //{
                //    Property = BackgroundProperty,
                //    Value = null
                //};
                //#endregion

                //#region 触发器
                //Trigger NullTrigger = new Trigger()
                //{
                //    Property = TextProperty,
                //    Value = null
                //};
                //NullTrigger.Setters.Add(NullSetter);

                //Trigger EmptyTrigger = new Trigger()
                //{
                //    Property = TextProperty,
                //    Value = ""
                //};
                //EmptyTrigger.Setters.Add(EmptySetter);

                //Trigger FocusedTrigger = new Trigger()
                //{
                //    Property = IsFocusedProperty,
                //    Value = true
                //};
                //FocusedTrigger.Setters.Add(FocusedSetter);
                //#endregion

                //#region 样式
                //Style NewStyle = new Style();
                //NewStyle.TargetType = typeof(TextBox);
                //NewStyle.Triggers.Add(NullTrigger);
                //NewStyle.Triggers.Add(EmptyTrigger);
                //NewStyle.Triggers.Add(FocusedTrigger);

                //this.Style = NewStyle;
                //#endregion

                this.Resources.Source = new Uri("DialogEx;Component/Controls/TextBoxMasked.xaml", UriKind.RelativeOrAbsolute);
                this.Resources["TextBoxVisual"] = _MaskVisual;
                this.Style = this.Resources["TextBoxStyle"] as Style;
            };
        }
    }
}

三、使用方法 - 引用文本框的命名空间。

xmlns:MyControls="clr-namespace:DialogEx.Controls;assembly=DialogEx"

<MyControls:TextBoxMasked Height="28" Width="350" VerticalContentAlignment="Center" BorderBrush="#197CD6" BorderThickness="1" Text="{Binding SearchText}" Foreground="Black" FontSize="12" MaskedText="请输入搜索关键词" MaskFontStyle="Italic" MaskVerticalContent="Center"/>