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)

Improved Windows 8 PasswordBox Style for WPF

Regarding to the following blog post http://dotnet-forum.de/blogs/thearchitect/archive/2012/11/06/windows-8-passwordbox-style-for-wpf.aspx i have furthermore improved the PasswordBox Style to look more similar to the Windows 8 PasswordBox. And again I did not use the VisualStateManager Class, so it is possible to use this style also with the .Net Framework 3.0 / 3.5 (and not only with the .Net Framework 4.0).

Here is how it looks like now :

This is the new corresponding style (Win8PasswordBoxStyle) :

<Style x:Key="Win8PasswordBoxStyle" 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}}" />

 

                        <Button x:Name="RevealButton"

                                  Grid.Column="1" SnapsToDevicePixels="True"

                                  Style="{StaticResource RevealButtonStyle}"

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

                        </Button>

                    </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="RevealButton" Value="0.5" />

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

                    </Trigger>

 

                    <DataTrigger Binding="{Binding ElementName=RevealButton, Path=IsPressed}" Value="True">

                        <Setter TargetName="RevealedPassword" Property="Visibility" Value="Visible" />

                    </DataTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

 

… and this is the corresponding RevealButton-Style :

<Style x:Key="RevealButtonStyle" TargetType="{x:Type Button}">

    <Setter Property="Template">

        <Setter.Value>

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

                <Grid>

                    <Border x:Name="PasswordRevealGlyphBorder" Background="Transparent" Margin="1,1,3,1"

                                BorderThickness="{TemplateBinding BorderThickness}">

                        <TextBlock x:Name="GlyphElement" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center"

                                        Text="&#xE052;" FontFamily="Segoe UI Symbol" Margin="3,0"

                                        FontSize="{TemplateBinding FontSize}" />

                    </Border>

                </Grid>

 

                <ControlTemplate.Triggers>

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

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

                    </DataTrigger>

 

                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}" Value="True">

                        <Setter TargetName="PasswordRevealGlyphBorder" Property="Background" Value="Black" />

                        <Setter TargetName="GlyphElement" Property="Foreground" Value="White" />

                    </DataTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>


You can download the sample application here :

 
SmartPasswordBoxDemo2.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 13, 2012 10:35

DotNetKicks.com sagte:

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

# November 13, 2012 10:39

Windows 8 PasswordBox Style for WPF - The Architect aka "DotNetMastermind" sagte:

Ping Antwort von  Windows 8 PasswordBox Style for WPF - The Architect aka &quot;DotNetMastermind&quot;

# November 16, 2012 3:19
Kommentar abgeben

(verpflichtend) 

(verpflichtend) 

(optional)

(verpflichtend)