应用开发过程中经常会要求用户在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. Golang学习 - errors 包

    ------------------------------------------------------------ Go 语言使用 error 类型来返回函数执行过程中遇到的错误,如果返回的 e ...

  2. ios----protocol, optional ,delegate

    ios----protocol,delegate     protocol——协议 协议是用来定义对象的属性,行为和用于回调的. 协议中有两个关键字@private和@optional,@privat ...

  3. 单表多次join的sql

    select o1.emp_name as 员工姓名1 , o2.emp_name as 员工姓名2 from tableTest join employee o1 on tabletest.[Emp ...

  4. js技巧总结

    很早以前看到的代码,同时加上一些我在项目中用到的代码,感觉很实用,在这里记录下来,怕忘记了,有些代码忘记在哪看到的了,所以就不贴网址了,感谢各位大神的分享!如果有其他的好的方法,欢迎留言~ 1.取整的 ...

  5. (转)Android学习笔记③——常用快捷键

    常用快捷键 代码跳转 描述:跳转是为了方便代码位置的定位,存在两种跳转:在定义处可以跳转到调用处,在调用处可以跳转到定义处. 快捷键:Cmd + 鼠标单击 方法间跳转 描述:从一个类方法跳转到临近的一 ...

  6. UIImage的简单用法和实际操作

    png,pdf不需要添加后缀名 jpg添加后缀名 存储 UIImagejpg contentMode属性 这个属性是用来设置图片的显示方式,如居中.居右,是否缩放等,有以下几个常量可供设定: UIVi ...

  7. XAMPP Apache服务器解析php页面汉字乱码的解决

    XAMPP 的Apache服务器默认未设置缺省字体,导致php网页中的汉字总是显示为乱码,每次要在浏览器中选择字符编码为“简体中文”才可正常显示. 实际上可以修改php.ini文件,找到“;defau ...

  8. javascript组件开发

    最近忙于重构项目,今天周末把在重构中的一些思想记记: 一.javascript的组件开发:基类的封装 由于这次重构项目需要对各种组件进行封装,并且这些组件的实现方式都差不多,所以想到对组件封装一个ba ...

  9. Differential Geometry之第一章欧式空间

    书籍:<微分几何>彭家贵 局部微分几何 第一章.欧式空间 1.1向量空间 (1)向量空间 a.向量空间是集合,集合中的元素需要定义加法和乘法运算.向量空间和n维数组空间R^n不是同一个概念 ...

  10. HTML5_用语义化标记重新定义博客

    HTML5文档的第一行便是文档类型声明,文档类型声明的作用有两个 一:验证器依据文档类型来判断采用何种验证规则去验证代码 二:文档类型声明能够强制IE6,IE7,IE8以“标准模式”渲染页面 1: & ...