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
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