Using PasswordRevealMode for unmasking the Password in Universal Windows Apps

If you are building an Universal Windows Apps, and having a password box that accepts user credentials,  user may often want to unmasked the password to check if correct password was entered or not . We have seen similar feature for most of the password box either in desktop, mobile or web applications. Even previous version of Store or Phone Apps does supports that. However there is a change in Windows 10 Universal app that provide unified experience across the devices and can control the revealed button easily.

PasswordBox control now expose a new PasswordRevealMode property that can be used to control the password reveal behavior.

It has following three values :

By default it set to “Peek”, which mean the “Reveal” button would be visible. When you press the button, the password would be unmasked.

Here is the sample code snippet

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock FontSize="25" Text="Password" FontFamily="Segoe UI"></TextBlock>
            <PasswordBox FontSize="30"
                         MaxLength="10"
                         PasswordChar="*"
                         PasswordRevealMode="Peek"
                         Height="50"  
                         Width="250"/>
        </StackPanel>
    </Grid>

If you choose Visible, password field will be always unmasked and there will no option of selecting the reveal button. Similarly, for “Hidden”, password character will be masked always and there would be no reveal button.

Hope this helps.