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.

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>
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" />
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.