The Architect
aka "DotNetMastermind"

Wissenswertes zur Entwicklung hochwertiger grafischer Oberflächen (Rich User Interfaces) in WPF, Silverlight (dotNet, .NET) und Silverlight for Windows Phone 7 (WP7)

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 :

1. Very simple and easy to understand MVVM example

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)

 

2. Good demonstration of some WPFSmartLibrary - features
  • SmartButtons
  • SmartBackgroundBrushes
  • WindowKeysHandling
  • TextBoxBaseManager
  • PasswordBoxManager
  • BoolToBrushConverter
  • BoolToVisibilityConverter
  • TextBoxBaseAnimation
  • VisibilityAnimation
  • PasswordBoxBinding
  • Validation Templates
  • and this everything in one small demo …

You can download the sample application here :

EDIT :  The source code has been updated, regarding issues with the WPF Designer ... sorry for possible inconvenience

  SmartPasswordBoxDemo.zip



If you enjoyed reading the article, then please "Kick It" :

kick it on dotnet-kicks.de

kick it on DotNetKicks.com

Kommentare

dotnet-kicks.de sagte:

Sie wurden gekickt (eine gute Sache) - Trackback von dotnet-kicks.de

# November 6, 2012 12:44

DotNetKicks.com sagte:

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# November 6, 2012 12:48
Kommentar abgeben

(verpflichtend) 

(verpflichtend) 

(optional)

(verpflichtend)