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;
}
}
}
}
}

上一篇:Win下端口占用问题:OSError: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试


下一篇:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值