带水印的文本框 [英] TextBox with watermark

问题描述

大家好，

我想用水印实现文本框.我已经通过使用TextBlock(充当水印)和TextBox来实现它.但是，当我单击控件时，TextBlock内容消失了，并且现在可以在插入符号中看到TextBox了.

I want to implement textbox with watermark.I have implemented it by using a TextBlock(acts as watermark) and TextBox.But when I click on the control the TextBlock content disappears and the TextBox is now visible with the caret.

我的应用程序要求是，当我单击控件时，TextBlock文本(水印)应该与插入符号一起可见，并且在用户开始键入时不应该看到.这种行为就像我们已输入密码进行签名 进入Microsoft帐户，甚至进入我们的Windows计算机.

My app requirement is that when I click on the control the TextBlock text(watermark) should be visible along with the caret and should not be seen when the user starts typing .This behaviour is like we have the password entry made to sign in to microsoft account or even in our windows machine.

1.水印(TextBlock文本)可见:当我们单击TextBox且TextBox没有文本时

1.Watermark (TextBlock Text) Visible : When we click on TextBox and the TextBox has no Text

2.水印(文本块文本)不可见:当用户在文本框中输入文本时

2.Watermark (TextBlock Text) InVisible :When the user enters text in TextBox

请帮助.

推荐答案

如果重新模板化文本框，则可以完成此操作.在执行此操作之前，您可能需要熟悉控件模板.  文本框具有相当简单的结构(不包括其视觉状态组).它的构造如下:

This can be done if you re-template the text box. You may want to familiarize yourself with control templating before you do this.  The TextBox  has a rather simple structure (excluding its visual state group). It is constructed with the following:

<Grid Background="Transparent">
	<Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">
		<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
	</Border>
	<Border x:Name="DisabledOrReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
		<TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
	</Border>
</Grid>

您可以添加另一个包含水印的元素，并根据其状态更改其可见性.

You could add another element  that contains the watermark and change it's visibility based on its state. 

这篇关于带水印的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！