Control Styling Tips: PasswordBox


Hello!
In this article, I’d like to provide you with some information and tips that you’ll find useful when styling a Silverlight 3 PasswordBox.


Visual states. CommonStates (Normal, MouseOver and Disabled), FocusStates (Unfocused and Focused) and ValidationStates (Valid, InvalidUnfocused and InvalidFocused).


Template parts. ContentElement (FrameworkElement)


Try template binding: Background, BorderBrush, Foreground, BorderThickness or Padding.


Here’s some artwork you might want to try turning into a PasswordBox:

image

The XAML that corresponds to the above image is:


<Grid Height=20 Width=120>
      <Rectangle Fill=#FF333333 RadiusX=5 RadiusY=5/>
      <TextBlock Margin=5,0 Foreground=White Text=***** VerticalAlignment=Center/>
</Grid>


To make a PasswordBox out of the above XAML:



  • Select [Grid] and click Tools > Make Into Control > PasswordBox > OK.
     

  • Select [Grid]. In the Parts panel, double-click ContentElement.
     

  • Select [TextBlock]. Copy its Margin and VerticalAlignment property values to ContentElement. Delete [TextBlock].
     

  • In the Style, set Foreground to White.
     

  • Scope up. Set Password to ‘abcde’ and PasswordChar to ‘*’.

You should now have a working PasswordBox!


– Steve

Comments (0)