WPF-带清除按钮的文本框(更新水印效果)

来源:转载

 

带水印,带清除按钮的TextBox

先发个牢骚!!!NND,一个上午都毁在Text属性上了!!!

我就是打算做一个带有清除按钮的文本框,这样,我写好了样式,可以在别的地方通用,省去了每个都到后台写清空代码的麻烦。

于是,参照这昨天写的 《WPF-没事做了个圆角文本框,并且右侧有控件》我就写了一个样式,可是一个上午,就一直在找怎么才能清空内容。一直都不得其法,后来无奈只能也靠后台去写,果然是没有完美的事情啊。

但是出了个意外,就是,当我在其他文本框上面应用样式的时候,这个怪事就是。。。文本框中的内容变成了我最开始写样式时写的Text的内容,这个效果就是,一共三个文本框,两个是可以更改Text内容,而一个不能更改。

我仔细看了一下,发现,原来是调用样式的 问题就出在了这个Text属性上。

当控件生成时,如果Text有值,无论是不是空值,那么在Style样式中是会失效的。所以如果要让其生效,那么不可以设置控件的Text属性

样式代码:

234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
<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>

有兴趣的可以自己增加其他功能。我这也是留着自己备用的。

原文地址:http://www.luacloud.com/2011/06/21/wpf-%e5%b8%a6%e6%b8%85%e9%99%a4%e6%8c%89%e9%92%ae%e7%9a%84%e6%96%87%e6%9c%ac%e6%a1%86/

分享给朋友:
您可能感兴趣的文章:
随机阅读: