设计出来的样子是这个样子的。
注:这是个封装在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"/>