Change parts of Expander implementation to support animation

[stephenquan]

Description of Change

Refactor Expander to support animations:

• 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;

Reorganize the Expander to be implemented similar to the following XAML pseudo-code:

<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>

Linked Issues

#2521

Linked Discussions

#1628

PR Checklist

• Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
• Has tests (if omitted, state reason in description)
• Has samples (if omitted, state reason in description)
• Rebased on top of main at time of PR
• Changes adhere to coding standard
• Documentation created or updated: TODO: https://github.com/MicrosoftDocs/CommunityToolkit/pulls

Additional information

This PR was created to solicit suggestions from the team.

[IeuanWalker]

Just want to add i've been using this package for my expander - https://github.com/ewerspej/epj.Expander.Maui
(have made some changes locally to improve accessibility)

Might find some use from the code/ properties they have.

[stephenquan]

@TheCodeTraveler @VladislavAntonyuk based on today's (April) standup I have updated the Expander implementation to have animation properties. The code is not fully quite right because the last 2 edge conditions "Expander in CollectionView with LinearItemsLayout" and "Expander in CollectionView with GridItemsLayout" aren't working right.

[IeuanWalker]

Not sure if its possible in the current implementation or not. But in the modified version of https://github.com/ewerspej/epj.Expander.Maui i added a property (HasHeader) to remove/ hide the Header

This then allows me to use the expander to expand/ collapse any content, f.e. an alert at the top of the page -

2025-04-04.18-05-02.mp4

[stephenquan]

@IeuanWalker I'm not sure what your requirements in, but couldn't it be covered by setting Direction=Up and/or making the Header hidden/invisible?

[IeuanWalker]

@stephenquan sorry havnt really got time to dig into the code much.

Main issue with the other one was that a ContentView with a TapGesture was being added as a header automatically. So i wasnt setting the HeaderContent, and visually it looked completely fine. (no visible header like in the video)

But accessability wise the screenreader/ keyboard users could still interact with the blank ContentView/ TapGesture.

So added the new property to bind to the IsVisible property of the ContentView (which previously i couldn't influence outside of the control) to prevent the ContentView/ TapGesture from being accessed by the accessibility tools

[VladislavAntonyuk]

Thank you for your PR @stephenquan . As we discussed during the Community toolkit standup, it would be better to have a single bindable property, where the user can set AnimationBehavior he wants. It would be nice if we could reuse .NET MAUI Community Toolkit animations. Would you like to implement such behavior?

[stephenquan]

Thanks @VladislavAntonyuk, I don't think I fully understand, but I would like to. So, I will start by researching how the other CommunityToolkit Behaviors are written - is there any specific sample, code snippet I should be paying attention to?

[VladislavAntonyuk]

@stephenquan I mean instead of custom implementation and adding all properties like duration etc, create a single property and allow users set the whole animation.