WPF textbox/password box text disappear on click

Question

I'm making a login screen for a wpf application. I want 2 textboxes, one for username and password.

For username, I have used a textbox and added text to it ('Username') which disappears when the user clicks on it to enter their username. I done it with the code below.

I can't seem to replicate this for password. I don't believe i'll be able to use a textbox as I wont be able to disguise the user input to *'s or whatever, and I cant figure out a way to hardcode 'password' into the box for it to disappear when the user clicks.

How can I do this? I know its possible as loads of sites have this functionality but I cant figure it out after googling for a long time!

I should stress that im completely new to programming so answers aimed at a complete novice would be much appreciated!

Thanks

xaml: GotFocus="UserNameTextbox_OnGotFocus" Foreground="#FFA19DA1"/>

private void UserNameTextbox_OnGotFocus(object sender, RoutedEventArgs e)
    {
        UserNameTextbox.Text = "";
    }

Username example here

Have a look at this. [WPF Watermark PasswordBox from Watermark TextBox](http://stackoverflow.com/questions/1607066/wpf-watermark-passwordbox-from-watermark-textbox) — Exxoff, Feb 08 '16 at 13:48

score 2 · Answer 1 · answered Feb 09 '16 at 22:03

Try this technique:

XAML:

<Window x:Class="WpfApplication16.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication16"
        mc:Ignorable="d"
        Title="MainWindow" Height="100" Width="342.111" Background="DarkBlue">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="User Name:" HorizontalAlignment="Right" Foreground="White" />
        <TextBox Name="txtUserName" Grid.Column="1" TextChanged="txtUserName_TextChanged" />
        <TextBlock Name="tbUsername" Text="User Name" Foreground="Gray" IsHitTestVisible="False" Margin="4,0" VerticalAlignment="Center" Grid.Column="1" />    

        <TextBlock  Grid.Row="1" Text="Password:" Foreground="White" HorizontalAlignment="Right" />       
        <PasswordBox Name="pwbPassword" Grid.Row="1" Grid.Column="1" PasswordChanged="pwbPassword_PasswordChanged" />
        <TextBlock Name="tbPassword" Grid.Row="1" Grid.Column="1" Foreground="Gray" Margin="4,0" VerticalAlignment="Center" Text="Password" IsHitTestVisible="False" />
    </Grid>
</Window>

Code Behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void txtUserName_TextChanged(object sender, TextChangedEventArgs e)
    {
        if (txtUserName.Text.Length > 0)
            tbUsername.Visibility = Visibility.Collapsed;
        else
            tbUsername.Visibility = Visibility.Visible;
    }

    private void pwbPassword_PasswordChanged(object sender, RoutedEventArgs e)
    {
        if (pwbPassword.Password.Length > 0)
            tbPassword.Visibility = Visibility.Collapsed;
        else
            tbPassword.Visibility = Visibility.Visible;
    }
}

score 0 · Answer 2 · answered Feb 08 '16 at 13:46

Looks like you need to customize your password box a little bit. One way to achieve it is to create UserControl with a password box and textblock over it. On GotFocus for password box you just set visibility of textblock to Collapsed. And dont forger to set HitTestVisible=false for textblock.

WPF textbox/password box text disappear on click

2 Answers2