星空网 > 软件开发 > ASP.net

WPF之TextBox和PasswordBox水印效果

在博客园里看到了好多关于文本框和密码框水印效果的文章,今天有空也来实现一把,最终效果图如下:

WPF之TextBox和PasswordBox水印效果

文本框的话,稍微好一点直接可以绑定它的Text属性,因为他是个依赖属性,我用了二种方式来实现水印效果:触发器和数据绑定的形式;

一、触发器方式:

<!--触发器的形式进行水印效果-->  <Style x:Key="TxbTrigger" TargetType="TextBox" BasedOn="{StaticResource TxbBase}">    <Setter Property="Template">      <Setter.Value>        <ControlTemplate TargetType="TextBox">          <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">            <Grid>              <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>              <TextBlock x:Name="WaterMark" Focusable="False" Visibility="Collapsed" Text="{TemplateBinding Tag}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5"/>            </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>            <Trigger Property="Text" Value="">              <Setter Property="Visibility" TargetName="WaterMark" Value="Visible"/>            </Trigger>          </ControlTemplate.Triggers>        </ControlTemplate>      </Setter.Value>    </Setter>  </Style>

二、数据绑定方式

<!--绑定和转换器的形式进行水印效果-->  <Style x:Key="TxbBing" TargetType="TextBox" BasedOn="{StaticResource TxbBase}">    <Setter Property="Template">      <Setter.Value>        <ControlTemplate TargetType="TextBox">          <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">            <Grid>              <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>              <TextBlock x:Name="WaterMark" Focusable="False" Visibility="{TemplateBinding Text,Converter={StaticResource TextToVisibility}}" Text="{TemplateBinding Tag}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5"/>            </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>          </ControlTemplate.Triggers>        </ControlTemplate>      </Setter.Value>    </Setter>  </Style>

 

密码框的水印效果就稍微麻烦一点了,因为这个Password它不是依赖属性,所以不能像TextBox的Text进行绑定操作;我这边是通过附加属性的形式进行实现;

代码如下:

 /// <summary>  /// PasswordBox添加水印辅助类  /// </summary>  public class PasswordBoxWaterMark : DependencyObject  {    public static bool GetIsMonitoring(DependencyObject obj)    {      return (bool)obj.GetValue(IsMonitoringProperty);    }    public static void SetIsMonitoring(DependencyObject obj, bool value)    {      obj.SetValue(IsMonitoringProperty, value);    }    public static readonly DependencyProperty IsMonitoringProperty =      DependencyProperty.RegisterAttached("IsMonitoring", typeof(bool), typeof(PasswordBoxWaterMark), new UIPropertyMetadata(false, OnIsMonitoringChanged));    public static int GetPasswordLength(DependencyObject obj)    {      return (int)obj.GetValue(PasswordLengthProperty);    }    public static void SetPasswordLength(DependencyObject obj, int value)    {      obj.SetValue(PasswordLengthProperty, value);    }    public static readonly DependencyProperty PasswordLengthProperty =      DependencyProperty.RegisterAttached("PasswordLength", typeof(int), typeof(PasswordBoxWaterMark), new UIPropertyMetadata(0));    private static void OnIsMonitoringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)    {      var pb = d as PasswordBox;      if (pb == null)      {        return;      }      if ((bool)e.NewValue)      {        pb.PasswordChanged += PasswordChanged;      }      else      {        pb.PasswordChanged -= PasswordChanged;      }    }    private static void PasswordChanged(object sender, RoutedEventArgs e)    {      var pb = sender as PasswordBox;      if (pb == null)      {        return;      }      SetPasswordLength(pb, pb.Password.Length);    }  }

PasswordBox的样式如下:

<Style TargetType="PasswordBox">    <Setter Property="Foreground" Value="Red"/>    <Setter Property="FontSize" Value="20"/>    <!--光标的颜色-->    <Setter Property="CaretBrush" Value="Green"/>    <Setter Property="Core:PasswordBoxWaterMark.IsMonitoring" Value="true"/>    <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">            <Grid>              <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>              <TextBlock x:Name="WaterMark" Focusable="False" Visibility="Collapsed" Text="{TemplateBinding Tag}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.5"/>            </Grid>          </Border>          <ControlTemplate.Triggers>            <Trigger Property="Core:PasswordBoxWaterMark.PasswordLength" Value="0">              <Setter TargetName="WaterMark" Property="Visibility" Value="Visible"/>            </Trigger>          </ControlTemplate.Triggers>        </ControlTemplate>      </Setter.Value>    </Setter>  </Style>

源码如下:Demo.Zip




原标题:WPF之TextBox和PasswordBox水印效果

关键词:wpf

wpf
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境电商物流怎么做?听听亚马逊年销2亿的卖家怎么说:https://www.ikjzd.com/articles/1668154865814806529
突破竞争壁垒:独立站如何实现有效的品牌差异化?:https://www.ikjzd.com/articles/1668166955347243010
亚马逊跨境电商大商品成本太高?低价小商品也大有潜力!:https://www.ikjzd.com/articles/1668172723786117121
亚马逊常用产品的外贸认证有哪些:https://www.ikjzd.com/articles/1668177471608221698
估值30亿美金!盘点童装品牌PatPat如何靠精细化营销打动欧美宝妈:https://www.ikjzd.com/articles/1668178790875602946
跨境周报|亚马逊疑似“百亿补贴”?Temu亏损但继续烧钱:https://www.ikjzd.com/articles/1668181944036519937
成都极地海洋公园攻略玩哪些项目最划算?:https://www.vstour.cn/a/365173.html
深圳玉龙公园簕杜鹃花海花期时间+门票+交通:https://www.vstour.cn/a/365174.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流