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

来源：互联网发布：凯聪网络摄像头app 编辑：程序博客网时间：2024/05/29 16:52

其他资源：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"/>

阅读全文

0 0