none
Shake the textbox RRS feed

Answers

  • Try the following:

    XAML:

            <TextBox x:Name="theTextBox" Grid.Column="2" Background="Red">
                <TextBox.RenderTransform>
                        <RotateTransform CenterX="50" CenterY="10"></RotateTransform>
                </TextBox.RenderTransform>
            </TextBox>
    

    Code behind:

            Dim theAnimation As New DoubleAnimation
            theAnimation.From = -30
            theAnimation.To = 30
            theAnimation.Duration = TimeSpan.FromSeconds(2)
            theAnimation.FillBehavior = FillBehavior.HoldEnd
            theAnimation.RepeatBehavior = RepeatBehavior.Forever
            Dim oTransform As RotateTransform = DirectCast(Me.theTextBox.RenderTransform, RotateTransform)
            oTransform.BeginAnimation(RotateTransform.AngleProperty, theAnimation)
    

    The one thing that is not shown is the CenterX and CenterY for the TextBox.  I just put values there but you will have to put the values that are the center of your TextBox.  


    Lloyd Sheen

    Monday, March 14, 2016 8:30 PM
  • You could animate the X or Y property of a TranslateTransform, e.g.:

    <TextBox Name="txtPassword" Margin="10">
                <TextBox.Resources>
                    <Storyboard x:Key="TestStoryboard">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" RepeatBehavior="5x">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-2"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </TextBox.Resources>
                <TextBox.RenderTransform>
                    <TranslateTransform X="50" Y="0" />
                </TextBox.RenderTransform>
            </TextBox>
    
            <Button Content="Login" Click="Button_Click" />
    

    private void Button_Click(object sender, RoutedEventArgs e)
            {
                if (txtPassword.Text != "correct password")
                {
                    Storyboard myStoryboard = (Storyboard)txtPassword.Resources["TestStoryboard"];
                    Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimationUsingKeyFrames, txtPassword);
                    myStoryboard.Begin();
                }
            }

    Or the Angle property of a RotateTransform:

            <TextBox Name="txtPassword" Margin="10" RenderTransformOrigin="0.5,0.5">
                <TextBox.Resources>
                    <Storyboard x:Key="TestStoryboard">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" AutoReverse="True" FillBehavior="Stop">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </TextBox.Resources>
                <TextBox.RenderTransform>
                    <RotateTransform  />
                </TextBox.RenderTransform>
            </TextBox>

    The above two samples should give you the idea.

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Monday, March 14, 2016 9:07 PM
  • You asked how to "shake" a TextBox and I gave you an example of how to do this. Now you are asking a completely different question. Please only ask ONE question per thread and then start a new thread if you have a new question. And when you do ask several questions in the same thread, please mark the answer/solutions to all of your questions as answer.

    >>I'd there a way to trigger this based on a Success flag?

    You could add an event handler to the PropertyChanged event of the view model in the view and trigger the animation when the Success property is set to false:

    public MainWindow()
            {
                InitializeComponent();
    
                
                var vm = new SampleViewModel();
                this.DataContext = vm;
    
                vm.PropertyChanged += (s, e) => 
                {
                    if(e.PropertyName == "Success" && vm.Success == false)
                    {
                        //trigger the animation
                        Storyboard myStoryboard = (Storyboard)txtPassword.Resources["TestStoryboard"];
                        Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimationUsingKeyFrames, txtPassword);
                        myStoryboard.Begin();
                    }
                };
    }
    

    Of course this requires the view model to implement the INotifyPropertyChanged interface as usual. The view model should not know anything about animations. It just sets the Success flag and then the view takes care of animating the TextBox.

    Hope that helps.

    Please remember to close your threads by marking all helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Monday, March 14, 2016 9:32 PM

All replies

  • To "shake" a control you would apply an Animation to the TextBox.  Because this is a pretty wide open topic can you give more details?

    Lloyd Sheen

    Monday, March 14, 2016 4:40 PM
  • Of course, if the user provides an invalid password I want to shake the textbox to inform them their login has failed rather than display a message

    Monday, March 14, 2016 4:43 PM
  • Sorry I'm not near my VS workstation.  What you would want to do is create a StoryBoard where you animate the rotation transform.   You could set up an animation that changes the angle to shake the textbox.  Sorry no sample but there are lots from a google search


    Lloyd Sheen

    Monday, March 14, 2016 6:01 PM
  • Try the following:

    XAML:

            <TextBox x:Name="theTextBox" Grid.Column="2" Background="Red">
                <TextBox.RenderTransform>
                        <RotateTransform CenterX="50" CenterY="10"></RotateTransform>
                </TextBox.RenderTransform>
            </TextBox>
    

    Code behind:

            Dim theAnimation As New DoubleAnimation
            theAnimation.From = -30
            theAnimation.To = 30
            theAnimation.Duration = TimeSpan.FromSeconds(2)
            theAnimation.FillBehavior = FillBehavior.HoldEnd
            theAnimation.RepeatBehavior = RepeatBehavior.Forever
            Dim oTransform As RotateTransform = DirectCast(Me.theTextBox.RenderTransform, RotateTransform)
            oTransform.BeginAnimation(RotateTransform.AngleProperty, theAnimation)
    

    The one thing that is not shown is the CenterX and CenterY for the TextBox.  I just put values there but you will have to put the values that are the center of your TextBox.  


    Lloyd Sheen

    Monday, March 14, 2016 8:30 PM
  • You could animate the X or Y property of a TranslateTransform, e.g.:

    <TextBox Name="txtPassword" Margin="10">
                <TextBox.Resources>
                    <Storyboard x:Key="TestStoryboard">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" RepeatBehavior="5x">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-2"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </TextBox.Resources>
                <TextBox.RenderTransform>
                    <TranslateTransform X="50" Y="0" />
                </TextBox.RenderTransform>
            </TextBox>
    
            <Button Content="Login" Click="Button_Click" />
    

    private void Button_Click(object sender, RoutedEventArgs e)
            {
                if (txtPassword.Text != "correct password")
                {
                    Storyboard myStoryboard = (Storyboard)txtPassword.Resources["TestStoryboard"];
                    Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimationUsingKeyFrames, txtPassword);
                    myStoryboard.Begin();
                }
            }

    Or the Angle property of a RotateTransform:

            <TextBox Name="txtPassword" Margin="10" RenderTransformOrigin="0.5,0.5">
                <TextBox.Resources>
                    <Storyboard x:Key="TestStoryboard">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" AutoReverse="True" FillBehavior="Stop">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </TextBox.Resources>
                <TextBox.RenderTransform>
                    <RotateTransform  />
                </TextBox.RenderTransform>
            </TextBox>

    The above two samples should give you the idea.

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Monday, March 14, 2016 9:07 PM
  • Hi Magnus and thanks, the validation would be done in the VM, I'd there a way to trigger this based on a Success flag?
    Monday, March 14, 2016 9:14 PM
  • You asked how to "shake" a TextBox and I gave you an example of how to do this. Now you are asking a completely different question. Please only ask ONE question per thread and then start a new thread if you have a new question. And when you do ask several questions in the same thread, please mark the answer/solutions to all of your questions as answer.

    >>I'd there a way to trigger this based on a Success flag?

    You could add an event handler to the PropertyChanged event of the view model in the view and trigger the animation when the Success property is set to false:

    public MainWindow()
            {
                InitializeComponent();
    
                
                var vm = new SampleViewModel();
                this.DataContext = vm;
    
                vm.PropertyChanged += (s, e) => 
                {
                    if(e.PropertyName == "Success" && vm.Success == false)
                    {
                        //trigger the animation
                        Storyboard myStoryboard = (Storyboard)txtPassword.Resources["TestStoryboard"];
                        Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimationUsingKeyFrames, txtPassword);
                        myStoryboard.Begin();
                    }
                };
    }
    

    Of course this requires the view model to implement the INotifyPropertyChanged interface as usual. The view model should not know anything about animations. It just sets the Success flag and then the view takes care of animating the TextBox.

    Hope that helps.

    Please remember to close your threads by marking all helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Monday, March 14, 2016 9:32 PM
  • Thanks Magnus
    Tuesday, March 15, 2016 8:50 AM
  • Hi,

    How do I apply this animation to a control within a data template?

    <DataTemplate x:Key="TextAnswerDataTemplate" x:DataType="models:GameAnswer">           
                <Grid VerticalAlignment="Center" Width="300" Height="170" Background="#FEC70D" Padding="10" CornerRadius="3">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.Resources>
                                <Storyboard x:Key="ShakeStoryboard">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" RepeatBehavior="5x">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-2"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </Grid.Resources>
                            <Grid.RenderTransform>
                                <TranslateTransform X="50" Y="0" />
                            </Grid.RenderTransform>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" BorderBrush="White" BorderThickness="2" CornerRadius="20" Padding="15,5,15,5">
                            <TextBlock Text="{Binding AnswerNo}" Foreground="White"/>
                        </Border>
                    </Grid>
                    <WebView Grid.Row="1" util:WebViewCustomProperties.DragDropString="{Binding AnswerTextData}" ScriptNotify="TextAns_webView_ScriptNotify" DefaultBackgroundColor="Red" ScrollViewer.VerticalScrollMode="Disabled" VerticalAlignment="Center"/>
                </Grid>
            </DataTemplate>
    I applied this animation as above. But I can't access the Storyboard from code behind. Can you tell me a way to do that?

    Wednesday, January 22, 2020 5:36 AM