【WPF】TextBox 、PasswordBox水印效果

标签：string Windows PasswordBox System 水印 using WPF public TextBox

两种方式可以实现 TextBox的水印效果

1、行为，详细请看

2、样式，下面主要介绍样式现实水印效果。

效果如下：

 

 

 

xaml完整代码

<Window x:Class="WpfApp05.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp05"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStyle="None" Background="Transparent" AllowsTransparency="True"
        ResizeMode="NoResize" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight">
    <Window.Resources>
        <Style TargetType="TextBox" x:Key="UserNameTextBoxStyle">
            <Setter Property="Height" Value="35"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}" 
                                    SnapsToDevicePixels="True"
                                    CornerRadius="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Border BorderBrush="#DDD" BorderThickness="0,0,1,0" Margin="0,8,5,8"/>
                                <TextBlock Text="请输入用户名" Grid.Column="1" VerticalAlignment="Center" Foreground="#BBB"
                                           Name="markText" Visibility="Collapsed" FontSize="12" Margin="2,0"/>

                                <Image Source="Resources/user.png" Width="20" Height="20"/>

                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false"
                                                  HorizontalScrollBarVisibility="Hidden" 
                                                  VerticalScrollBarVisibility="Hidden"
                                                  Grid.Column="1"
                                                  VerticalAlignment="Center" MinHeight="20"/>
                            </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="#FF7EB4EA"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                            </Trigger>
                            <DataTrigger Binding="{Binding Path=Text,RelativeSource={RelativeSource Mode=Self}}" Value="">
                                <Setter Property="Visibility" TargetName="markText" Value="Visible"/>
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="PasswordBox" x:Key="PasswordBoxStyle">
            <Setter Property="Height" Value="35"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="PasswordBox">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}" 
                                    SnapsToDevicePixels="True"
                                    CornerRadius="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Border BorderBrush="#DDD" BorderThickness="0,0,1,0" Margin="0,8,5,8"/>
                                <TextBlock Text="请输入密码" Grid.Column="1" VerticalAlignment="Center" Foreground="#BBB"
                                           Name="markText" Visibility="Collapsed" FontSize="12" Margin="2,0"/>

                                <Image Source="Resources/password.png" Width="20" Height="20"/>
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false"
                                                  HorizontalScrollBarVisibility="Hidden" 
                                                  VerticalScrollBarVisibility="Hidden"
                                                  Grid.Column="1"
                                                  VerticalAlignment="Center" MinHeight="20"/>
                            </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="#FF7EB4EA"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                            </Trigger>
                            <!--PasswordBox需要绑定到ViewModel才行-->
                            <DataTrigger Binding="{Binding Path=UserModel.Password}" Value="">
                                <Setter Property="Visibility" TargetName="markText" Value="Visible"/>
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation To="0" Duration="0:0:0.5"
                                     Storyboard.TargetName="tt"
                                     Storyboard.TargetProperty="X"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

    <Grid Width="780" Margin="5" Background="Transparent" MouseLeftButtonDown="Grid_MouseLeftButtonDown">
        <Border Background="#F7F9FA" Margin="0,6" HorizontalAlignment="Right" Width="360" BorderThickness="0"
                CornerRadius="5">
            <Border.RenderTransform>
                <TranslateTransform X="-330" x:Name="tt"/>
            </Border.RenderTransform>
            <Grid Margin="60,0,20,20">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>

                <Button HorizontalAlignment="Right" Width="30" Height="30" VerticalAlignment="Top" Background="Transparent"
                        BorderBrush="Transparent" Click="btnClose_Click">
                    
                </Button>
                <StackPanel Grid.Row="1">
                    <TextBlock Text="主标题" Foreground="#333" FontSize="22"/>
                    <TextBlock Text="副标题" FontSize="12" Foreground="#888" Margin="0,10,0,0"/>
                </StackPanel>

                <!--用户名-->
                <TextBox x:Name="txtUserName" Grid.Row="3" Style="{StaticResource UserNameTextBoxStyle}"/>
                <PasswordBox x:Name="pwd" Grid.Row="4" Style="{StaticResource PasswordBoxStyle}"/>

                <CheckBox Grid.Row="5" Content="记住登录信息" VerticalAlignment="Center" FontSize="10" VerticalContentAlignment="Center"/>
                <TextBlock Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Center">
                    <Hyperlink>忘记密码</Hyperlink>
                </TextBlock>
                <Button Content="登    录" Background="#FF104991" Foreground="White" Grid.Row="6" Height="30" Margin="0,8" BorderThickness="0" VerticalAlignment="Top"
                        Command="{Binding LoginCommand}"
                        CommandParameter="{Binding .,RelativeSource={RelativeSource AncestorType=Window}}"/>

                <TextBlock Text="Error Message" Foreground="Red" Grid.Row="7" TextWrapping="Wrap" LineHeight="23"
                           TextAlignment="Center"/>
            </Grid>
        </Border>

    </Grid>
</Window>

代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
    public class UserModel : NotifyBase
    {
        private string _userName;

        public string UserName
        {
            get { return _userName; }
            set
            {
                _userName = value;
                this.NotifyChanged();
            }
        }

        private string _password = "";

        public string Password
        {
            get { return _password; }
            set
            {
                _password = value;
                this.NotifyChanged();
            }
        }
    }
    public class NotifyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void NotifyChanged([CallerMemberName] string propName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }
    }
 
}

 

标签：string,Windows,PasswordBox,System,水印,using,WPF,public,TextBox
From： https://www.cnblogs.com/cdaniu/p/16587744.html