Custom Animation with XCT Popup

A quick post today about XCT Popup and custom animation.

JS asked for help today on Gerald’s Discord Server

Let’s see how we can do this with only 3 steps 😎

Step 1 : Base.Color

Create your own Popup class ( MyOwnPopup.cs ) and change the base color to Transparent

	public class MyOwnPopup : Popup
	{
		public MyOwnPopup()
		{
			base.Color = Xamarin.Forms.Color.Transparent;
		}
	}

Step 2 : Create your pop like XCT popup ( MyPopupView.xaml )

<?xml version="1.0" encoding="utf-8" ?>
<popups:MyOwnPopup  xmlns:popups="clr-namespace:StarterKit.Views.Popups" xmlns:xct="http://xamarin.com/schemas/2020/toolkit" 
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="StarterKit.Views.Popups.MyPopupView"
            x:Name="ThePopup"
            Size="200,200"
            >
    <StackLayout BackgroundColor="White">
        <Label Text="Hello from popup!" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
        <Button Text="Close me" Clicked="Button_Clicked" />
    </StackLayout>
</popups:MyOwnPopup>

Step 3 :

Setup your animation !

public partial class MyPopupView
	{
		public MyPopupView()
		{
			InitializeComponent();
			Opened += MyPopupView_Opened;
		}

		private void MyPopupView_Opened(object sender, PopupOpenedEventArgs e)
		{
			Animation b = new Animation();
			b.Add(0, 1, new Animation(v => this.Opacity = v, 0, 1));
            //Do what you want here
			b.Commit(
				 owner: ThePopup,
				 name: "show",
				 length: 1200);
		}
		void Button_Clicked(System.Object sender, System.EventArgs e)
		{
			Dismiss(null);
		}
	}

And it’s done ! 👏

I don’t know if it’s the hard way to do it or the only way at the moment.
But … it works 🏅

⛔ I was wrong , it works but only for Android ….😒 ⛔

I’ll dig it to make it works with iOS 🚧