WPF. Background help text in textbox and passwordbox

Question

I’m writing an WPF-based application and I’ve got a problem with It. I've searched an answer for weeks, but still couldn't find the solution. The problem is: I can’t show the background text with a tip. I’m using my own written style and trying to show text via triggers. Here’s the code sample I made:

<Style TargetType="{x:Type TextBox}" x:Key="DCTextBox">           
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#21346b"/>
            <Setter Property="FontFamily" Value="Fonts/#BankGothic Md BT"/>            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border CornerRadius="5" BorderThickness="6" BorderBrush="#21346b" Background="White" >
                            <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
            <Style.Resources>
                    <VisualBrush x:Key="HelpBrush" Opacity="0.4" Stretch="None" AlignmentX="Left" >
                        <VisualBrush.Visual>
                            <TextBlock FontStyle="Italic" Text="Type or select from list" Background="Black"/>
                        </VisualBrush.Visual>
                    </VisualBrush>
            </Style.Resources>         
            <Style.Triggers>
                <Trigger Property="Text" Value="{x:Null}">
                    <Setter Property="Control.Background" Value="{StaticResource HelpBrush}"/>
                </Trigger>
                <Trigger Property="Text" Value="">
                    <Setter Property="Control.Background" Value="{StaticResource HelpBrush}"/>
                </Trigger>
            </Style.Triggers> 
        </Style>

Please, tell me where could be the problem? Oh, and one more question: is it possible to output the background text in passwordbox using the similar method? Thank you!

Are you after a watermarked textbox? If so this has been covered before, here is a good example: [Watermark / hint text TextBox in WPF](http://stackoverflow.com/q/833943/109702) — slugster, Jan 14 '13 at 00:31
Possible duplicate of [Watermark / hint text / placeholder TextBox](https://stackoverflow.com/questions/833943/watermark-hint-text-placeholder-textbox) — Peter Duniho, Jul 06 '19 at 05:02

score 0 · Answer 1 · answered Jan 14 '13 at 00:47

If I understood correctly, what you want is a TextBox that displays a some text when empty and not focused, in order to tell the user what to do with it. For this I suggest to create a new control inherited from TextBox, so when you set your style you don't affect ALL the TextBoxes in your app. Add a DependencyProperty to it so you can set the help text in XAML.

public class MyTextBox : TextBox
{
    public static DependencyProperty LabelTextProperty =
        DependencyProperty.Register(
            "LabelText",
            typeof(string),
            typeof(MyTextBox));
 }

Define your style, in this case I do this (I'll just post the relevant parts, you can make it look pretty yourself):

 <Style x:Key="{x:Type local:MyTextBox}" TargetType="{x:Type local:MyTextBox}">
 <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyTextBox}">

     <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <Setter Property="Visibility" TargetName="LabelText" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="HasText" Value="True">
                        <Setter Property="Visibility" TargetName="LabelText" Value="Hidden" />
                    </Trigger>
     </ControlTemplate.Triggers>
           </ControlTemplate>
 </Setter.Value>
 </Style>

You use it like this:

<Local:MyTextBox LabelText="This is the tip for the user" Text="{Binding SomeProperty}"/>

Regarding the passwordbox, I havent't tried, but it should work just fine. If the LabelText is displayed as "xxxxxxxxx" I'm sure you'll find a workaround (out of the blue, I can think of creating a DependencyProperty of type TextBlock inside the PasswordBox, setting its content with the Tip string, and hiding/showing the whole thing).

One last suggestion: don't go into the expense of using a VisualBrush when you just want to display a text, it's overkill resourcewise and you might get a poor rendering in some cases. Hope this helps, regards!

score 0 · Answer 2 · answered Jan 14 '13 at 03:05

I did few corrections and it works fine for me.

 <Style TargetType="{x:Type TextBox}" x:Key="DCTextBox">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="#21346b"/>
        <Setter Property="FontFamily" Value="Fonts/#BankGothic Md BT"/>
        <Style.Resources>
            <VisualBrush x:Key="HelpBrush" Opacity="0.4" Stretch="None" AlignmentX="Left" >
                <VisualBrush.Visual>
                    <TextBlock FontStyle="Italic" Text="Type or select from list" Foreground="Black"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Style.Resources>
        <Style.Triggers>
            <Trigger Property="Text" Value="{x:Null}">
                <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
            </Trigger>
            <Trigger Property="Text" Value="">
                <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

hope it helps.

WPF. Background help text in textbox and passwordbox

2 Answers2