Cool transition animations with Shapes in Xamarin.Forms
Tags: xamarin, xamarinforms, animations, csharp
Published: 2021-06-09 14:45:12

The official release of Xamarin.Forms 4.7, included for the first time the [Shapes](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/) control, under the *experimental* flag. Fast-forward to the present, in the actual version (*v5.0.0.2012*), things change a lot, *Shapes* left behind the experimental flag, and now it’s pretty stable on all supported platforms (Android, iOS, UWP, WPF and macOS).

Shapes it’s a really powerful control that allow us to easily draw any shape on screen, like [circles](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/ellipse), [lines](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/line), [rectangles](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/rectangle), [polygons](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/polygon) and even take values from some svg image file and paste it by using the [paths](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/path).
We could use this control to create graphics, good-looking backgrounds, innovative UI controls, etc., as can be seen on [this great article](https://devblogs.microsoft.com/xamarin/xamarin-forms-shapes-and-paths/) by **David Ortinau**.

![UI samples created with Shapes](https://miro.medium.com/max/576/1*LkY1y9a3bOxucKUS82opMg.jpeg)

Another really powerful tool provided by Xamarin.Forms are [Animations](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/), that help us to bring life to our application by using default controls or create our own custom animations.

---

##Animating shapes!
In order to make our application outstand the others, we should create something really impressive, and putting shapes with animations together seems like a good start. Also, let’s add navigation between pages into the mix.

Let’s face it, Xamarin.Forms built-in transition animation it’s boring and the [SharedTransitions](https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions) plugin created by **Giampaolo Gabba** it’s really neat, but it just contains common transitions widely used nowadays in most applications.
We are going to create some awesome transition animations using shapes!

Before starting, some considerations for this post:
* Despite Shapes being available for UWP, WPF and macOS, we will stick to Android and iOS only.
* We are going to centralize most of the navigations on the MainPage.
* We will remove the original toolbar and replace it with a fake one, in order to present the animations on full screen.
* These are just samples, not actual production code.

###Let’s get started!
For all our pages we will use a *Grid* control to wrap the entire page content, in order to take advantage of the overlap property.
Also, we will set `x:Name` to the toolbar and content to make them disappear during the transition.

Here we are going to create our first shape, in this case, we want a big red arrow pointing to the right.
Let’s use a *Path* control. While checking the [markup syntax](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/path-markup-syntax) we can see that `Data` field basically needs: `M` to determine the start of the Path, next to the starting `X,Y` points, then with `L` we define the line and the several `X,Y` points that it travels and finally `Z` to signal the end of the path.
We make it invisible and hide it on the left side of the screen.

{% gist https://gist.github.com/FabriBertani/8df152d21ef0f755829bfc2c7db7b256 %}

In the button click handler of our code behind, we just call an async method on the main thread that will run our [custom animation](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/custom).
In the animation, we will turn the shape’s visibility on and make it move from left to right, while we fade off our toolbar and content. This whole animation will last 350 milliseconds.
As our animation is committed synchronously, we need to add a delay a bit longer than the animation and then finally run the navigation to the next page.

{% gist https://gist.github.com/FabriBertani/2f235d93de92e71dd1731f293dfc261b %}

Let’s check the result:

![Left to right arrow shape transition animation](https://miro.medium.com/max/456/1*9qWjOxglIv84HyobwZBlvw.gif)

Our *ArrowNavigationPage* will be almost the same as the *MainPage*, but the arrow will be pointing in the opposite direction.

{% gist https://gist.github.com/FabriBertani/9523b5aa4022294d939b686e3d2d72f1 %}

And code behind will be almost the same, but also add an override for the Android back button.

{% gist https://gist.github.com/FabriBertani/3692c1d1d6d741f7c74a7eb01702195f %}

And this will be the result of the forward and backward navigation.

![Animation of transition from left to right and backwards](https://miro.medium.com/max/456/1*w8KofpcVpOCgtTmVYi7JIg.gif)

---

For our second page navigation transition, let’s create some overlapping shapes.

{% gist https://gist.github.com/FabriBertani/7a7a2244bdb1beb87f7057aec2d31f94 %}

And let’s make it move from bottom to top

{% gist https://gist.github.com/FabriBertani/5763bce088ca3e11153b8aad8bab28b1 %}

The result:

![Bottom to top arrow shape transition animation](https://miro.medium.com/max/456/1*lZjMFcZ5_m0RRMJjBHyloA.gif)

Now, for the return animation, let’s get a little more creative and create two circles using the [Ellipse](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/ellipse), one at the left top corner of our screen and the other at the right bottom.

{% gist https://gist.github.com/FabriBertani/3ee4eda91bd93eaedd65aa5022952acf %}

We will grow a circle from the bottom right to return to its original size at the top left

{% gist https://gist.github.com/FabriBertani/84037fe5ccb41ffbffbf02cda0973453 %}

The result:

![Circle shape transition animation](https://miro.medium.com/max/448/1*yxylmdU4hCojcv3nB5pGyg.gif)

---

Continuing with our “creative rush”, let’s create a multi-page transition animation, that’s mean an animation that starts on one screen and finish on the other one.

For that reason, on the Main Page we add some shapes hidden on both sides of the screen.

{% gist https://gist.github.com/FabriBertani/3c5cf8b7c4a02ed32cc99db6753ac761 %}

In the code behind, we will create an animation that closes the pane shapes we made and navigate the next page.

{% gist https://gist.github.com/FabriBertani/04643f229830ecd55894ac2e25c30c5f %}

On the next page, we start with the same panes shapes, but they must start closed.

{% gist https://gist.github.com/FabriBertani/b1aa1ef2feeac6d6acec268b76b4cbff %}

In the code behind, we override the `OnAppearing` method and execute the panes open animation.

{% gist https://gist.github.com/FabriBertani/89408e36d52cc1fc6ac6eeed4f48d929 %}

The result:

![Left and right pane shapes transition animation](https://miro.medium.com/max/456/1*okJLlC5iJR8euR1wakV5CQ.gif)

For the return animation, let’s make something more interesting.

Although some shapes are simple to make with paths, others won’t or would require much time to make, so we will use SVG path data for that.
If you are lucky enough, maybe you have a UI designer on your team, you could go and ask them to make great designs that you can use.
If not, you can use some tool like [Figma](https://www.figma.com/) to create and export SVG code:

Create your shape on Figma, then right-click on it, look for the *Copy/Paste* section and select `Copy as SVG`.

![Figma contextual menu](https://miro.medium.com/max/539/1*CV5tWR1vct4IfORKc2xAfg.jpeg)

Paste it on your editor and take the content inside the `d` tag

![svg code from Figma shape](https://miro.medium.com/max/700/1*47FHaUoQjLZ-gO3he9WmLQ.jpeg)

Now let’s add all the shapes to our screen:

{% gist https://gist.github.com/FabriBertani/ee9c58f3c1f6d0640df2b6ce56dedca6 %}

Remember that we need to add the same on the Main Page, but also need to say that we only want to fire that animation when return from a specific page, so we simply add a flag:

{% gist https://gist.github.com/FabriBertani/23a08f7db8a34c2460ebe269d8672ad3 %}

Now we can add the rest of the code *PadlockTransitionAnimationShapes* code behind for the return animation.

{% gist https://gist.github.com/FabriBertani/8a7747e2dc8471d4b9a879939f028fab %}

The result:

![Padlock shape transition animation](https://miro.medium.com/max/450/1*b--Jx67zSMv-Ia1F1KhAOA.gif)

---

For our last example, let’s stress the engine with lots of shapes and animations running on the screen. For that reason, we will make a wild pokemon appear as transition animation!

For this example we add the pokemon as a png image, but you can look at some svg pokemon image to take the path 😉.

These will be our shapes on the MainPage

{% gist https://gist.github.com/FabriBertani/c19d4a3da474c5b67e70e44335aefff2 %}

And the code behind’s animation:

{% gist https://gist.github.com/FabriBertani/370dde6b61333119ca5a143b6fea2db2 %}

Result:

![Pokemon shapes transition animation](https://miro.medium.com/max/460/1*Jxc-0i34HpJIQX0qBfRgMA.gif)

---

###That’s all folks!

As I said before, these are just samples of how we can exploit our creativity and push the boundaries of Xamarin.Forms.

If this post helps you to create amazing transition animations or you want to showcase the things you’ve done, please leave a sample repo in the comments and will be added to this post later.

Also, you can see a complete sample repository for this post on GitHub. 👇

{% github https://github.com/FabriBertani/XFShapeAnimatedTransitions %}

Thanks for reading and keep coding! 😁