WPF 自定义TextBox带水印控件,可设置圆角
原文:WPF 自定义TextBox带水印控件,可设置圆角
一、简单设置水印TextBox控件,废话不多说看代码:
<TextBox TextWrapping="Wrap" Margin="10" Height="69" Visibility="Visible"><TextBox.Style><Style TargetType="TextBox"><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsFocused" Value="false"/><Condition Property="Text" Value=""/></MultiTrigger.Conditions><Setter Property="Background"><Setter.Value><VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None"><VisualBrush.Visual><TextBlock Padding="5 2" Background="Transparent" TextWrapping="Wrap" Height="40" Foreground="Silver">您的评价对网友有很重要的参考作用,请认真填<LineBreak/>写,谢谢合作!</TextBlock></VisualBrush.Visual></VisualBrush></Setter.Value></Setter></MultiTrigger></Style.Triggers></Style></TextBox.Style> </TextBox>
这里的style可以单独提出来,方便多处使用。
设置之后的效果如下:
二、扩展增强TextBox
有的时候会碰到TextBox里面需要添加按钮,或者TextBox需要设置圆角。这个时候就需要添加自定义控件,添加依赖属性来扩展功能了。
2.1 添加自定义控件TextBoxEx
代码如下:
public class TextBoxEx : TextBox{static TextBoxEx(){DefaultStyleKeyProperty.OverrideMetadata(typeof(TextBoxEx), new FrameworkPropertyMetadata(typeof(TextBoxEx)));}public TextBoxEx(){CommandBindings.Add(new CommandBinding(SearchClickCommand, delegate{SearchClick?.Invoke(this, null);}));}public static RoutedUICommand SearchClickCommand = new RoutedUICommand(nameof(SearchClickCommand), nameof(SearchClickCommand), typeof(RoutedUICommand));public event EventHandler SearchClick;public string WaterMark{get { return (string)GetValue(WaterMarkProperty); }set { SetValue(WaterMarkProperty, value); }}public static readonly DependencyProperty WaterMarkProperty =DependencyProperty.Register("WaterMark", typeof(string), typeof(TextBoxEx), new PropertyMetadata(null));public ImageSource Icon{get { return (ImageSource)GetValue(IconProperty); }set { SetValue(IconProperty, value); }}public static readonly DependencyProperty IconProperty =DependencyProperty.Register("Icon", typeof(ImageSource), typeof(TextBoxEx), new PropertyMetadata(null));public new Brush BorderBrush{get { return (Brush)GetValue(BorderBrushProperty); }set { SetValue(BorderBrushProperty, value); }}public static readonly new DependencyProperty BorderBrushProperty =DependencyProperty.Register("BorderBrush", typeof(Brush), typeof(TextBoxEx), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(234,234,234))));public Brush MouseOverBorderBrush{get { return (Brush)GetValue(MouseOverBorderBrushProperty); }set { SetValue(MouseOverBorderBrushProperty, value); }}public static readonly DependencyProperty MouseOverBorderBrushProperty =DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(TextBoxEx), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(79,173,216))));public new Brush Background{get { return (Brush)GetValue(BackgroundProperty); }set { SetValue(BackgroundProperty, value); }}public static readonly new DependencyProperty BackgroundProperty =DependencyProperty.Register("Background", typeof(Brush), typeof(TextBoxEx), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(106,103,90))));public Brush MouseOverBackground{get { return (Brush)GetValue(MouseOverBackgroundProperty); }set { SetValue(MouseOverBackgroundProperty, value); }}public static readonly DependencyProperty MouseOverBackgroundProperty =DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(TextBoxEx), new PropertyMetadata(Color.FromRgb(106,103,90)));public CornerRadius CornerRadius{get { return (CornerRadius)GetValue(CornerRadiusProperty); }set { SetValue(CornerRadiusProperty, value); }}public static readonly DependencyProperty CornerRadiusProperty =DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(TextBoxEx), new PropertyMetadata(new CornerRadius(0)));public IconDirection IconDirection{get { return (IconDirection)GetValue(IconDirectionProperty); }set { SetValue(IconDirectionProperty, value); }}public static readonly DependencyProperty IconDirectionProperty =DependencyProperty.Register("IconDirection", typeof(IconDirection), typeof(TextBoxEx), new PropertyMetadata(IconDirection.Right));}public enum IconDirection{Left,Right}
2.2 设置TextBoxEx样式
<Style TargetType="{x:Type local:TextBoxEx}"><Setter Property="Foreground" Value="#555558"/><Setter Property="Background" Value="#6a675a"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:TextBoxEx}"><Border x:Name="_border" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding CornerRadius,Converter={StaticResource cornerRadiusToThickness} }" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"><Grid><Grid.ColumnDefinitions><ColumnDefinition x:Name="columleft" Width="auto"/><ColumnDefinition Width="*"/><ColumnDefinition x:Name="columright" Width="auto"/></Grid.ColumnDefinitions><Image Source="{TemplateBinding Icon}" Cursor="Hand" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"><i:Interaction.Triggers><i:EventTrigger EventName="MouseLeftButtonUp"><i:InvokeCommandAction Command="local:TextBoxEx.SearchClickCommand"/></i:EventTrigger></i:Interaction.Triggers></Image><ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.Column="1"/><TextBlock x:Name="_txtWater" IsHitTestVisible="False" Margin="3 0 0 0" VerticalAlignment="Center" Foreground="#9f9f9f" Text="{TemplateBinding WaterMark}" Visibility="Hidden" Grid.Column="1"/><Image Source="{TemplateBinding Icon}" Cursor="Hand" Stretch="None" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"><i:Interaction.Triggers><i:EventTrigger EventName="MouseLeftButtonUp"><i:InvokeCommandAction Command="local:TextBoxEx.SearchClickCommand"/></i:EventTrigger></i:Interaction.Triggers></Image></Grid></Border><ControlTemplate.Triggers><DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value=""><Setter TargetName="_txtWater" Property="Visibility" Value="Visible" /></DataTrigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/></Trigger><DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IconDirection}" Value="Left"><Setter TargetName="columright" Property="Width" Value="0" /></DataTrigger><DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IconDirection}" Value="Right"><Setter TargetName="columleft" Property="Width" Value="0" /></DataTrigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="{Binding MouseOverBorderBrush,RelativeSource={RelativeSource TemplatedParent}}"/><Setter Property="Background" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource TemplatedParent}}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
这里面使用了一个转换器cornerRadiusToThickness,转换器的作用是当TextBox设置了圆角之后,保证TextBox里的内容不溢出圆角。WPF转换器的使用大家可以百度。
转换器的内容如下:
public class CornerRadiusToThickness : IValueConverter{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){Thickness result = new Thickness(0);if (value is CornerRadius){var tem = (CornerRadius)value;result = new Thickness(tem.TopLeft, 0, tem.TopRight, 0);}return result;}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){throw new NotImplementedException();}}
另外为了触发TextBox按钮的单击事件,添加了这个两个dll文件引用,Microsoft.Expression.Interactions.dll和System.Windows.Interactivity.dll。
在顶部定义 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
2.3 引用方法
<local:TextBoxEx WaterMark="请输入搜索内容..." SearchClick="TextBoxEx_SearchClick" KeyDown="TextBoxEx_KeyDown" Background="#dfe1e3" VerticalAlignment="Center" MouseOverBackground="#dfe1e3" CornerRadius="13.5" IconDirection="Right" Icon="/Images/Title/search.png" Height="25" />
posted on 2019-04-17 14:20 NET未来之路 阅读(...) 评论(...) 编辑 收藏