WPF PasswordBox点击眼睛查看明文样式

最新推荐文章于 2024-05-21 17:59:06 发布

OneOnce

最新推荐文章于 2024-05-21 17:59:06 发布

阅读量7.7k

点赞数 2

分类专栏： WPF

本文链接：https://blog.csdn.net/OneOnce/article/details/77196894

版权

WPF 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

其他资源：WPF PasswordBox样式(占位符，清除按钮 )

效果

其他资源查看上一篇：

Style：

<Style x:Key="EyePasswordBox" TargetType="{x:Type PasswordBox}">
    <Setter Property="SelectionBrush" Value="{StaticResource PasswordBox.Static.SelectionBrush}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="FontSize" Value="22"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="PasswordChar" Value="●"/>
    <Setter Property="Background" Value="{StaticResource PasswordBox.Static.Background}"/>
    <Setter Property="Foreground" Value="{StaticResource PasswordBox.Static.Foreground}"/>
    <Setter Property="BorderBrush" Value="{StaticResource PasswordBox.Static.BorderBrush}"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="CaretBrush" Value="{StaticResource PasswordBox.Static.Foreground}"/>
    <Setter Property="controls:PasswordBoxHelper.Attach" Value="True"/>
    <Setter Property="controls:PasswordBoxHelper.Password" Value="{Binding Path=Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type PasswordBox}">
                <Border x:Name="PART_Root" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                    CornerRadius="{TemplateBinding controls:ControlAttachProperty.CornerRadius}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}">
                    <Grid x:Name="PART_InnerGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding Path=(controls:ControlAttachProperty.CornerRadius).TopLeft, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ITBMLC}}"/>
                            <ColumnDefinition  Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition  Width="Auto"/>
                            <ColumnDefinition Width="{Binding Path=(controls:ControlAttachProperty.CornerRadius).TopLeft, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ITBMLC}}"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock x:Name="PART_ContentIdentity" Grid.Column="1"
                                FontSize="20"
                                FontFamily="/ImageButtonTest01;component/Resources/#iconfont"
                                Text=""
                                HorizontalAlignment="Center" VerticalAlignment="Center"/>

                        <!--内容区域-->
                        <ScrollViewer x:Name="PART_ContentHost" Grid.Column="2" Margin="2"
                                    BorderThickness="0" IsTabStop="False"
                                    VerticalAlignment="Stretch" Background="{x:Null}"
                                    VerticalContentAlignment="Center"/>

                        <!--显示密码明文-->
                        <TextBox x:Name="PART_PasswordShower" Grid.Column="2"
                                IsTabStop="True" Focusable="False"
                                Margin="2" Padding="0"
                                HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                BorderBrush="Transparent" BorderThickness="0"
                                Visibility="Collapsed" IsHitTestVisible="False"
                                Width="{Binding CaretIndex, RelativeSource={RelativeSource TemplatedParent}}"
                                Text="{Binding Path=(controls:PasswordBoxHelper.Password), RelativeSource={RelativeSource TemplatedParent}}"
                                FontSize="{TemplateBinding FontSize}"
                                CaretBrush="Transparent"/>

                        <TextBlock x:Name="PART_PlaceHolder" Grid.Column="2" Foreground="Black"
                                IsHitTestVisible="False" Margin="3,0,3,0"
                                HorizontalAlignment="Left" VerticalAlignment="Center"
                                SnapsToDevicePixels="True"
                                Visibility="Collapsed" Opacity="0.6"
                                TextAlignment="Center"
                                Text="{Binding Path=(controls:ControlAttachProperty.PlaceHolder), RelativeSource={RelativeSource TemplatedParent}}"
                                FontSize="{Binding FontSize, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PHFSC}}"/>

                        <!--附加内容区域-->
                        <ToggleButton x:Name="PART_EyeToggle" Grid.Column="3"
                                    IsTabStop="True" Focusable="False"
                                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{Binding Background,RelativeSource={RelativeSource TemplatedParent}}"
                                    Foreground="Black" FontWeight="Medium"
                                    IsEnabled="True"
                                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                    Style="{StaticResource PasswordBoxToggleButtonStyle}"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="controls:PasswordBoxHelper.Password" Value="">
                        <Setter TargetName="PART_PlaceHolder" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="PART_EyeToggle" Property="IsEnabled" Value="False"/>
                    </Trigger>

                    <DataTrigger Binding="{Binding IsChecked, ElementName=PART_EyeToggle}" Value="True">
                        <Setter TargetName="PART_PasswordShower" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="PART_PasswordShower" Property="IsHitTestVisible" Value="True"/>
                        <Setter TargetName="PART_PasswordShower" Property="CaretBrush" Value="Black"/>
                        <Setter TargetName="PART_PasswordShower" Property="Focusable" Value="True"/>
                        <Setter  Property="BorderBrush" Value="{StaticResource PasswordBox.Focused.BorderBrush}"/>
                    </DataTrigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter  Property="BorderBrush" Value="{StaticResource PasswordBox.MouseOver.BorderBrush}"/>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter  Property="BorderBrush" Value="{StaticResource PasswordBox.Focused.BorderBrush}"/>
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="PART_Root" Property="Opacity" Value="0.4"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ToggleButton：

<Style x:Key="PasswordBoxToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="Transparent" Margin="2">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock x:Name="txt" Grid.Column="1"
                                    HorizontalAlignment="Center" VerticalAlignment="Center"
                                    FontFamily="/ImageButtonTest01;component/Resources/#iconfont"
                                    Text="" FontSize="20"
                                    Foreground="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="txt" Property="Text" Value=""/>
                        <Setter TargetName="txt" Property="Foreground" Value="{StaticResource ComboToggleButton.Checked.Foreground}"/>
                    </Trigger>
 
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="txt" Property="Foreground" Value="{StaticResource ComboToggleButton.MouseMove.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用：

<PasswordBox x:Name="usrPassword3" Width="150" Height="40"
    Style="{StaticResource EyePasswordBox}"
                Margin="3"
                control:ControlAttachProperty.PlaceHolder="请输入密码"
                control:ControlAttachProperty.CornerRadius="10"
                IsEnabled="True"/>
<PasswordBox x:Name="usrPassword4" Width="150" Height="40"
    Style="{StaticResource EyePasswordBox}"
                Margin="3"
                control:ControlAttachProperty.PlaceHolder="请输入密码"
                IsEnabled="True"/>