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 🚧
I tried to apply it, however, the animation does not work on my side.
Do you have a sample code on github that we can reference for this?
Thanks in advance! great work!
I just updated the post.
Found some issue with opacity/animation on iOS ….
Need to spend more time on iOS version 😀
Atleast i found a commit where the code was pushed 🙂
https://github.com/jm-parent/StarterKit-Exakis/tree/127d6aad658d26a1e668444637a5fa497e4e9867