如何在水印文本框上设置水印文本

Question

I have a template like this,

<Style x:Key="WaterMarkTextBoxStyle" BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Grid>
                    <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    <TextBlock x:Name="textBlock" Opacity="0.345" Text="Enter Text Here" TextWrapping="Wrap" Visibility="Hidden" />
                </Grid>

                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsFocused" Value="False" />
                            <Condition Property="Text" Value="" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Visibility" TargetName="textBlock" Value="Visible" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This seems to work quite nicely as a watermark textbox in WPF, but how can I change what the watermark text will be?

Above it is hard coded to Text = 'Enter text here'.

If I use the above like this,

<TextBox Style="{StaticResource WaterMarkTextBoxStyle}"></TextBox>

I cannot actually set what the watermark text is.

Ideas?

Answer 1

Use an attached dependency property:

public static class Watermark
{
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.RegisterAttached( "Text",
                                             typeof(Boolean),
                                             typeof(Watermark),
                                             new FrameworkPropertyMetadata() );

    public static void SetText( UIElement element, Boolean value )
    {
        element.SetValue( TextProperty, value );
    }

    public static Boolean GetText( UIElement element )
    {
        return (Boolean)element.GetValue( TextProperty );
    }
}

Then for your control you'd do something like:

<TextBox Style="{StaticResource WaterMarkTextBoxStyle}" Watermark.Text="Search" />

Your style would then need to bind to the DP:

<TextBlock x:Name="textBlock" Opacity="0.345"
           Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:Watermark.Text)}"
           TextWrapping="Wrap" Visibility="Hidden" />