UWP

Custom PasswordBox in Windows Phone 8.1

PasswordBox in Windows phone 8.1 has a property called "IsPasswordRevealButtonEnabled " which helps to show password by clicking the check box underneath it. 

  1. <Grid>  
  2.     <PasswordBox Background="White"   
  3.                  BorderBrush="Gray"   
  4.                  Foreground="Black"   
  5.                  Header="Password"   
  6.                  IsPasswordRevealButtonEnabled="True"  />                       
  7. </Grid>   
 

But we can remove checkbox and place toggle button inside passwordbox which looks much better. 

Here is the code for CustomPasswordBox,

  1. <Grid>  
  2.        <PasswordBox Background="White"   
  3.                     BorderBrush="Gray"   
  4.                     Foreground="Black"   
  5.                     Header="Password"   
  6.                     IsPasswordRevealButtonEnabled="True"   
  7.                     Style="{StaticResource CustomPasswordBoxStyle}" />  
  8.    </Grid>  
  1. <Page.Resources>  
  2.         <Thickness x:Key="PhoneButtonContentPadding">9.5,0,9.5,3.5</Thickness>  
  3.         <Style x:Key="CustomToggleButtonStyle" TargetType="ToggleButton">  
  4.             <Setter Property="Background" Value="Transparent"/>  
  5.             <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>  
  6.             <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>  
  7.             <Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>  
  8.             <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>  
  9.             <Setter Property="Padding" Value="{ThemeResource PhoneButtonContentPadding}"/>  
  10.             <Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>  
  11.             <Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>  
  12.             <Setter Property="HorizontalAlignment" Value="Left"/>  
  13.             <Setter Property="VerticalAlignment" Value="Center"/>  
  14.             <Setter Property="Template">  
  15.                 <Setter.Value>  
  16.                     <ControlTemplate TargetType="ToggleButton">  
  17.                         <Grid HorizontalAlignment="Center" Background="Transparent">  
  18.                             <VisualStateManager.VisualStateGroups>  
  19.                                 <VisualStateGroup x:Name="CommonStates">  
  20.                                     <VisualState x:Name="Normal" />  
  21.                                     <VisualState x:Name="PointerOver" />  
  22.                                     <VisualState x:Name="Pressed" />  
  23.                                     <VisualState x:Name="Disabled">  
  24.                                         <Storyboard>  
  25.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Visibility">  
  26.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />  
  27.                                             </ObjectAnimationUsingKeyFrames>  
  28.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Visibility">  
  29.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />  
  30.                                             </ObjectAnimationUsingKeyFrames>  
  31.                                         </Storyboard>  
  32.                                     </VisualState>  
  33.                                     <VisualState x:Name="Checked">  
  34.                                         <Storyboard>  
  35.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Background">  
  36.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}" />  
  37.                                             </ObjectAnimationUsingKeyFrames>  
  38.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="BorderBrush">  
  39.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}" />  
  40.                                             </ObjectAnimationUsingKeyFrames>  
  41.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledContent" Storyboard.TargetProperty="Foreground">  
  42.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneBackgroundBrush}" />  
  43.                                             </ObjectAnimationUsingKeyFrames>  
  44.                                             <ColorAnimation Duration="0"  
  45.                                                             Storyboard.TargetName="EnabledContent"  
  46.                                                             Storyboard.TargetProperty="(ContentPresenter.Foreground).(SolidColorBrush.Color)"  
  47.                                                             To="#00BAF2"  
  48.                                                             d:IsOptimized="True" />  
  49.                                         </Storyboard>  
  50.                                     </VisualState>  
  51.                                     <VisualState x:Name="CheckedPointerOver">  
  52.                                         <Storyboard>  
  53.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Background">  
  54.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}" />  
  55.                                             </ObjectAnimationUsingKeyFrames>  
  56.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="BorderBrush">  
  57.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}" />  
  58.                                             </ObjectAnimationUsingKeyFrames>  
  59.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledContent" Storyboard.TargetProperty="Foreground">  
  60.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneBackgroundBrush}" />  
  61.                                             </ObjectAnimationUsingKeyFrames>  
  62.   
  63.                                         </Storyboard>  
  64.                                     </VisualState>  
  65.                                     <VisualState x:Name="CheckedPressed" />  
  66.                                     <VisualState x:Name="CheckedDisabled">  
  67.                                         <Storyboard>  
  68.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Opacity">  
  69.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0.4" />  
  70.                                             </ObjectAnimationUsingKeyFrames>  
  71.                                         </Storyboard>  
  72.                                     </VisualState>  
  73.                                     <VisualState x:Name="Indeterminate" />  
  74.                                     <VisualState x:Name="IndeterminatePointerOver" />  
  75.                                     <VisualState x:Name="IndeterminatePressed" />  
  76.                                     <VisualState x:Name="IndeterminateDisabled">  
  77.                                         <Storyboard>  
  78.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Visibility">  
  79.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />  
  80.                                             </ObjectAnimationUsingKeyFrames>  
  81.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Visibility">  
  82.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />  
  83.                                             </ObjectAnimationUsingKeyFrames>  
  84.                                         </Storyboard>  
  85.                                     </VisualState>  
  86.                                 </VisualStateGroup>  
  87.                             </VisualStateManager.VisualStateGroups>  
  88.                             <Border x:Name="EnabledBackground"  
  89.                                     Margin="{ThemeResource PhoneTouchTargetOverhang}">  
  90.                                 <ContentPresenter x:Name="EnabledContent"  
  91.                                                   Margin="{TemplateBinding Padding}"  
  92.                                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
  93.                                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  
  94.                                                   AutomationProperties.AccessibilityView="Raw"  
  95.                                                   Content="{TemplateBinding Content}"  
  96.                                                   ContentTemplate="{TemplateBinding ContentTemplate}" />  
  97.                             </Border>  
  98.                             <Border x:Name="DisabledBackground"  
  99.                                     Margin="{ThemeResource PhoneTouchTargetOverhang}"  
  100.                                     Background="Transparent"                                     
  101.                                     IsHitTestVisible="False"  
  102.                                     Visibility="Collapsed">  
  103.                                 <ContentPresenter x:Name="DisabledContent"  
  104.                                                   Margin="{TemplateBinding Padding}"  
  105.                                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
  106.                                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  
  107.                                                   AutomationProperties.AccessibilityView="Raw"  
  108.                                                   Content="{TemplateBinding Content}"  
  109.                                                   ContentTemplate="{TemplateBinding ContentTemplate}"  
  110.                                                   Foreground="{ThemeResource ButtonDisabledForegroundThemeBrush}" />  
  111.                             </Border>  
  112.                         </Grid>  
  113.                     </ControlTemplate>  
  114.                 </Setter.Value>  
  115.             </Setter>  
  116.         </Style>  
  117.         <Style x:Key="CustomPasswordBoxStyle" TargetType="PasswordBox">  
  118.             <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/>  
  119.             <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}"/>  
  120.             <Setter Property="Height" Value="67"/>  
  121.             <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}"/>  
  122.             <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}"/>  
  123.             <Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/>  
  124.             <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}"/>  
  125.             <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}"/>  
  126.             <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>  
  127.             <Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>  
  128.             <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>  
  129.             <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>  
  130.             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>  
  131.             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>  
  132.             <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>  
  133.             <Setter Property="Margin" Value="{ThemeResource TextControlMarginThemeThickness}"/>  
  134.             <Setter Property="VerticalAlignment" Value="Top"/>  
  135.             <Setter Property="Template">  
  136.                 <Setter.Value>  
  137.                     <ControlTemplate TargetType="PasswordBox">  
  138.                         <Grid Background="Transparent">  
  139.                             <Grid.RowDefinitions>  
  140.                                 <RowDefinition Height="Auto"/>  
  141.                                 <RowDefinition Height="*"/>  
  142.                                 <RowDefinition Height="Auto"/>  
  143.                             </Grid.RowDefinitions>  
  144.                             <VisualStateManager.VisualStateGroups>  
  145.                                 <VisualStateGroup x:Name="CommonStates">  
  146.                                     <VisualState x:Name="Disabled">  
  147.                                         <Storyboard>  
  148.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement">  
  149.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}"/>  
  150.                                             </ObjectAnimationUsingKeyFrames>  
  151.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">  
  152.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}"/>  
  153.                                             </ObjectAnimationUsingKeyFrames>  
  154.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">  
  155.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}"/>  
  156.                                             </ObjectAnimationUsingKeyFrames>  
  157.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">  
  158.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}"/>  
  159.                                             </ObjectAnimationUsingKeyFrames>  
  160.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">  
  161.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledHeaderForegroundThemeBrush}"/>  
  162.                                             </ObjectAnimationUsingKeyFrames>  
  163.                                         </Storyboard>  
  164.                                     </VisualState>  
  165.                                     <VisualState x:Name="Normal">  
  166.                                         <Storyboard>  
  167.                                             <DoubleAnimation Duration="0" To="{ThemeResource TextControlBorderThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BorderElement"/>  
  168.                                         </Storyboard>  
  169.                                     </VisualState>  
  170.                                     <VisualState x:Name="PointerOver"/>  
  171.                                     <VisualState x:Name="Focused">  
  172.                                         <Storyboard>  
  173.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">  
  174.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}"/>  
  175.                                             </ObjectAnimationUsingKeyFrames>  
  176.                                             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PlaceholderTextContentPresenter"/>  
  177.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement">  
  178.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxFocusedBackgroundThemeBrush}"/>  
  179.                                             </ObjectAnimationUsingKeyFrames>  
  180.                                         </Storyboard>  
  181.                                     </VisualState>  
  182.                                 </VisualStateGroup>  
  183.                                 <VisualStateGroup x:Name="ButtonStates">  
  184.                                     <VisualState x:Name="ButtonVisible">  
  185.                                         <Storyboard>  
  186.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RevealButton">  
  187.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>  
  188.                                             </ObjectAnimationUsingKeyFrames>  
  189.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="RevealButton">  
  190.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>  
  191.                                             </ObjectAnimationUsingKeyFrames>  
  192.                                         </Storyboard>  
  193.                                     </VisualState>  
  194.                                     <VisualState x:Name="ButtonCollapsed">  
  195.                                         <Storyboard>  
  196.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RevealButton">  
  197.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>  
  198.                                             </ObjectAnimationUsingKeyFrames>  
  199.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="RevealButton">  
  200.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>  
  201.                                             </ObjectAnimationUsingKeyFrames>  
  202.                                         </Storyboard>  
  203.                                     </VisualState>  
  204.                                 </VisualStateGroup>  
  205.                             </VisualStateManager.VisualStateGroups>  
  206.                             <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1"/>  
  207.                             <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="{ThemeResource TextControlHeaderMarginThemeThickness}" Grid.Row="0" Style="{StaticResource HeaderContentPresenterStyle}"/>  
  208.                             <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{ThemeResource RichEditBoxTextThemeMargin}" MinHeight="{ThemeResource TextControlThemeMinHeight}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/>  
  209.                             <ContentControl x:Name="PlaceholderTextContentPresenter" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" IsTabStop="False" Margin="{ThemeResource RichEditBoxTextThemeMargin}" Padding="{TemplateBinding Padding}" Grid.Row="1"/>  
  210.                             <!--<CheckBox x:Name="RevealButton" Foreground="{ThemeResource TextBoxForegroundHeaderThemeBrush}" HorizontalAlignment="Left" IsTabStop="False" Margin="{ThemeResource PasswordBoxCheckBoxThemeMargin}" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top"/>-->  
  211.                             <ToggleButton x:Name="RevealButton"  
  212.                                           Grid.Row="1"                                           
  213.                                           HorizontalAlignment="Right"  
  214.                                           VerticalAlignment="Top"  
  215.                                           Content="?"  
  216.                                           FontFamily="Segoe UI Symbol"  
  217.                                           Foreground="Gray"  
  218.                                           IsTabStop="False"  
  219.                                           Margin="0,-6.5,-32,0"     
  220.                                           Style="{StaticResource CustomToggleButtonStyle}"  
  221.                                           Visibility="Visible" />  
  222.   
  223.                         </Grid>  
  224.                     </ControlTemplate>  
  225.                 </Setter.Value>  
  226.             </Setter>  
  227.         </Style>  
  228.     </Page.Resources>  
This is how the CustomPasswordBox looks like
 
 

Source code is included, if in case of any doubts feel free to ask.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs