XamGirl

I recently developed a simple control to transition between two cards using an overlay animation in Xamarin Forms. In this post, I want to share the result and also explain how I achieved each of my requirements.

Let’s start

When creating a custom control the first thing that comes to my mind is to separate the requirements, to make sure I achieve them when finishing it.

Here’s my list of requirements:

• The card needs to be one over the other
• Be able to add any view to it (Not just images)
• When tapping on a Card it should be raised to the Front
• Should have a transition animation

Let’s see how I resolved each one of them:

The card needs to be one over the other

The first thing I did was to create a ContentView for my control code.

This control has a Grid so you can put one card on top of the other.

Be able to add any view to it (Not just images)

Created two bindable properties, FrontView and BackView and the type of them is View.

When tapping on a Card it should be raised to the Front

To achieve this used the RaiseChild property which sends the view to the front in the parent layout.

Should have a transition animation

The last step is to add the transition animation. I did this by combining Fade/Translate/Scale animations and apply them to the Front/back views.

Copy the full source code control here.

Use the control on XAML

The XAML is pretty simple, I just need to set the BackView and FrontView.

Result

• 

• 

NOTE: Many improvements can still be made, starting with supporting multiple cards, different types of animations, etc., but the purpose of this article is just to cover a simple transition control of two cards, those improvements can be achieved later.

That’s all for now. You can check the full source code here.

Happy coding!