自定义textbox加入左右晃动效果

应用开发过程中经常会要求用户在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目测打不开。