我读过这个 Adding placeholder text to textbox
问题是，占位符 TextBox 必须易于重用。使用 XAML 或代码。 也许是这样的
<my:TextBoxPlaceholder Placeholder="this is the placeholder"/>
或
<TextBox Placeholder="this is the placeholder"
Type="/*staticresources*/PlaceholderTextBox"/>
这就是我所指的。 （我从 Instagram Beta 获得的屏幕截图）。
如您所见，在第二张图片中，“添加评论”占位符位于 TextBox 的最顶部，它覆盖了条纹线。占位符是图片还是上面的TextBlock？
【问题讨论】：
标签： c# wpf xaml windows-phone-8
MacGile 在您提到的线程上的第三条评论显示了一种相当简单的方法来扩展具有特殊样式的普通 TextBox。如果你在你的 TextBox 上应用这种风格，你可以像他说明的那样简单地使用它：
<TextBox Style="{StaticResource placeHolder}"
Tag="Name of customer" Width="150" Height="24"/>
Tag 属性是您输入占位符文本的位置。该样式旨在根据输入的文本更改颜色，并在用户编辑时恢复为全黑。
实现目标的第二种方法是将 TextBox 放在 Grid 中并在其上添加一个 TextBlock，当 TextBlock 不为空（用户输入了某些内容）时，您将隐藏它。示例：
<Grid>
<TextBox x:Name="MyTextBox" />
<TextBlock Text="enter name..." Foreground="#CCC"
Visibility="{Binding ElementName=MyTextBox, Path=Text, Converter={StaticResource StringLengthToVisibilityConverter}}" />
</Grid>
其中StringLengthToVisibilityConverter 是IValueConverter，当字符串参数为空时返回Visibility.Visible。您可以将其转换为自定义控件或 UserControl，它会按照您需要的方式工作。
【讨论】：
您可以使用来自Windows Phone Toolkit 的PhoneTextBox 控件。
它有一个Hint 属性，可让您设置占位符：
<toolkit:PhoneTextBox Hint="Add a coment" Text={Binding ...} .../>
【讨论】：
您可以使用 WatermarkTextBox 完成此操作。首先新建一个名为 WatermarkTextBox.cs 的类
public class WatermarkTextBox : TextBox
{
public WatermarkTextBox()
{
TextChanged += OnTextChanged;
}
private void OnTextChanged(object sender, TextChangedEventArgs textChangedEventArgs)
{
// Show or hide the watermark based on the text length
if (Text.Length > 0)
{
WatermarkVisibility = Visibility.Collapsed;
}
else
{
WatermarkVisibility = Visibility.Visible;
}
}
public string Watermark
{
get { return (string)GetValue(WatermarkProperty); }
set { SetValue(WatermarkProperty, value); }
}
// Using a DependencyProperty as the backing store for Watermark. This enables animation, styling, binding, etc...
public static readonly DependencyProperty WatermarkProperty =
DependencyProperty.Register("Watermark", typeof(string), typeof(WatermarkTextBox), new PropertyMetadata(null));
public Visibility WatermarkVisibility
{
get { return (Visibility)GetValue(WatermarkVisibilityProperty); }
set { SetValue(WatermarkVisibilityProperty, value); }
}
// Using a DependencyProperty as the backing store for WatermarkVisibility. This enables animation, styling, binding, etc...
public static readonly DependencyProperty WatermarkVisibilityProperty =
DependencyProperty.Register("WatermarkVisibility", typeof(Visibility), typeof(WatermarkTextBox), new PropertyMetadata(System.Windows.Visibility.Visible));
}
在您的 xaml 中，使用它代替您的普通文本框
<controls:WatermarkTextBox Watermark="Add a comment" Text="{Binding MyProperty}" Style={StaticResource WaterMarkTextBoxStyle/>
注意定义的样式，将以下样式添加到您的 app.xaml
<Style x:Key="WatermarkTextBoxStyle" TargetType="local:WatermarkTextBox">
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:WatermarkTextBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}"/>
<Border x:Name="ReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed"/>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">
<Grid>
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
<TextBlock Text="{TemplateBinding Watermark}" Foreground="Gray" Margin="3,4,0,0" Visibility="{TemplateBinding WatermarkVisibility}"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
【讨论】：