WPF 自定义搜索框

前端

  <!--一标签文本风格-->
        <Style x:Key="LabelTextStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="2,0,5,0"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#FF396CDE"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Background" Value="White"/>
        </Style>
      
        <Style x:Key="ListItemText" TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="0,5,2,5"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#FF1E1E1E"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <Style x:Key="ListMMSIText" TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="2,5,5,5"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Foreground" Value="Gray"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <!--一编辑文本风格-->
        <Style x:Key="ContentText" TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#FF7C7B79"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="White"/>
        </Style>

        <DrawingImage x:Key="SelectItemImage">
            <DrawingImage.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Pen>
                        <Pen Thickness="1.5" Brush="#FF396CDE"/>
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <PathGeometry Figures="M 0,0 L 10,0 M 0,0 L 0,10  M 0,0 L 10,10"/>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingImage.Drawing>
        </DrawingImage>
        <!--list弹框-->
        <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Name="Border" Padding="2" SnapsToDevicePixels="true"
                                BorderBrush="#FFF7F5F6" BorderThickness="0,0,0,1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5*"/>
                                    <ColumnDefinition Width="85*"/>
                                    <!--<ColumnDefinition Width="10*"/>-->
                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding bImage}" Grid.Column="0" Stretch="Fill"/>
                                <StackPanel Grid.Column="1" Orientation="Horizontal">
                                    <TextBlock Name="text" Style="{StaticResource ListItemText}" Text="{Binding Name}" />
                                    <TextBlock Name="textMMSI" Style="{StaticResource ListMMSIText}" Text="{Binding MMSIText}" />
                                </StackPanel>
                                <!--<Image Source="{StaticResource SelectItemImage}" Grid.Column="2" Margin="5"/>-->
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#FFF7F5F6"/>
                                <Setter TargetName="text" Property="FontWeight" Value="Bold"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
       
        <Style  x:Key="searchStyle" TargetType="{x:Type TextBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid Name="Part_Layout">
                            <Border Name="Part_OutBorder" BorderThickness="1,1,1,1" BorderBrush="LightGray" Background="White">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Name="Part_Textblock" Text="" Style="{StaticResource LabelTextStyle}" Background="LightGray"/>
                                    <!--ContentText-->
                                    <ScrollViewer x:Name="PART_ContentHost" Grid.Column="1" Focusable="True" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="WARTERMARK" Grid.Column="1" Text="{TemplateBinding Tag}" Foreground="#7F2F2F2F" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                    <!--<Viewbox Name="Part_Viewbox" Height="20" Grid.Column="2" Visibility="Collapsed">
                                        <wpfctl:CircularProgressBar/>
                                    </Viewbox>-->
                                </Grid>
                            </Border>
                            <Popup x:Name="Part_Popup" 
                               Margin="0,0,5,0"
                               StaysOpen="False"
                               Placement="Bottom"
                               PlacementTarget="{Binding ElementName=Part_OutBorder}"
                               PopupAnimation="Slide"             
                               Width="{Binding ElementName=Part_OutBorder, Path=ActualWidth}">
                                <ListBox 
                                    Name="Part_Listbox"
                                    BorderThickness="1,0,1,0" 
                                    BorderBrush="#FFF7F5F6"
                                    MaxHeight="400"
                                    ItemsSource="{Binding}"   
                                    SelectedValuePath="Id"
                                    DisplayMemberPath="Name"
                                    ItemContainerStyle="{StaticResource ListboxItemStyle}"/>
                            </Popup>
                            <!--SelectedValuePath="MMSINo" 
                                    DisplayMemberPath="Name"-->
                            <!--ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                                    ScrollViewer.VerticalScrollBarVisibility="Auto"-->
                            <!--<Button Name="Part_DelButton" Style="{StaticResource DelButtonStyle}" Visibility="Collapsed"/>-->
                            <!--Width="{Binding ElementName=Part_OutBorder, Path=ActualWidth}">-->
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!--显示水印-->
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                                <Setter TargetName="WARTERMARK" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="searchBtn" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="#FF1861AE"/>
            <Setter Property="BorderBrush" Value="LightGray"/>
            <Setter Property="BorderThickness" Value="0,1,1,1"/>
            <Setter Property="Margin" Value="0,-2,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="#FF1861AE">
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentStringFormat="{TemplateBinding ContentStringFormat}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#FF1861AA"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </HeaderedContentControl.Resources>
    <StackPanel Orientation="Horizontal" Width="400" Margin="0,-2,0,0">
        <TextBox Name="searchTextBox"  Height="42" Width="355"   Margin="2,0,0,0" Style="{StaticResource searchStyle}" Tag="SEARCH VESSEL / PORT" TextChanged="TextChange_SearchText"></TextBox>
        <Button Name="searchButton"  Height="42" Width="45"  ToolTip="{DynamicResource UCRouteSearch_Search}" Style="{StaticResource searchBtn}" Click="Button_click">
            <Button.Content>
                <Image Source="pack://application:,,,/EVResources;component/Images/IconM-46x46/IconM-02.png" Stretch="Uniform"/>
            </Button.Content>
        </Button>
    </StackPanel>

效果