Remove default text in multiple XAML Textboxes (on GotFocus), with single code-behind?

Question

I have the following code behind:

    public void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
    TextBox tb = (TextBox)sender;
    tb.Text = string.Empty;
    tb.GotFocus -= TextBox_GotFocus;
}

My XAML is as follows:

<TextBox x:Name="studyNameBox" Height="20" Margin="30,69,30,0" TextWrapping="Wrap" 
    Text="Study Name" VerticalAlignment="Top" FontSize="13.333" AllowDrop="False" 
    GotFocus="TextBox_GotFocus"/>
<TextBox x:Name="studyFacilNameBox" Height="20" Margin="30,101,30,0" 
    TextWrapping="Wrap" Text="Facilitator Name" VerticalAlignment="Top" FontSize="13.333" 
    GotFocus="TextBox_GotFocus"/>
<TextBox x:Name="studyNotesBox" Margin="30,132.334,30,97" TextWrapping="Wrap" 
    Text="Notes" FontSize="13.333" GotFocus="TextBox_GotFocus"/>

On clicking in the first box (studyNameBox) the default text disappears however it does not work for the other two boxes (studyFacilNameBox/studyNotesBox).

Original code from: Remove text after clicking in the textbox

How should I modify this to get all 3 boxes to clear the default text on getting the focus?

Many thanks.

Your code works fine for me. I think it would look nicer if you used a custom TextBox control that supports watermarks. See open source library Mahapps for an example. — Glen Thomas, Jul 28 '15 at 22:26
Are you saying that you want all three boxes to clear when the first one gets focus? — StillLearnin, Jul 29 '15 at 02:10

score 0 · Answer 1 · answered Jul 29 '15 at 06:58

There is a XAML-only solution here, you don't need to do anything fancy in code-behind to mimic a watermark.

Consider using the following style:

<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}"
       x:Key="TextBoxWithWatermarkStyle">
    <Setter Property="Padding" Value="3"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Border BorderThickness="1"
                        CornerRadius="1"
                        Background="{TemplateBinding Background}">
                    <Grid>
                        <ScrollViewer Margin="{TemplateBinding Padding}"
                                  x:Name="PART_ContentHost"/>
                        <TextBlock IsHitTestVisible="False" 
                               Text="{TemplateBinding Tag}"
                               VerticalAlignment="Center" 
                               HorizontalAlignment="Left"
                               Opacity="0.25"
                               Foreground="{TemplateBinding Foreground}"
                               Margin="5,0,0,0">
                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Value="">
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage:

<TextBox Style="{StaticResource TextBoxWithWatermarkStyle}" Tag="My Watermark" ... />

Remove default text in multiple XAML Textboxes (on GotFocus), with single code-behind?

1 Answers1