Windows Phone 7 Watermark on PasswordBox
For my textboxes I’ve been using a modified version Johan Danforth’s Watermark behaviour (binding the watermark text to a ViewModel property instead of hardcoding the text), but when I needed to do something similar for a PasswordBox I thought I was stuck.
I’ve come up with an incredibly basic, simple solution that seems to work well. Instead of just having a PasswordBox, I also have a TextBox behind it which I make invisible when the PasswordBox has content, or has focus. Because the watermark TextBox is behind the PasswordBox, it never gets focus: it is purely visual.
<TextBox x:Name="PasswordWatermark" TextWrapping="Wrap" Text="{Binding Labels.password, Mode=OneTime}" Foreground="{StaticResource PhoneTextBoxReadOnlyBrush}" IsHitTestVisible="False"/>
<PasswordBox x:Name="Password" LostFocus="PasswordLostFocus" Opacity="0" GotFocus="PasswordGotFocus" Password="{Binding Password, Mode=TwoWay}"/>
</Grid>
In the code-behind I hide/show the watermark TextBox and the PasswordBox as appropriate. Note that I show and hide them by changing their opacity, not by setting their visibility.
Because the PasswordBox is in front of the the watermark Textbox, when the user clicks in that area he always clicks on the PasswordBox, even if it is invisible.
<div style="padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;float: none;padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:28118c84-7573-4e48-9dd1-912e7915bf0f" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid;color: #000;font-family: 'Courier New', Courier, Monospace;font-size: 10pt"> <div style="background: #000080;color: #fff;font-family: Verdana, Tahoma, Arial, sans-serif;font-weight: bold;padding: 2px 5px">Code Snippet</div> <div style="background: #ddd;max-height: 300px;overflow: auto"> <ol style="background: #ffffff;margin: 0 0 0 2.5em;padding: 0 0 0 5px"> <li><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> <span style="color:#008b8b">PasswordLostFocus</span>(<span style="color:#0000ff">object</span> sender, <span style="color:#00008b">RoutedEventArgs</span> e)</li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#008b8b">CheckPasswordWatermark</span>();</li> <li style="background: #f3f3f3">}</li> <li> </li> <li style="background: #f3f3f3"><span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> <span style="color:#008b8b">CheckPasswordWatermark</span>()</li> <li>{</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">var</span> passwordEmpty = <span style="color:#0000ff">string</span>.<span style="color:#008b8b">IsNullOrEmpty</span>(<span style="color:#800080">Password</span>.<span style="color:#800080">Password</span>);</li> <li> <span style="color:#800080">PasswordWatermark</span>.<span style="color:#800080">Opacity</span> = passwordEmpty ? 100 : 0;</li> <li style="background: #f3f3f3"> <span style="color:#800080">Password</span>.<span style="color:#800080">Opacity</span> = passwordEmpty ? 0 : 100;</li> <li>}</li> <li style="background: #f3f3f3"> </li> <li><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> <span style="color:#008b8b">PasswordGotFocus</span>(<span style="color:#0000ff">object</span> sender, <span style="color:#00008b">RoutedEventArgs</span> e)</li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#800080">PasswordWatermark</span>.<span style="color:#800080">Opacity</span> = 0;</li> <li style="background: #f3f3f3"> <span style="color:#800080">Password</span>.<span style="color:#800080">Opacity</span> = 100;</li> <li>}</li> </ol> </div> </div> </div> <p>When populating the PasswordBox, you can call CheckPasswordWatermark() to show/hide the watermark as appropriate.</p>