Question

我读过这个 Adding placeholder text to textbox

问题是，占位符TextBox必须易于重用。使用XAML或Code。也许就是这样的

<my:TextBoxPlaceholder Placeholder="this is the placeholder"/>

或

<TextBox Placeholder="this is the placeholder"
         Type="/*staticresources*/PlaceholderTextBox"/>

这就是我指的。（我从Instagram Beta获得的屏幕截图）。

Imgur Imgur

正如您所看到的，在第二张图片中，“添加注释”占位符位于TextBox的最顶层，它覆盖了条带线。占位符是顶部的图片还是TextBlock？

Answer 1

您可以使用PhoneTextBox中的Windows Phone Toolkit控件。

它具有Hint属性，允许您设置占位符：

<toolkit:PhoneTextBox Hint="Add a coment" Text={Binding ...} .../>

Answer 2

您提到的主题上的 MacGile 的第三条评论显示了一种使用特殊样式扩展普通TextBox的相当简单的方法。如果您在TextBox上应用此样式，则可以使用它，就像他说明的那样：

<TextBox Style="{StaticResource placeHolder}" 
         Tag="Name of customer" Width="150" Height="24"/>

Tag属性是您输入占位符文本的位置。该样式旨在根据输入的文本更改颜色，并在用户编辑时返回全黑色。

实现目标的第二种方法是将TextBox放在网格中并在其上添加一个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，它将以您需要的方式工作。

Answer 3

您可以使用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>

占位符文本框Windows Phone 8

3 个答案: