自定义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, 700, 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 链接：https://files.cnblogs.com/fatlin/Test.rar

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