Expander animation

[BeepBeepBopBop]

It would be nice to be able to animate the Expander control upon expanding

More specifically:

For now the API includes a IsExpanded flag whose value changes whether only the header or the header + the content of the expander is shown.

It would be nice to add a way to add a visual animation for the transition between the "expanded" and "not expanded" state change induced by the toggling of IsExpanded property. For example adding another boolean property ShouldAnimateExpandedChanges or a method like ToggleIsExpanded providing a shouldAnimate parameter.

[CliffAgius]

Can you give a bit more information on what you are looking for here please.

[BeepBeepBopBop]

Sure, I have just updated my question with more specific information.

[stephenquan]

@BeepBeepBopBop would you be able to supply a referenced video (e.g. YouTube or animated gif), so we can visualize what you're after?

[BeepBeepBopBop]

Yes, there you go:

It's taken from the google page, and I have slowed it down by 0.5 so we can see what is going on better. But yeah that's more or less what I had in mind, maybe a ToggleIsExpanded method with boolean "animate" and int "animationLength" would be good.

[stephenquan]

You can implement this by hooking up animations to property change events on Expander.IsExpanded. In the following example:

• I define an Expander
• I define a caret
• I define an outerContent and an innerContent

When Expanded.IsExpanded=true

• I animate the caret from 0 to 180 degrees
• I grow the outerContent.Height from 0 to innerContent.Height

When Expanded.IsExpanded=false I do the converse.

<!-- ExpandPage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Maui.StackOverflow.ExpanderPage"
    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"
    x:Name="thisPage"
    Title="ExpanderPage">
    <VerticalStackLayout Padding="20,20,20,20" Spacing="20">
        <toolkit:Expander x:Name="expander">
            <toolkit:Expander.Header>
                <Grid ColumnDefinitions="*,Auto">
                    <Label Text="What is C# used for?" />
                    <Label x:Name="caret" Grid.Column="1" Text="^" />
                </Grid>
            </toolkit:Expander.Header>
            <ScrollView x:Name="contentOuter">
                <VerticalStackLayout x:Name="contentInner" Padding="0,20,0,20" Spacing="20">
                    <Label Text="Some of the most important C# uses that enterprises benefit from include web app development, game development, workflow applications, and Windows services." />
                    <Label Text="TestGorilla" />
                    <Label Text="What is C# used for and which companies used it? - TestGorilla" />
                </VerticalStackLayout>
            </ScrollView>
        </toolkit:Expander>
        <Label Text="Is C# easier than C++?" />
        <Label Text="Is it worth learning C# in 2024?" />
        <Label Text="Is C# difficult to learn?" />
        <Label Text="Is C# hard after Python?" />
    </VerticalStackLayout>
</ContentPage>

// ExpandPage.xaml.cs
using CommunityToolkit.Maui.Views;
namespace Maui.StackOverflow;
public partial class ExpanderPage : ContentPage
{
    public ExpanderPage()
    {
        InitializeComponent();
        expander.PropertyChanged += (s, e) =>
        {
            switch (e.PropertyName)
            {
                case nameof(Expander.IsExpanded):
                    if (expander.IsExpanded)
                    {
                        caret.RotateTo(180);
                        var animation = new Animation(v => contentOuter.HeightRequest = v, 0, contentInner.Height);
                        animation.Commit(this, "ExpandContent");
                    }
                    else
                    {
                        caret.RotateTo(0);
                        var animation = new Animation(v => contentOuter.HeightRequest = v, contentInner.Height, 0);
                        animation.Commit(this, "CollapseContent");
                    }
                    break;
            }
        };
    }
}

[IeuanWalker]

@stephenquan what if the content height is dynamic, i.e. some devices might wrap the text, so the height of the content would be different based on device size

[BeepBeepBopBop]

Thank you for your solution, I will try that

[stephenquan]

@IeuanWalker I've updated the example to support dynamic content height

[IeuanWalker]

@stephenquan the expand animation works fine, but the collapse animation doesn't. I suspect that this is an issue with the implementation and nothing we can do on our side.

Which is why support for animations to be built in would be best

I'm currently using this in our app, but I would switch to the toolkit version if it supported animations fully (expand/ collapse) - https://github.com/ewerspej/epj.Expander.Maui

Even tried subscribing to the PropertyChanging event instead to try and perform the animation before the control removes it, but still didn't work

[stephenquan]

@IeuanWalker I see makes sense, you're doing all the right things. The suggestions I've given you were workarounds.