Feature name

Expander update to support animation with new animation properties:

• bool AnimationsEnabled { get; set; } // default: true;
• Easing? CollapseEasing { get; set; } // default: null;
• unit CollapsingDuration { get; set; } // default: 250u;
• Easing? ExpandEasing { get; set; } // default: null;
• unit ExpandDuration { get; set; } // default: 250u;

Link to discussion

#1628

Progress tracker

• Android Implementation
• iOS Implementation
• MacCatalyst Implementation
• Windows Implementation
• Tizen Implementation
• Unit Tests
• Samples
• Documentation (TODO: document the 5 new properties)

Summary

This issue and the 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

[5th April 2025, Refactor/Rewrite]

We will achieve animation by putting the Content inside of a VerticalStackLayout and we will animate the VerticalStackLayout.Height. The pseudo-code of how this may work is:

<!-- Expander pseudo-code implementation: -->
<Grid RowDefinitions="Auto,Auto">
    <ContentView Content="{Binding Header}"/>
    <!-- Animations on VerticalStackLayout.Height from 1 (Collapsed) to Content.Height+1 (Expanded) -->
    <VerticalStackLayout Padding="0,1,0,0" HeightRequest="1">
       <ContentView Content="{Binding Content}"/>
    </VerticalStackLayout>
</Grid>

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 (it's why the VerticalStackLayout.Height starts at 1)
• One of the samples Expander with GridItemLayout doesn't consistently work

Unresolved Questions

No response