(616) 371-1037

[email protected]

Xamarin.Forms Fancy Animations

April 19, 2018 - Yuriy Holembyovskyy


Xamarin.Forms includes its own animation infrastructure that allows for easy creation of simple animations, while also being versatile enough to create complex animations. Let’s take a look how we can reproduce some popular animations with Xamarin.Forms built-in infrastructure.

The first animation that I want to reproduce is the nice entry shaking animation on the macOS X lock screen when you enter an incorrect password.

Shake Animation

The following code example demonstrates the TranslateTo method to reproduce the shake animation:

uint timeout = 50;
await MyEntry.TranslateTo(-15, 0, timeout);
await MyEntry.TranslateTo(15, 0, timeout);
await MyEntry.TranslateTo(-10, 0, timeout);
await MyEntry.TranslateTo(10, 0, timeout);
await MyEntry.TranslateTo(-5, 0, timeout);
await MyEntry.TranslateTo(5, 0, timeout);
MyEntry.TranslationX = 0;

Lets take a look what we get with this code. The following video shows shaking on each platform:

Flip Animation

Another often used animation is the flip animation. During it we can replace images, colors or even controls. We can achieve this with 3 steps:

  1. Rotate the control to 90 (-90 for Right to Left) degrees so it the width becomes zero pixels
  2. Replace it with the other control previously rotated to 270 (-270)
  3. Rotate the new control to 360 (-360) and setup the rotation to 0.

I will flip one button replacing it with another button with a different background color.  To reproduce the flip animation we will use RotateYTo method:

Here we go

GreenButton.RotationY = -270;
await RedButton.RotateYTo(-90, timeout);
RedButton.IsVisible = false;
GreenButton.IsVisible = true;
await GreenButton.RotateYTo(-360, timeout);
GreenButton.RotationY = 0;

Let’s take a look at what we got


Nice, but to me it looks very “linear”. That’s because we have skipped the additional parameter called “easing function”. Omitting the third parameter when creating an animation causes the animation to use the default Linear easing function, which produces a linear velocity. Let’s make it more fancy with smooth accelerations. For this we will pass the easing functions: Easing.SpringIn and Easing.SpringOut.

await RedButton.RotateYTo(-90, timeout, Easing.SpringIn);
await GreenButton.RotateYTo(-360, timeout, Easing.SpringOut);

Let’s take a look what we got now after minor changes:

Collapse/Expand animation

The last example that I want to show you is the Collapse/Expand animation that is often used in different types of accordion controls. Let’s take a look how we can achieve this with LayoutTo function. We will collapse the control’s height (Y-axis) but you can easily collapse the width (X-axis).

MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn)
MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut)

Let’s take a look at our results

As you possibly have noticed we also got the “Arrow” rotating  and running simultaneously. This is called Composite Animations. Composite animations can be created by mixing awaited and non-awaited animations and using the Task.WhenAny and Task.WhenAll methods to run multiple asynchronous methods concurrently.

await Task.WhenAll(new List<Task> {MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut), MyButton.RotateTo(180, 500, Easing.SpringOut)});
await Task.WhenAll(new List<Task>{MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn),MyButton.RotateTo(360, 500, Easing.SpringOut)});

Wrapping Up

The examples in the blog demonstrate how easily with a few lines of code we can get nice smooth hardware-accelerated animations on 3 major platforms. Sample animations source code is available on github.

Yuriy Holembyovskyy

9 thoughts on “Xamarin.Forms Fancy Animations

  • XF_Learner

    November 10, 2018 at 12:26 pm

    Hi Yuriy, Thanks for sharing the detail. I am using 3rd animation solution to create a according view, i just replaced BoxView with Frame as shown below. But like BoxView Frame is not getting collapsed completely. Can you please guide me how to achieve accordian view with contents?


    • Yuriy Holembyovskyy

      November 10, 2018 at 2:48 pm

      Sure. Can you share your code sample?

      • XF_Learner

        November 10, 2018 at 9:07 pm

        Code is same as you shared on Github (FancyAnimations – LayoutPage.xaml) , I just replaced BoxView (line no 14 in LayoutPage.xaml) with below code. Other than this i did not change anything. LayoutPage.xaml.cs is also same as yours.

        I am testing it for UWP platform, though it is expanding/collapsing but Frame is not collapsing to height 0, i still see it under Header with some Height (~5-8). I want it to completely collapse/disappear. Want to implement same in ListView . Any suggestion will be helpful, I am completely new to XF and found it quite interesting.
        Once again thank you so much.

        • XF_Learner

          November 10, 2018 at 9:15 pm

          Somehow XAML code is not appearing in comments, but instead of BoxView I used Frame like:
          Frame Name=MyContent HeightRequest=300
          Label 1
          Label 2

          That’s the only XAML portion I am replacing in your code.

  • Yuriy Holembyovskyy

    November 12, 2018 at 4:54 am

    I have replaced BoxView with Frame and labels inside it.
    And it has collapsed completely so I think problem is that you hadn’t removed some Margins or Paddings

  • XF_Learner

    November 12, 2018 at 11:35 pm

    Hi Yuriy, Thank you so much for your time.
    Margin and Padding are already set to 0. I tested below three scenarios. Only first scenario using ScrollView is working fine on Windows UWP. So for now I can use ScrollView.
    Just sharing with you all three cases. Really appreciate that you spent time assisting me.

    Case 1 – Used ScrollView. Working fine on Android Emulator and Windows UWP

    ScrollView x:Name=MyContent HeightRequest=300 Padding=0 Margin=0 BackgroundColor=Yellow
    -FlexLayout Direction=Column” JustifyContent=SpaceEvenly
    –Label 1
    — Label 2

    Case 2 – Used StackLayout. Working on Android Emulator and Windows UWP but even if Yellow expandable area collapse completely the first two Label still remains on the screen. Even if we put Image at first place, some portion of image still remains on screen.

    StackLayout x:Name=MyContent BackgroundColor=Yellow Padding=0 Margin=0 HeightRequest=300
    -ScrollView Padding=0 Margin=0 VerticalScrollBarVisibility=Never
    –StackLayout Padding=0 Margin=0
    —Label 1
    —Label 2

    Case 3 – Used Frame. Working fine on Android Emulator but on Windows UWP, Yellow Frame area not collapsed completely, Yellow expandable area still shows up (~height of 1-2 rows, sometimes even this height vary, sometimes one row, and sometimes two rows).

    Frame x:Name=MyContent BackgroundColor=Yellow HeightRequest=300 Margin=0 Padding=0 CornerRadius=0
    -ScrollView Margin=0″ Padding=0″
    –StackLayout Margin=0 Padding=0
    —Label 1
    —Label 2

    • Yuriy Holembyovskyy

      November 13, 2018 at 3:46 am

      I am glad that you have found solution. Also there are ‘Spacing’ property for StackLayout and FlexLayout. You can try to play with it if you will need to replace Scrollview with these controls

  • Mike

    February 11, 2019 at 2:45 am

    Thanks man.
    Works well. I use the collapse idea with menus to hide/un-hide as transition otherwise images will ‘blink’ with ListView, which is annoying …


  • Ranjith

    March 20, 2020 at 7:47 pm

    Thank you for the simple solution. I used your code to do both with frame and box view, it is collapsing. The only problem is the controls after this control in the page is not moving upwards and not occupying the space. How to solve this?


Leave a comment

Your email address will not be published. Required fields are marked *