跳转至

搜索框

重写TextBox的模板

<Style x:Key="SearchBox" TargetType="{x:Type TextBox}">
    <Setter Property="Background" Value="#FFF2F3F4"/>
    <Setter Property="BorderBrush" Value="#CBCBCB"/>
    <Setter Property="Foreground" Value="#515151"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="8,0,0,0"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBindingBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"SnapsToDevicePixels="True">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="bdLeft" Margin="0" CornerRadius="1">
                            <Grid>
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="False"HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                                <TextBlock Margin="10,0" VerticalAlignment="Center" Opacity="0.8" Text="输入搜索容">
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="Visibility" Value="Collapsed"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding RelativeSource={RelativeSourceMode=FindAncestor, AncestorType=TextBox}, Path=Text}" Value="">
                                                    <Setter Property="Visibility" Value="Visible"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>
                            </Grid>
                        </Border>
                        <!-- 放大镜 -->
                        <Path Grid.Column="1" Margin="5" Data="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-269-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 47-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" Fill="#FFAFAEAE"Stretch="Uniform" StrokeThickness="0"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="border" Property="Opacity" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="border" Property="Background" Value="white"/>
                    </Trigger>
                    <!--<Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter TargetName="bdLeft" Property="Background" Value="#60CACACA"/>
                        <Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
                        <Setter TargetName="border" Property="Background" Value="white"/>
                    </Trigger>-->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                <Condition Property="IsSelectionActive" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColorsInactiveSelectionHighlightBrushKey}}"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

应用

<TextBox Height="30" Style="{StaticResource SearchBox}" Text="{Binding SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</TextBox>

效果:

评论