WPF text box Password box add watermark effect

WPF text box Password box add watermark effect Source: read: 559 time: 2014-12-31Share:0

By convention, look at the effect first.

Text Box watermark

Text box watermark is relatively simple, do not need to rewrite the template, just need a visualbrush and trigger to verify that text is empty.

On the code:

<textbox name="Txtserachdataname"Width="120"Height="23"Grid.column="3"Grid.row="1"> <TextBox.Resources> <visualbrush x:key="Helpbrush"Tilemode="None"Opacity="0.3"Stretch="None"Alignmentx="Left"> <VisualBrush.Visual> <textblock fontstyle="Italic"Text="Watermark Effect"/> </VisualBrush.Visual> </VisualBrush> </TextBox.Resources> <TextBox.Style> <style Targettype="Textbox"> <setter property="Height"Value="23"></Setter> <setter property="HorizontalAlignment"Value="Left"></Setter> <setter property="VerticalAlignment"Value="Top"></Setter> <Style.Triggers> <trigger property="Text"Value="{x:null} "background Value={staticresource helpbrush}"/> </Trigger> <trigger property= "text  "Value= "background Value={staticresource helpbrush}"/> </Trigger> </Style.Triggers> </Style> </TextBox.Style> </textbox>      

For example, the text is empty when you set the background of the Bursh on the line.

Password box watermark

About the Password box watermark is different from the text box, you can write a brush to take care of, because the password box is not used to determine the input non-null dependency property, which requires us to add one, the code is as follows:

PublicClassPasswordboxmonitor:dependencyobject {PublicStaticboolGetismonitoring (DependencyObject obj) {Return (bool) obj. GetValue (Ismonitoringproperty); }PublicStaticvoid setismonitoring (DependencyObject obj,boolValue) {obj. SetValue (ismonitoringproperty, value); }PublicStaticReadOnly DependencyProperty Ismonitoringproperty =Dependencyproperty.registerattached ("Ismonitoring",typeofBOOL),typeof (Passwordboxmonitor),New UIPropertyMetadata (False, onismonitoringchanged));PublicStaticIntGetpasswordlength (DependencyObject obj) {Return (Int) obj. GetValue (Passwordlengthproperty); }PublicStaticvoid Setpasswordlength (DependencyObject obj,IntValue) {obj. SetValue (passwordlengthproperty, value); }PublicStaticReadOnly DependencyProperty Passwordlengthproperty =Dependencyproperty.registerattached ("Passwordlength",typeofint),typeof (Passwordboxmonitor),New UIPropertyMetadata (0));PrivateStaticvoidOnismonitoringchanged (DependencyObject D, DependencyPropertyChangedEventArgs e) {var PB = dAsPasswordBox;if (Pb = =Null) {Return; }if ((bool passwordchanged;} else {PB. passwordchanged-= PasswordChanged;}} static void passwordchanged ( object sender, RoutedEventArgs e) {var PB = Sender as PasswordBox; if (Pb = = nullreturn  

Add a passwordlength to determine whether the password box length is 0, when it is 0, the watermark is displayed, otherwise it is hidden.

When using the refactoring of the passwordbox, you need to quote: xmlns:wpftest= "Clr-namespace:wpfapplication2" I wrote the demo, so the namespace is WpfApplication2.

The XAML code is as follows:

<passwordbox name="Pb"Width="120"Verticalalignment="Bottom"Height="35"Grid.column="3"Grid.row="3"> <PasswordBox.Style> <style targettype="PasswordBox"> <setter property="Height"Value="23"></Setter> <setter property="HorizontalAlignment"Value="Left"></Setter> <setter property="VerticalAlignment"Value="Top"></Setter> <setter property="WpfTest:PasswordBoxMonitor.IsMonitoring"Value="True"/> <setter property="Template"> <Setter.Value> <controltemplate targettype="{x:type PasswordBox}"> <border name="Bd"Background="{TemplateBinding Background}"Borderthickness="{TemplateBinding BorderThickness}"Borderbrush="{TemplateBinding BorderBrush}"Snapstodevicepixels="True"> <Grid> <scrollviewer x:name="PART_ContentHost"Snapstodevicepixels="{TemplateBinding Snapstodevicepixels}"/> <stackpanel orientation="Horizontal"Visibility="Collapsed"Name="myStackPanel"> <textblock horizontalalignment="Left"Verticalalignment="Center"Foreground="Lightgray"Text="Watermark Effect"/> </StackPanel> </Grid> </Border> <ControlTemplate.Triggers> <trigger property="IsEnabled"Value="False"> <setter property="Visibility"Targetname="myStackPanel"Value="collapsed "wpftest:passwordboxmonitor.passwordlength "Value=" " > < Setter property= "visibility  "Targetname="  Mystackpanel "Value="  Visible             

As the above code, rewrite the ControlTemplate, add a StackPanel to determine the contents of the Password box length, not 0 when the display Stanckpanel otherwise not displayed.

Of course, you can not use a template, like a text box inside the way to display, just to passwordbox register a dependency property, here just tell everyone a way to use, according to different circumstances can choose the appropriate way.

WPF text box Password box add watermark effect