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" />

所有代码已经上传到github：https://github.com/caomfan/WpfDemo.git