应用开发过程中经常会要求用户在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. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  2. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  3. PHP自动分表程序

    http://blog.zol.com.cn/2210/article_2209590.html /** * 分表程序 *  * @author Shen Xi shen.xi@zol.com.cn  ...

  4. 关于在Android设置全局变量随时获取context

    最实在的办法就是继承Application,在里面设置全局变量,因为Application是android的应用入口,并且运行周期贯穿整个程序运行. import android.app.Applic ...

  5. Python练习题 004:判断某日期是该年的第几天

    [Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? ---------------------------------------------- 这题竟然写了 28 行代码! ...

  6. [Java] HashMap的用法

    重点介绍HashMap.首先介绍一下什么是Map.在数组中我们是通过数组下标来对其内容索引的,而在Map中我们通过对象来对对象进行索引,用来索引的对象叫做key,其对应的对象叫做value.在下文中会 ...

  7. 【Android 界面效果38】android:inputType常用取值

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...

  8. 【求无向图的桥,有重边】ZOJ - 2588 Burning Bridges

    模板题——求割点与桥 题意,要使一个无向图不连通,输出必定要删掉的边的数量及其编号.求桥的裸题,可拿来练手. 套模板的时候注意本题两节点之间可能有多条边,而模板是不判重边的,所以直接套模板的话,会将重 ...

  9. poj动态规划列表

    [1]POJ 动态规划题目列表 容易: 1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 1189, 1208, 1276, 13 ...

  10. Python Opearte MS-SQL Use Pymssql

    看到很多的开源数据库会用到MySQL,Python同样也使用,但是我已经习惯使用图形化界面,操作感极强的MS-SQL 看到Python也提供MS-SQL连接方式,需要用到PyMssql. 在Windo ...