Changing text of Textbox, when IsFocused=false

Question

How can I make following functionality:

if Textbox is not focused, and user didn't type any text there, textbox should have default value, something like Enter Name Here.... If user click on that textbox this label should dissapear.

Appreciate any help.

This is what I have so far. But this is control template. I think it's not so helpfull in this question but anyway.

  <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
        <Border Background="{TemplateBinding Background}" 
            x:Name="Bd" BorderBrush="LightGray"
            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
            <Grid VerticalAlignment="Center">
                <ScrollViewer Margin="5 0 0 0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled"  x:Name="PART_ContentHost"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
            <Trigger Property="Width" Value="Auto">
                <Setter Property="MinWidth" Value="100"/>
            </Trigger>
            <Trigger Property="Height" Value="Auto">
                <Setter Property="MinHeight" Value="20"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Possible duplicate of http://stackoverflow.com/questions/384264/how-do-you-implement-default-text-for-a-search-box-in-wpf ? — Corey Adler, Dec 18 '12 at 17:43

score 2 · Accepted Answer · answered Dec 18 '12 at 17:43

One nice looking way is to make your default text a watermark. I assume this is going to be in a UserControl so here is my implementation

<UserControl.Resources>
    <SolidColorBrush x:Key="brushWatermarkBackground" Color="White" />
    <SolidColorBrush x:Key="brushWatermarkForeground" Color="LightSteelBlue" />
    <SolidColorBrush x:Key="brushWatermarkBorder" Color="Indigo" />

    <utilities:TextInputToVisibilityConverter x:Key="TextInputToVisibilityConverter" />
    <utilities:VisibilityToColorConverter x:Key="VisibilityToColorConverter" />
</UserControl.Resources>
<Grid>
        <TextBlock Name="MsgHeader1" HorizontalAlignment="Center" Margin="18,0,19,134" Width="308" Text="Enter Name Here..." Foreground="{StaticResource brushWatermarkForeground}" Height="46" VerticalAlignment="Bottom" Background="White">
            <TextBlock.Visibility>
                <MultiBinding Converter="{StaticResource TextInputToVisibilityConverter}">
                    <Binding ElementName="MsgHeader2" Path="Text.IsEmpty" />
                    <Binding ElementName="MsgHeader2" Path="IsFocused" />
                </MultiBinding>
            </TextBlock.Visibility>
        </TextBlock>
        <TextBox Name="MsgHeader2" TextWrapping="Wrap" Background="{Binding ElementName=MsgHeader1, Path=Visibility, Converter={StaticResource VisibilityToColorConverter}}" BorderBrush="{StaticResource brushWatermarkBorder}" Margin="18,0,19,134" Text="{Binding MessageHeader}" HorizontalAlignment="Center" Width="308" Height="46" VerticalAlignment="Bottom" />
</Grid>

Obviously you have to define your own ValueConverters (mine are my own utilities xmlns), but these are easy enough. This will also give you a data binding for your text once you have some that has been entered.

Changing text of Textbox, when IsFocused=false

1 Answers1