Popup appearing/disappearing animation

[tranb3r]

Hi,
Is there a way to animate a Popup (on appearing or disappearing)?
The initial popup proposal #114 had two BindableProperty for appearing/disappearing Animation, but I can't find them in the final implementation.
For this reason I'm using Mopups instead of MCT's Popup.

[tranb3r]

Also, it looks like there is no dimming effect on android (for the page behind the popup).
Is there a way to specify a background color or opacity?

[CliffAgius]

Closed as per the Community Stand-up discussion here: https://youtu.be/N9wMcBP4jtg?t=2889 where it was agreed that New Features need to get above 7 upvotes within 6 months to progress to being reviewed by the maintainers.

If you feel this is being closed in error please let us know and we can re-open.

[tranb3r]

@CliffAgius Why do you close my question instead of answering it?

[CliffAgius]

It read to me as a Feature Request which didn't get the community support to progress to being discussed by the maintainers on the monthly meet-up. However reading again I see you mean as a question rather than a request. @bijington was the lead on the Popup Service he may know if there was a reason this was not implemented.

I have re-opened the discussion for now.

[bijington]

I do not know why it didn't make it in. I believe @pictos was the main person behind the Popup migration effort in the first place. I suspect there would have been some reason which I can try to look through the history if he can't recall

[pictos]

what do you mean by you can't animate the Popup? xP

So, being very specific you can't animate the Popup because it's an Element, but you can animate its Content (that's a View).

Here's the code snippet that makes it work

async void Button_Clicked(object? sender, EventArgs e)
{
	Debug.Assert(Content is not null);

	await this.Content.RelRotateTo(Content.Rotation + 360, 2000, Easing.Linear);
	await this.Content.FadeTo(0, 2000, Easing.Linear);


	await CloseAsync("Close button tapped", CancellationToken.None);
}

Screenbits.2024-09-05_005339.mp4

[tranb3r]

This is not an appearing/disappearing animation for the popup.
This feature was in the initial design proposal. Why isn't available it in the final implementation?

[bijington]

It could be that we missed this or decided that we wouldn't due to the fact that Popup inherits from Element as @pictos mentioned.

If you wanted to provide a follow up PR that introduces this functionality then I would be happy to review it

[pictos]

@tranb3r what would be an appearing/disappearing animation?

This works like a modal page, where you can animate it and call the pop method to remove it from stack.

[tranb3r]

@tranb3r what would be an appearing/disappearing animation?

All I can say is that it was part of the initial design.
And Mopups has it.
Hence my question...

This works like a modal page, where you can animate it and call the pop method to remove it from stack.

I now understand that the popup can be animated on appearing using the Loaded event.
@stephenquan has provided the code sample that I need.

[stephenquan]

To reinforce what @pictos mentioned, you can animate the content of a Popup. Here's an example where I use a bottom sheet-like entry and exit animation.

• Popup.Color="Transparent"
• Popup.VerticalOptions="End"
• A placeholder 600x200 Grid
• An offscreen Border by setting TranslationY="200"
• A Loaded event that animates TranslationY from 200 to 0
• A Done Button that animates TranslationY from 0 to 200

<!-- AnimPopup.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
    x:Class="Maui.StackOverflow.AnimPopup"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    VerticalOptions="End"
    Color="Transparent">
    <Grid HeightRequest="200" WidthRequest="600">
        <Border
            x:Name="content"
            BackgroundColor="#ffe"
            Loaded="OnAnimateEntry"
            StrokeShape="RoundRectangle 10, 10, 0, 0"
            TranslationY="200">
            <VerticalStackLayout Padding="10" Spacing="20" VerticalOptions="Center">
                <Label HorizontalOptions="Center" Text="Hello, World!" />
                <Button Clicked="OnAnimateExit" HorizontalOptions="Center" Text="Done" />
            </VerticalStackLayout>
        </Border>
    </Grid>
</toolkit:Popup>

// AnimPopup.xaml.cs
using CommunityToolkit.Maui.Views;
namespace Maui.StackOverflow;
public partial class AnimPopup : Popup
{
    public AnimPopup()
    {
        InitializeComponent();
    }
    async void OnAnimateEntry(object sender, EventArgs e)
    {
        await content.TranslateTo(0, 0, 250, Easing.CubicIn);
    }
    async void OnAnimateExit(object sender, EventArgs e)
    {
        await content.TranslateTo(0, 200, 250, Easing.CubicOut);
        await this.CloseAsync();
    }
}

You don't have to limit yourself to TranslateTo. In the following:

• On Loaded, I animate both Scale and Opacity from 0 to 1
• When Done Button is pressed I animate both Scale and Opacity from 1 to 0

<!-- AnimPopup.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
    x:Class="Maui.StackOverflow.AnimPopup"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Color="Transparent">
    <Grid HeightRequest="200" WidthRequest="400">
        <Border
            x:Name="content"
            BackgroundColor="#ffe"
            Loaded="OnAnimateEntry"
            Opacity="0"
            Scale="0"
            StrokeShape="RoundRectangle 10, 10, 10, 10">
            <VerticalStackLayout
                Padding="10"
                Spacing="20"
                VerticalOptions="Center">
                <Label HorizontalOptions="Center" Text="Hello, World!" />
                <Button
                    Clicked="OnAnimateExit"
                    HorizontalOptions="Center"
                    Text="Done" />
            </VerticalStackLayout>
        </Border>
    </Grid>
</toolkit:Popup>

// AnimPopup.xaml.cs
using CommunityToolkit.Maui.Views;
namespace Maui.StackOverflow;
public partial class AnimPopup : Popup
{
    public AnimPopup()
    {
        InitializeComponent();
    }
    async void OnAnimateEntry(object sender, EventArgs e)
    {
        await Task.WhenAll(new Task[] {
            content.ScaleTo(1, 250, Easing.CubicIn),
            content.FadeTo(1, 250, Easing.CubicIn)
        });
    }
    async void OnAnimateExit(object sender, EventArgs e)
    {
        await Task.WhenAll(new Task[] {
            content.ScaleTo(0, 250, Easing.CubicOut),
            content.FadeTo(0, 250, Easing.CubicOut)
        });
        await this.CloseAsync();
    }
}

Refer to the documentation and choose an animation that suits your needs.

References:

• https://learn.microsoft.com/en-us/dotnet/maui/user-interface/animation/basic?view=net-maui-8.0
• https://learn.microsoft.com/en-us/dotnet/maui/user-interface/animation/custom?view=net-maui-8.0

[tranb3r]

Thanks a lot @stephenquan for your code samples. I will definitely try your solution.

[softlion]

So no out of the box animations ?