[Proposal] Expander animation

[stephenquan]

Feature name

Expander update to support animation

Link to discussion

#1628

Progress tracker

• Android Implementation
• iOS Implementation
• MacCatalyst Implementation
• Windows Implementation
• Tizen Implementation
• Unit Tests
• Samples
• Documentation

Summary

This issue and corresponding PR is to continue a conversation that started in the discussion forums on how we may introduce animations to the Expander component.

Motivation

The Expander component could be improved to support animation.

Detailed Design

The current implementation for expanding and collapsing the Expander is via changing the Expander.Content.IsVisible property from false to true and vice versa which leaves little opportunity to introduce animations. Instead of using the IsVisible property, if the Content was placed inside a StackLayout, say, a VerticalStackLayout, then, we can implement animation by changing the Height of the VerticalStackLayout from 0 (or near zero) to the height of the Content. We do this with these properties:

• double ContentHeight get/set property
• double MinimumContentHeight get readonly property (which needs to be at least 1, since it doesn't work when it's 0)
• double MaximumContentHeight get readonly property
• Task<bool> ContentHeightTo(double value) method

Usage Syntax

To use, add a PropertyChanged event handler to your Expander, e.g.

<mct:Expander PropertyChanged="AnimateExpander">
    <mct:Expander.Header>
        <Label Text="Simple Expander (Tap Me)" FontSize="16" FontAttributes="Bold"/>
    </mct:Expander.Header>
    <mct:Expander.Content>
        <VerticalStackLayout>
             <Label Text="Item 1"/>
             <Label Text="Item 2"/>
         </VerticalStackLayout>
     </mct:Expander.Content>
</mct:Expander>

Then, in your code-behind, we invoke the animation when IsExpanded changes, e.g.

async void AnimateExpander(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == Expander.IsExpandedProperty.PropertyName)
    {
        Expander expander = (CommunityToolkit.Maui.Views.Expander)sender;
        expander.ContentHeight = expander.IsExpanded ? expander.MinimumContentHeight : expander.MaximumContentHeight;
        await expander.ContentHeightTo(expander.IsExpanded ? expander.MaximumContentHeight : expander.MinimumContentHeight, 250, Easing.CubicInOut);
    }
}

Drawbacks

There are several issues encountered:

• When collapsed, I couldn't set VerticalStackLayout.Height = 0 because, if I did, I couldn't calculate the height of the user's Content
• I tried to implement a PropertyChanging event handler (i.e. something that fires before the PropertyChanged) but I couldn't get it to work
• In the sample app, in the "Expander in CollectionView with GridItemsLayout" there were some quirks being observed when items were being collapsed

Alternatives

The animation could be moved to inside the Expander component and we can introduce properties such as:

• bool AnimationEnabled (default true)
• uint AnimationDuration (default 100)
• Easing? AnimationEasing (default null)

Unresolved Questions

No response