WPF 带清除按钮的文字框SearchTextBox

原文:WPF 带清除按钮的文字框SearchTextBox

基于TextBox的带清除按钮的搜索框

样式部分：

    <!--带清除按钮文字框-->
    <Style TargetType="{x:Type local:XSearchTextBox}">
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:XSearchTextBox}">
                    <Border CornerRadius="0" BorderBrush="#FFE2E0E0" BorderThickness="1" Padding="0,0,5,0" Background="{TemplateBinding Background}">
                        <DockPanel LastChildFill="True">
                            <Button Width="16" Height="16" DockPanel.Dock="Right" x:Name="PART_ContentHostClearButton">
                                <Button.Template>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Border x:Name="PART_Border" CornerRadius="8" BorderBrush="Transparent" BorderThickness="0" Padding="2">
                                            <Path x:Name="PART_Path" Data="M6,6 L6,6 10,10 M10,6 L10,6 6,10" Fill="Gray" Stretch="Fill" Stroke="Gray" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                        </Border>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Background" TargetName="PART_Border">
                                                    <Setter.Value>
                                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                            <GradientStop Color="Silver" Offset="0.0" />
                                                            <GradientStop Color="White" Offset="0.5" />
                                                            <GradientStop Color="Silver" Offset="0.0" />
                                                        </LinearGradientBrush>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter Property="Stroke" TargetName="PART_Path" Value="#FFBA3232"/>
                                            </Trigger>
                                            <Trigger Property="IsPressed" Value="True">
                                                <Setter Property="UIElement.Effect">
                                                    <Setter.Value>
                                                        <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsFocused" Value="True" />
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
                            <Button Width="16" Height="16" DockPanel.Dock="Right" Visibility="Collapsed" x:Name="PART_ContentHostSeachButton">
                                <Button.Template>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Path Name="searchPath" Stretch="Fill" Fill="Gray"
                                              Data="F1 M 42.5,22C 49.4036,22 55,27.5964 55,34.5C 55,41.4036 49.4036,47 42.5,47C 40.1356,47 37.9245,46.3435 36,45.2426L 26.9749,54.2678C 25.8033,55.4393 23.9038,55.4393 22.7322,54.2678C 21.5607,53.0962 21.5607,51.1967 22.7322,50.0251L 31.7971,40.961C 30.6565,39.0755 30,36.8644 30,34.5C 30,27.5964 35.5964,22 42.5,22 Z M 42.5,26C 37.8056,26 34,29.8056 34,34.5C 34,39.1944 37.8056,43 42.5,43C 47.1944,43 51,39.1944 51,34.5C 51,29.8056 47.1944,26 42.5,26 Z ">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="-90" CenterX="8" CenterY="8" />
                                            </Path.RenderTransform>
                                        </Path>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
                            <ScrollViewer DockPanel.Dock="Left" Margin="2" x:Name="PART_ContentHost" Background="{TemplateBinding Background}"/>
                        </DockPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

代码部分：

    public class XSearchTextBox : TextBox
    {
        static XSearchTextBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(XSearchTextBox), new FrameworkPropertyMetadata(typeof(XSearchTextBox)));
        }

        [CategoryAttribute("自定义属性"), DescriptionAttribute("获取或设置默认文字")]
        public string PlaceHolder
        {
            get { return (string)GetValue(PlaceHolderProperty); }
            set { SetValue(PlaceHolderProperty, value); }
        }
        [CategoryAttribute("自定义属性"), DescriptionAttribute("获取或设置默认文字")]
        public static readonly DependencyProperty PlaceHolderProperty = DependencyProperty.Register("PlaceHolder", typeof(string), typeof(XSearchTextBox));

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            ButtonBase clearBtn = this.Template.FindName("PART_ContentHostClearButton", this) as ButtonBase;
            ButtonBase searchBtn = this.Template.FindName("PART_ContentHostSeachButton", this) as ButtonBase;

            searchBtn.Visibility = Visibility.Visible;
            clearBtn.Visibility = Visibility.Collapsed;
            this.Text = PlaceHolder;
            this.Opacity = 0.4;

            clearBtn.Click += (s, e) =>
            {
                this.Text = "";
            };

            this.LostFocus += (s, e) =>
            {
                if (this.Text.Length == 0)
                {
                    this.Text = PlaceHolder;
                    this.Opacity = 0.4;
                    searchBtn.Visibility = Visibility.Visible;
                    clearBtn.Visibility = Visibility.Collapsed;
                }
                else
                {
                    clearBtn.Visibility = Visibility.Visible;
                    searchBtn.Visibility = Visibility.Collapsed;
                }
            };

            this.GotFocus += (s, e) =>
            {
                if (this.Text == PlaceHolder)
                {
                    this.Text = "";
                }
                clearBtn.Visibility = Visibility.Visible;
                searchBtn.Visibility = Visibility.Collapsed;
            };
        }

        protected override void OnTextChanged(TextChangedEventArgs e)
        {
            if (this.Text != PlaceHolder)
            {
                base.OnTextChanged(e);
            }

            if (this.Template != null)
            {
                ButtonBase clearBtn = this.Template.FindName("PART_ContentHostClearButton", this) as ButtonBase;
                ButtonBase searchBtn = this.Template.FindName("PART_ContentHostSeachButton", this) as ButtonBase;
                this.Opacity = 1;

                if (this.Text.Length > 0)
                {
                    if (this.Text != PlaceHolder)
                    {
                        clearBtn.Visibility = Visibility.Visible;
                        searchBtn.Visibility = Visibility.Collapsed;
                    }
                    else
                    {
                        this.Opacity = 0.4;
                        searchBtn.Visibility = Visibility.Visible;
                        clearBtn.Visibility = Visibility.Collapsed;
                    }
                }
                else
                {
                    if (this.IsFocused)
                    {
                        clearBtn.Visibility = Visibility.Visible;
                        searchBtn.Visibility = Visibility.Collapsed;
                    }
                    else
                    {
                        this.Text = PlaceHolder;
                    }
                }
            }
        }
    }