WPF 自定义搜索框

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="&#xe628;" 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>