Add ExpanderAnimationBehavior, IExpansionController#3124
Add ExpanderAnimationBehavior, IExpansionController#3124stephenquan wants to merge 11 commits intoCommunityToolkit:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a pluggable expansion/collapse pipeline to Expander to enable animated transitions via an IExpansionController, plus a default animation behavior and updated samples demonstrating the new functionality.
Changes:
- Introduces
IExpansionControllerand wiresExpander.ExpansionControllerinto the expand/collapse flow. - Adds
ExpandedChanging+ExpandedChangingEventArgs, and refactorsExpandercontent handling to use aContentHostcontainer suitable for animation. - Adds
ExpanderAnimationBehaviorimplementingIExpansionController, and updates the sample page to demonstrate animation timing.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/CommunityToolkit.Maui/Views/Expander/Expander.shared.cs | Adds controller-based expand/collapse pipeline, new event, and ContentHost wrapper used for animation. |
| src/CommunityToolkit.Maui/Interfaces/IExpansionController.shared.cs | New interface to plug in animated (or instant) expand/collapse implementations. |
| src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs | New behavior implementing IExpansionController using Animation to animate expansion/collapse. |
| src/CommunityToolkit.Maui.Core/Primitives/ExpandedChangingEventArgs.shared.cs | New event args for “about to change expanded state”. |
| src/CommunityToolkit.Maui.Core/Primitives/Defaults/ExpanderAnimationBehaviorDefaults.shared.cs | Defaults for easing/duration used by ExpanderAnimationBehavior. |
| samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml.cs | Measures elapsed time between ExpandedChanging and ExpandedChanged and shows it in a toast. |
| samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml | Applies ExpanderAnimationBehavior in samples and hooks ExpandedChanging/ExpandedChanged handlers. |
src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
Outdated
Show resolved
Hide resolved
src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
Outdated
Show resolved
Hide resolved
src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
Outdated
Show resolved
Hide resolved
src/CommunityToolkit.Maui.UnitTests/Views/Expander/ExpanderTests.cs
Outdated
Show resolved
Hide resolved
samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml.cs
Outdated
Show resolved
Hide resolved
samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
Show resolved
Hide resolved
samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml.cs
Outdated
Show resolved
Hide resolved
samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml.cs
Outdated
Show resolved
Hide resolved
src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
Outdated
Show resolved
Hide resolved
src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
Outdated
Show resolved
Hide resolved
src/CommunityToolkit.Maui.UnitTests/Views/Expander/ExpanderTests.cs
Outdated
Show resolved
Hide resolved
| <mct:Expander x:DataType="sample:ContentCreator" | ||
| HeightRequest="180" | ||
| ExpandedChanged="Expander_ExpandedChanged"> |
There was a problem hiding this comment.
The GridItemsLayout sample sets a hard-coded HeightRequest="180" on the Expander, which prevents the control from naturally resizing based on expanded/collapsed state and introduces an unexplained magic number. If this is required as a workaround for GridItemsLayout item sizing, consider documenting why in a comment (or remove the fixed height and apply the animation behavior here instead) so the sample demonstrates expected expander behavior.
| _ = Dispatcher.Dispatch(async () => | ||
| { | ||
| await expansionGate.Task; | ||
| ResizeExpanderInItemsView2(tappedEventArgs); | ||
| }); |
There was a problem hiding this comment.
ResizeExpanderInItemsView awaits expansionGate.Task, but expansionGate is a mutable field that gets replaced on each IsExpanded change. With rapid toggles, this dispatched lambda can end up awaiting a different gate instance than the one completed by the corresponding transition, causing hangs/missed size updates. Capture the current gate/task into a local before dispatch/await, and ensure the same captured gate instance is the one completed by the matching expand/collapse transition.
| finally | ||
| { | ||
| expansionGate.TrySetResult(); | ||
| } |
There was a problem hiding this comment.
ExpandedChangedAsync signals completion via expansionGate.TrySetResult() on the mutable field. If expansionGate has been replaced by a newer transition while this async method was awaiting the controller, it will complete the wrong gate and leave the previous one uncompleted (which can block awaiting resize logic). Capture the current TaskCompletionSource into a local at the start of the transition and complete that captured instance in finally.
…EventArgs
Description of Change
Enables animated expand/collapse behavior for the
Expanderby wrapping the user’s contentExpander.Contentin aExpander.ContentHost(ContentView) and animating changes toExpander.ContentHost.HeightRequest.Expander.ContentHostproperty (read-only).IExpansionControllerinterface.Expander.ExpansionControllerproperty.Expander.ExpandedChangingevent withExpandedChangingEventArgs.ExpansionAnimationBehaviorbehavior.ExpandedAnimationBehavior.Opt in to animations by assigning
ExpansionAnimationBehaviorto either (1)Expander.Behaviors, or (2)Expander.ExpansionController. Alternatively, custom animations can be created by implementingIExpansionController.Linked Issues
PR Checklist
approved(bug) orChampioned(feature/proposal)mainat time of PRAdditional information
This is a reboot of the work that began in PR #2723 and PR #2522.