WPF(样式): 带水印&清空按钮 的 TextBox文本输入框

<Style x:Key="ClearButtonTextBox" TargetType="{x:Type TextBox}">
    <Setter Property="TextAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border CornerRadius="0" BorderBrush="Silver" BorderThickness="1" Padding="0,0,5,0" Background="{TemplateBinding Background}">
                    <DockPanel LastChildFill="True">
                        <Button Width="16" Height="16" x:Name="PART_ContentHostClearButton" DockPanel.Dock="Right" HorizontalAlignment="Right">
                            <Button.Template>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Border x:Name="PART_Border" CornerRadius="0,3,0,3" 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>
                        <ScrollViewer DockPanel.Dock="Left" x:Name="PART_ContentHost" Background="{TemplateBinding Background}"/>
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <!--当点击清除按钮后,清空文本框中的内容-->
                    <DataTrigger Binding="{Binding ElementName=PART_ContentHostClearButton,Path=IsPressed}" Value="True">
                        <Setter Property="Text" Value="{x:Null}"/>
                    </DataTrigger>
                    <!--当文本框中有内容的时候显示清除按钮-->
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self},Path=Text.Length}" Value="0"/>
                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self},Path=IsFocused}" Value="False"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.Setters>
                            <Setter TargetName="PART_ContentHostClearButton" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="PART_ContentHost" Property="Background">
                                <Setter.Value>
                                    <VisualBrush Opacity="0.4" Stretch="None">
                                        <VisualBrush.Visual>
                                            <TextBlock Text="请键入搜索内容" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Setter.Value>
                            </Setter>
                        </MultiDataTrigger.Setters>
                    </MultiDataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值