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