The Architect
aka "DotNetMastermind"

Windows 8 PasswordBox Style for WPF

EDIT : Check out the improved style here http://dotnet-forum.de/blogs/thearchitect/archive/2012/11/13/improved-windows-8-passwordbox-style-for-wpf.aspx

For everybody who is interested in a PasswordBox similar to the Windows 8 Login PasswordBox I have implemented a XAML-Style (available for WPF-Applications).

Here is how it looks like :

This is the corresponding style :

<Style x:Key="SmartPasswordBoxStyle" TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {x:Type PasswordBox}}">

    <Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.ControlTextBrushKey}}"/>

    <Setter Property="Background" Value="{StaticResource {x:Static SystemColors.WindowBrushKey}}"/>

    <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>

    <Setter Property="FontFamily" Value="Times New Roman"/>

    <Setter Property="PasswordChar" Value="●"/>

    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>

    <Setter Property="BorderThickness" Value="1"/>

    <Setter Property="HorizontalContentAlignment" Value="Left"/>

    <Setter Property="VerticalContentAlignment" Value="Center"/>

    <Setter Property="Padding" Value="1"/>

    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

    <Setter Property="AllowDrop" Value="true"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type PasswordBox}">

                <Border x:Name="OuterBorder"

                          BorderBrush="{TemplateBinding BorderBrush}"

                          BorderThickness="{TemplateBinding BorderThickness}"

                          Background="{TemplateBinding Background}"

                          SnapsToDevicePixels="true">

                    <Grid VerticalAlignment="Center">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition />

                            <ColumnDefinition Width="Auto" />

                        </Grid.ColumnDefinitions>

                        <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                        <TextBox x:Name="RevealedPassword"

                                    Text="{TemplateBinding ap:PasswordBoxBinding.Password}"

                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                    VerticalContentAlignment="Center"

                                    Padding="{TemplateBinding Padding}"

                                    Margin="{TemplateBinding Padding}"

                                    Background="{TemplateBinding Background}"

                                    Visibility="Hidden" BorderThickness="0" IsReadOnly="True" FontFamily="Segoe UI" />

                        <TextBlock x:Name="TextBoxHint"

                                      Text="Enter password"

                                      Padding="{TemplateBinding Padding}"

                                      Background="Transparent"

                                      Cursor="IBeam" Margin="2" FontFamily="Segoe UI" Foreground="#FFB5B5B5"

                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                      Visibility="{Binding ElementName=RevealedPassword, Path=Text,

                                                    Converter={StaticResource StringToOppositeVisibilityConverter}}" />

                        <Border x:Name="PasswordRevealImageBorder" Grid.Column="1" Margin="0,1,3,1"

                              Visibility="{Binding ElementName=RevealedPassword, Path=Text, Converter={StaticResource StringToVisibilityConverter}}">

                            <Image x:Name="PasswordRevealImage"

                                     Source="../../CommonImages/PasswordEyeBlack.png" Margin="2" />

                        </Border>

                    </Grid>

                </Border>

                <ControlTemplate.Triggers>

                    <Trigger Property="IsEnabled" Value="false">

                    <Setter Property="Background" TargetName="OuterBorder" Value="{StaticResource {x:Static SystemColors.ControlBrushKey}}"/>

                        <Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"/>

                        <Setter Property="Opacity" TargetName="PasswordRevealImageBorder" Value="0.5"/>

                        <Setter Property="Text" TargetName="TextBoxHint" Value="{}{disabled}"/>

                    </Trigger>

                    <DataTrigger Binding="{Binding ElementName=PasswordRevealImage, Path=IsMouseOver}" Value="True">

                        <Setter TargetName="PasswordRevealImageBorder" Property="Background" Value="Gainsboro" />

                    </DataTrigger>

                    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="PasswordRevealImage">

                        <BeginStoryboard Storyboard="{StaticResource ShowPassword}"/>

                    </EventTrigger>

                    <EventTrigger RoutedEvent="Image.MouseUp" SourceName="PasswordRevealImage">

                        <BeginStoryboard Storyboard="{StaticResource HidePasswordAndChangeBorderColor}"/>

                    </EventTrigger>

                    <EventTrigger RoutedEvent="Image.MouseLeave" SourceName="PasswordRevealImage">

                        <BeginStoryboard Storyboard="{StaticResource HidePassword}"/>

                    </EventTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

As you can see you need a special AttachedProperty, some custom Storyboards an some Converters. So you have to reference the WPFSmartLibraryLight to make this working.

To give you an insight into the power of the WPFSmartLibrary I have put a link to a sample application at the end of this post including the demonstration of many cool functions. It is about a smart login dialog with almost no code behind (100% MVVM).

This sample application gives you a good overview to the following topics :

Login functionality with smart animations without code behind, except the following (needed) code behind :

    InitializeComponent();

    this.ViewModel = new LoginViewModel();

    this.DataContext = this.ViewModel;

=> Also no code behind for the animation needed (solved with AttachedProperties)

• SmartButtons
• SmartBackgroundBrushes
• WindowKeysHandling
• TextBoxBaseManager
• PasswordBoxManager
• BoolToBrushConverter
• BoolToVisibilityConverter
• TextBoxBaseAnimation
• VisibilityAnimation
• PasswordBoxBinding
• Validation Templates
• and this everything in one small demo …