Shifting a Button Animation using System.Windows.Media.Animation

Question

I have a Button in my Window, how do I use code behind in C# to go about animating it to shift to the left by lets say 100 pixels once I click on it.

private void myButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
    // TODO: Add event handler implementation here.
    DoubleAnimation _DoubleAnimation = new DoubleAnimation();
    _DoubleAnimation.From = 0;
    _DoubleAnimation.To = 100;
    _DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

    myButton.BeginAnimation(Button.RenderTransformOriginProperty, _DoubleAnimation);
}

Answer 1

If you want to change the size, in this case must be WidthProperty in Animation:

myButton.BeginAnimation(Button.WidthProperty, _DoubleAnimation);

To avoid sharp transition in the Animation, you must explicitly set the Width of the Button:

<Button Name="myButton" 
        Width="30" 
        Content="Test"  
        Click="myButton_Click" />

And in Animation specify only To value:

private void myButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
    DoubleAnimation _DoubleAnimation = new DoubleAnimation();
    _DoubleAnimation.To = 100;
    _DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

    myButton.BeginAnimation(Button.WidthProperty, _DoubleAnimation);
}

If you want to shift Button in Animation, you can use ThicknessAnimation:

Thanks for the remark to @Rohit Vats

private void myButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
    ThicknessAnimation animation = new ThicknessAnimation(new Thickness(0), 
                                                          new Thickness(100, 0, 0, 0), 
                                                          new Duration(new TimeSpan(0, 0, 1)),
                                                          FillBehavior.HoldEnd);

    myButton.BeginAnimation(Button.MarginProperty, animation);
 }

Answer 2

If you want to shift button to left by 100 pixels, you have to set margin to -100 of last value which obviously can't be achieved by DoubleAnimation since it can animate only double values whereas Margin is of type Thickness.

You can achieved that using Storyboard:

Storyboard myStoryboard = new Storyboard();
ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
animation.BeginTime = TimeSpan.FromSeconds(0);
Storyboard.SetTarget(animation, myButton);
Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));
double left = myButton.Margin.Left - 100;
DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame(new Thickness(left,
                                             0, 0, 0), TimeSpan.FromSeconds(1));
animation.KeyFrames.Add(keyFrame);
myStoryboard.Children.Add(animation);
myStoryboard.Begin();

---

For smooth transition what you can do is add multiple key frames and play them in interval of 0.1 secs. In case you need more smooth transition, break it down to further smaller intervals.

This is how you do it:

Storyboard myStoryboard = new Storyboard();
ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
animation.BeginTime = TimeSpan.FromSeconds(0);
Storyboard.SetTarget(animation, myButton);
Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));
for (int count = 1; count < 21; count++)
{
   double left = myButton.Margin.Left - (5 * count);
   DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame(new
                   Thickness(left, 0, 0, 0), TimeSpan.FromSeconds(0.05 * count));
   animation.KeyFrames.Add(keyFrame);
}
myStoryboard.Children.Add(animation);
myStoryboard.Begin();

Answer 3

It is depends how you have placed the Button on the page. If you want to layout elements by coordinates (not recommended) you can place the button on Canvas. Then you can use code like this:

<Canvas>
    <Button Canvas.Left="100" Canvas.Top="100" Name="btnOk" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Click="BtnOk_OnClick">Ok</Button>
</Canvas>

and code-behind:

var doubleAnimation = new DoubleAnimation();
double left = Canvas.GetLeft(btnOk);
doubleAnimation.From = left;
doubleAnimation.To = left - 100;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
btnOk.BeginAnimation(Canvas.LeftProperty, doubleAnimation);