WPF 密码框 密码可见切换

实现大体功能思路 一个Grid包含一个文本 一个密码框 通过点击图片来显示隐藏 这俩个控件

最难的其实就是prassWord不支持绑定 写了一个帮助类

界面

 <Grid HorizontalAlignment="Left" Margin="32,225,32,276" VerticalAlignment="Top" Width="408" Height="54">
                        <TextBox x:Name="PwTxTBox"  Visibility ="Collapsed" Text="{Binding Pwd,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"  Width="408" Height="54"  FontSize="18" VerticalAlignment="Center" BorderThickness="1"
                        BorderBrush="#dcdcdc" Style="{DynamicResource PwTextBoxStyle}">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="TextChanged">
                                    <i:InvokeCommandAction Command="{Binding TextKeyDownCommand}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </TextBox>
                        <PasswordBox x:Name="PwBox"  Helper:PasswordBoxHelper.Attach="True"
                                                 Helper:PasswordBoxHelper.Password="{Binding Path=Pwd,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="408" Height="54"  FontSize="18" VerticalAlignment="Center" BorderThickness="1"
                        BorderBrush="#dcdcdc" Style="{DynamicResource PasswordBoxStyle}" >
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="TextChanged">
                                    <i:InvokeCommandAction Command="{Binding TextKeyDownCommand}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </PasswordBox>
                        <Image x:Name="image" Grid.ColumnSpan="1" HorizontalAlignment="Left" Height="32" Margin="20,10,0,0" VerticalAlignment="Top" Width="27" Source="/OIS;component/Resources/Images/LoginPassword.png" Stretch="Fill"/>
                        <Image x:Name="image_Copy" Visibility ="Collapsed"  Grid.ColumnSpan="1" HorizontalAlignment="Right" Height="15" Margin="0,0,20,0" VerticalAlignment="Center" Width="30" Source="/OIS;component/Resources/Images/LoginPasswordHide.png" Stretch="Fill"/>
                        <Image x:Name="image_Copy1"  Grid.ColumnSpan="1" HorizontalAlignment="Right" Height="22" Margin="0,0,20,0" VerticalAlignment="Center" Width="30" Source="/OIS;component/Resources/Images/LoginPasswordShow.png" Stretch="Fill"/>
                    </Grid>

样式

 <Style x:Key="PasswordBoxStyle" TargetType="{x:Type PasswordBox}">
            <Setter Property="PasswordChar" Value="*"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type PasswordBox}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" CornerRadius="6">
                            <Grid HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Width="Auto">
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Margin="59,15,0,10"/>

                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="PwTextBoxStyle" TargetType="{x:Type TextBox}" BasedOn="{StaticResource NameTextBoxStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" CornerRadius="6">
                            <Grid HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Width="Auto">
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Margin="59,15,0,10" Grid.Column="0" Height="Auto"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
   

主要看 Password的绑定

<PasswordBox x:Name="PwBox"  Helper:PasswordBoxHelper.Attach="True"
                                                 Helper:PasswordBoxHelper.Password="{Binding Path=Pwd,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="408" Height="54"  FontSize="18" VerticalAlignment="Center" BorderThickness="1"
                        BorderBrush="#dcdcdc" Style="{DynamicResource PasswordBoxStyle}" >

Helper:PasswordBoxHelper.Attach="True"
                                                 Helper:PasswordBoxHelper.Password="{Binding Path=Pwd,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"

passwordHelper

    public static class PasswordBoxHelper
    {
        public static readonly DependencyProperty PasswordProperty =
            DependencyProperty.RegisterAttached("Password",
            typeof(string), typeof(PasswordBoxHelper),
            new FrameworkPropertyMetadata(string.Empty, OnPasswordPropertyChanged));
        public static readonly DependencyProperty AttachProperty =
            DependencyProperty.RegisterAttached("Attach",
            typeof(bool), typeof(PasswordBoxHelper), new PropertyMetadata(false, Attach));
        private static readonly DependencyProperty IsUpdatingProperty =
           DependencyProperty.RegisterAttached("IsUpdating", typeof(bool),
           typeof(PasswordBoxHelper));


        public static void SetAttach(DependencyObject dp, bool value)
        {
            dp.SetValue(AttachProperty, value);
        }
        public static bool GetAttach(DependencyObject dp)
        {
            return (bool)dp.GetValue(AttachProperty);
        }
        public static string GetPassword(DependencyObject dp)
        {
            return (string)dp.GetValue(PasswordProperty);
        }
        public static void SetPassword(DependencyObject dp, string value)
        {
            dp.SetValue(PasswordProperty, value);
        }
        private static bool GetIsUpdating(DependencyObject dp)
        {
            return (bool)dp.GetValue(IsUpdatingProperty);
        }
        private static void SetIsUpdating(DependencyObject dp, bool value)
        {
            dp.SetValue(IsUpdatingProperty, value);
        }
        private static void OnPasswordPropertyChanged(DependencyObject sender,
            DependencyPropertyChangedEventArgs e)
        {
            PasswordBox passwordBox = sender as PasswordBox;
            passwordBox.PasswordChanged -= PasswordChanged;
            if (!(bool)GetIsUpdating(passwordBox))
            {
                passwordBox.Password = (string)e.NewValue;
            }
            passwordBox.PasswordChanged += PasswordChanged;
        }
        private static void Attach(DependencyObject sender,
            DependencyPropertyChangedEventArgs e)
        {
            PasswordBox passwordBox = sender as PasswordBox;
            if (passwordBox == null)
                return;
            if ((bool)e.OldValue)
            {
                passwordBox.PasswordChanged -= PasswordChanged;
            }
            if ((bool)e.NewValue)
            {
                passwordBox.PasswordChanged += PasswordChanged;
            }
        }
        private static void PasswordChanged(object sender, RoutedEventArgs e)
        {
            PasswordBox passwordBox = sender as PasswordBox;
            SetIsUpdating(passwordBox, true);
            SetPassword(passwordBox, passwordBox.Password);
            SetIsUpdating(passwordBox, false);
        }
    }