WPF 自定义搜索框
效果:
代码:
<Window x:Class="WpfApp5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp5"
mc:Ignorable="d"
Title="MainWindow" Height="550" Width="800">
<Window.Resources>
<ControlTemplate TargetType="{x:Type TextBox}" x:Key="SearchTextBoxTemplate">
<Border x:Name="border" BorderThickness="0"
Background="#22000000" SnapsToDevicePixels="True"
CornerRadius="10">
<Grid>
<Grid.ColumnDefinitions>
<!--<ColumnDefinition Width="30"/>-->
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="mt" Text="请输入搜索内容" Grid.Column="0" Visibility="Collapsed" VerticalAlignment="Center" Foreground="Gray" Margin="10 0 0 0"/>
<Button Grid.Column="1" Content="" FontFamily="Fonts/#iconfont" FontSize="16" x:Name="btn">
<Button.Resources>
<Style TargetType="Button">
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="#FF4D4D"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="0 10 10 0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
<TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<!--<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="#2f96b4"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background" Value="#2a89a4"/>
</Trigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>
</Button>
<ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Margin="10 0 0 0"
Background="Transparent" VerticalAlignment="Center"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<!--<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>-->
<DataTrigger Binding="{Binding Text,RelativeSource={RelativeSource Mode=Self}}" Value="">
<Setter TargetName="mt" Property="Visibility" Value="Visible"/>
<Setter TargetName="btn" Property="Background" Value="#C9C6C6"/>
<Setter TargetName="btn" Property="Foreground" Value="Gray"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<TextBox VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="32"
Template="{StaticResource SearchTextBoxTemplate}" Text="{Binding SearchText}" Foreground="#3E3E42"/>
</Grid>
</Window>