应用开发过程中经常会要求用户在textbox进行输入。例如:登陆,发布。

而一般没进行输入的时候我们都会简单的进行弹窗提示用户输入。 前阵子ios的同学搞了一个左右晃动的效果,觉得还不错,于是也搞了个出来。

为方便使用,自定义ShakeTextbox继承TextBox定义晃动、与正常情况的两种状态。

[TemplateVisualState(Name = ShakeTextbox.ShakeVisualState, GroupName = ShakeTextbox.ActivityVisualStateGroup)]
[TemplateVisualState(Name = ShakeTextbox.CommonVisualState, GroupName = ShakeTextbox.ActivityVisualStateGroup)]
public class ShakeTextbox:TextBox
{
private const string ActivityVisualStateGroup = "ActivityStates"; private const string ShakeVisualState = "Shake"; private const string CommonVisualState = "Common"; public void Shake()
{
VisualStateManager.GoToState(this, ShakeTextbox.ShakeVisualState, false);
atimer = new Timer(callback, null, , Timeout.Infinite);
}
Timer atimer;
void callback(object state)
{
Dispatcher.BeginInvoke(() =>
{
VisualStateManager.GoToState(this, ShakeTextbox.CommonVisualState, false);
});
atimer.Dispose();
}
}

app.xaml中写入ShakeTextbox的style。VisualState x:Name="Shake"实现左右晃动的动画效果

<Style TargetType="LocalControl:ShakeTextbox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="LocalControl:ShakeTextbox">
<Grid x:Name="grid" Background="Transparent" RenderTransformOrigin="0.5,0.5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ActivityStates">
<VisualState x:Name="Shake">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-9"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="8.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-7.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="6"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-4"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Common"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}"/>
<Border x:Name="ReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed"/>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

最后在页面中使用ShakeTextbox,只要判断ShakeTextbox.Test为空的时候调用ShakeTextbox自带的Shake方法即可。

demo 链接:http://files.cnblogs.com/fatlin/Test.rar

备注:由于本码农的开发工具是vs2013,低版本的vs目测打不开。

自定义textbox加入左右晃动效果的更多相关文章

  1. WPF自定义TextBox及ScrollViewer

    原文:WPF自定义TextBox及ScrollViewer 寒假过完,在家真心什么都做不了,可能年龄大了,再想以前那样能专心坐下来已经不行了.回来第一件事就是改了项目的一个bug,最近又新增了一个新的 ...

  2. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

  3. ios7自带的晃动效果

    ios7自带的晃动效果 by 伍雪颖 - (void)registerEffectForView:(UIView *)aView depth:(CGFloat)depth; { UIInterpola ...

  4. 继承control的自定义TextBox

    继承control的自定义TextBox 下面来介绍一下本人写的一个自定义的textbox,首先说一下写这个控件遇到的几个难点:第一.关联输入法:第二.画字符串和焦点线 先随便上两张效果图吧: 下面这 ...

  5. CSS3左右间歇晃动效果

    今天在做一个活动页面时,产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果,并且该效果是间歇执行的.我一想应该挺简单的吧,二话没说就答应了,谁知在真正实现的时候才发现还是有些许困难的.于是就在网 ...

  6. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片,上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...

  7. 自定义modal一个控制器的效果, presentViewController

    presentViewController 一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UI ...

  8. WPF用样式实现TextBox的虚拟提示效果

    [版权声明]本文为博主原创,未经允许禁止用作商业用途,如有转载请注明出处. 话说好多软件和网站都能实现虚拟提示,好吧这个名词是我自己起的,因为我也不知道这么形容这个效果. 效果描述:在TextBox没 ...

  9. WPF 自定义TextBox

    1.TextBox前加图标. 效果: <TextBox Width="300" Height="30" Style="{StaticResour ...

随机推荐

  1. ios上比较好用的Cydia插件

    1.iFile查看系统文件 2.KuaiDial归属地数据库 3.KuaiDial电话拨号助手 4.搜狗输入法 Photo Editor 房贷计算器

  2. POJ1651:Multiplication Puzzle(区间DP)

    Description The multiplication puzzle is played with a row of cards, each containing a single positi ...

  3. oc中的block使用心得

    typedef void (^ simpleBlock) (void); typedef double (^multiplyTwoValues)(double, double); typedef vo ...

  4. FormsAuthenticationTicket学习笔记

    FormsAuthenticationTicket ticket = , ), true, string.Format("{0}:{1}", "username" ...

  5. Hadoop学习笔记(3)——分布式环境搭建

    Hadoop学习笔记(3) ——分布式环境搭建 前面,我们已经在单机上把Hadoop运行起来了,但我们知道Hadoop支持分布式的,而它的优点就是在分布上突出的,所以我们得搭个环境模拟一下. 在这里, ...

  6. Windows8不联网直接安装.Net 3.5 Framework的方法

    把你的系统ISO加载到虚拟光驱或插入系统安装盘,找到X:\sources\sxs路径(X是你的光驱盘符).输入下面命令,盘符以D盘为例DISM /Online /Enable-Feature /Fea ...

  7. seajs第一节,seajs基本使用

    什么是seajs,它是干什么使用的,可以去网上搜索一下, 官网:http://seajs.org/docs/ 基本使用seajs <!DOCTYPE html> <html> ...

  8. Linux下MySQL主从同步配置

    Centos6.5 MySQL主从同步 MySQL版本5.6.25 主服务器:centos6.5 IP:192.168.1.101 从服务器:centos6.5 IP:192.168.1.102 一. ...

  9. Java操作文件夹的工具类

    Java操作文件夹的工具类 import java.io.File; public class DeleteDirectory { /** * 删除单个文件 * @param fileName 要删除 ...

  10. Python图片处理PIL/pillow/生成验证码/出现KeyError: 和The _imagingft C module is not installed

    最近在用Python开发自己的博客,需要用到Python生成验证码,当然肯定要用到Python的图形处理库PIL,因为我用的是windows. 所以在安装好pil之后就开始写,就按照题目所说出现了Th ...