From e075ed6673e28f3385fc0c5ee4c7f2beee28d232 Mon Sep 17 00:00:00 2001
From: Stephen Quan <squan@esri.com>
Date: Mon, 16 Jun 2025 16:56:28 +1000
Subject: [PATCH 1/4] Refactor Expander.ContentHeight and
 ExpanderAnimationBehavior

---
 .../Pages/Views/Expander/ExpanderPage.xaml    |  16 +++
 .../ExpanderAnimationBehavior.shared.cs       | 111 ++++++++++++++++++
 .../Views/Expander/Expander.shared.cs         | 105 ++++++++++-------
 3 files changed, 192 insertions(+), 40 deletions(-)
 create mode 100644 src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs

diff --git a/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml b/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
index 15ddcb5973..cdc3f94d9b 100644
--- a/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
+++ b/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
@@ -28,6 +28,10 @@
                         <Label Text="Item 2"/>
                     </VerticalStackLayout>
                 </mct:Expander.Content>
+
+                <mct:Expander.Behaviors>
+                    <mct:ExpanderAnimationBehavior CollapsingLength="250" ExpandingLength="250"/>
+                </mct:Expander.Behaviors>
             </mct:Expander>
 
             <Label Text="Multi-level expander" FontSize="24" FontAttributes="Bold"/>
@@ -46,6 +50,9 @@
                         </mct:Expander.Content>
                     </mct:Expander>
                 </mct:Expander.Content>
+                <mct:Expander.Behaviors>
+                    <mct:ExpanderAnimationBehavior CollapsingLength="250" ExpandingLength="250"/>
+                </mct:Expander.Behaviors>
             </mct:Expander>
 
             <Label Text="Expander in ListView" FontSize="24" FontAttributes="Bold"/>
@@ -68,6 +75,9 @@
                                                HeightRequest="100"/>
                                     </VerticalStackLayout>
                                 </mct:Expander.Content>
+                                <mct:Expander.Behaviors>
+                                    <mct:ExpanderAnimationBehavior CollapsingLength="250" ExpandingLength="250"/>
+                                </mct:Expander.Behaviors>
                             </mct:Expander>
                         </ViewCell>
                     </DataTemplate>
@@ -92,6 +102,9 @@
                                                HeightRequest="100"/>
                                 </VerticalStackLayout>
                             </mct:Expander.Content>
+                            <mct:Expander.Behaviors>
+                                <mct:ExpanderAnimationBehavior CollapsingLength="250" ExpandingLength="250"/>
+                            </mct:Expander.Behaviors>
                         </mct:Expander>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
@@ -121,6 +134,9 @@
                                            HeightRequest="100"/>
                                 </VerticalStackLayout>
                             </mct:Expander.Content>
+                            <mct:Expander.Behaviors>
+                                <mct:ExpanderAnimationBehavior CollapsingLength="250" ExpandingLength="250"/>
+                            </mct:Expander.Behaviors>
                         </mct:Expander>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
diff --git a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
new file mode 100644
index 0000000000..9106c424fc
--- /dev/null
+++ b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
@@ -0,0 +1,111 @@
+using System.ComponentModel;
+using CommunityToolkit.Maui.Views;
+
+namespace CommunityToolkit.Maui.Behaviors;
+
+/// <summary>
+/// The <see cref="ExpanderAnimationBehavior"/> is a behavior that animates an <see cref="Expander"/> when it expands or collapses.
+/// </summary>
+public partial class ExpanderAnimationBehavior : BaseBehavior<Expander>
+{
+	/// <summary>
+	/// Backing BindableProperty for the <see cref="CollapsingLength"/> property.
+	/// </summary>
+	public static readonly BindableProperty CollapsingLengthProperty =
+		BindableProperty.CreateAttached(nameof(CollapsingLength), typeof(uint), typeof(ExpanderAnimationBehavior), 250u);
+
+	/// <summary>
+	/// Backing BindableProperty for the <see cref="CollapsingEasing"/> property.
+	/// </summary>
+	public static readonly BindableProperty CollapsingEasingProperty =
+		BindableProperty.CreateAttached(nameof(CollapsingEasing), typeof(Easing), typeof(ExpanderAnimationBehavior), Easing.Linear);
+
+	/// <summary>
+	/// Backing BindableProperty for the <see cref="ExpandingLength"/> property.
+	/// </summary>
+	public static readonly BindableProperty ExpandingLengthProperty =
+		BindableProperty.CreateAttached(nameof(ExpandingLength), typeof(uint), typeof(ExpanderAnimationBehavior), 250u);
+
+	/// <summary>
+	/// Backing BindableProperty for the <see cref="ExpandingEasing"/> property.
+	/// </summary>
+	public static readonly BindableProperty ExpandingEasingProperty =
+		BindableProperty.CreateAttached(nameof(ExpandingEasing), typeof(Easing), typeof(ExpanderAnimationBehavior), Easing.Linear);
+
+	/// <summary>
+	/// Length in milliseconds of the collapse animation when the <see cref="Expander"/> is collapsing.
+	/// </summary>
+	public uint CollapsingLength
+	{
+		get => (uint)GetValue(CollapsingLengthProperty);
+		set => SetValue(CollapsingLengthProperty, value);
+	}
+
+	/// <summary>
+	/// Easing of the <see cref="Expander"/> collapsing animation.
+	/// </summary>
+	public Easing CollapsingEasing
+	{
+		get => (Easing)GetValue(CollapsingEasingProperty);
+		set => SetValue(CollapsingEasingProperty, value);
+	}
+
+	/// <summary>
+	/// Length in milliseconds of the expand animation when the <see cref="Expander"/> is expanding.
+	/// </summary>
+	public uint ExpandingLength
+	{
+		get => (uint)GetValue(ExpandingLengthProperty);
+		set => SetValue(ExpandingLengthProperty, value);
+	}
+
+	/// <summary>
+	/// Easing of the <see cref="Expander"/> expanding animation.
+	/// </summary>
+	public Easing ExpandingEasing
+	{
+		get => (Easing)GetValue(ExpandingEasingProperty);
+		set => SetValue(ExpandingEasingProperty, value);
+	}
+
+	/// <summary>
+	/// 
+	/// </summary>
+	/// <param name="sender"></param>
+	/// <param name="e"></param>
+	protected override void OnViewPropertyChanged(Expander sender, PropertyChangedEventArgs e)
+	{
+		base.OnViewPropertyChanged(sender, e);
+
+		switch (e.PropertyName)
+		{
+			case nameof(Expander.IsExpanded):
+				if (sender.IsExpanded)
+				{
+					AnimateContentHeight(sender, 1.0, sender.BodyContentView.Height, ExpandingLength, ExpandingEasing);
+				}
+				else
+				{
+					AnimateContentHeight(sender, sender.BodyContentView.Height, 1.0, ExpandingLength, ExpandingEasing);
+				}
+				break;
+			case nameof(Expander.Header):
+			case nameof(Expander.Content):
+				sender.InvalidateMeasure();
+				break;
+		}
+	}
+
+	Task<bool> AnimateContentHeight(Expander expander, double fromValue, double toValue, uint length = 250, Easing? easing = null)
+	{
+		if (easing == null)
+		{
+			easing = Easing.Linear;
+		}
+		var tcs = new TaskCompletionSource<bool>();
+		expander.ContentHeight = fromValue;
+		var animation = new Animation(v => expander.ContentHeight = v, fromValue, toValue, easing);
+		animation.Commit(expander, nameof(AnimateContentHeight), 16, length, finished: (f, a) => tcs.SetResult(a));
+		return tcs.Task;
+	}
+}
diff --git a/src/CommunityToolkit.Maui/Views/Expander/Expander.shared.cs b/src/CommunityToolkit.Maui/Views/Expander/Expander.shared.cs
index cad239f1e3..dc07d99e96 100644
--- a/src/CommunityToolkit.Maui/Views/Expander/Expander.shared.cs
+++ b/src/CommunityToolkit.Maui/Views/Expander/Expander.shared.cs
@@ -23,6 +23,10 @@ public static readonly BindableProperty DirectionProperty
 		= BindableProperty.Create(nameof(Direction), typeof(ExpandDirection), typeof(Expander), ExpandDirection.Down, propertyChanged: OnDirectionPropertyChanged);
 
 	readonly WeakEventManager tappedEventManager = new();
+	readonly Grid contentGrid;
+	readonly ContentView headerContentView;
+	readonly VerticalStackLayout bodyLayout;
+	internal ContentView BodyContentView;
 
 	/// <summary>
 	/// Initialize a new instance of <see cref="Expander"/>.
@@ -32,14 +36,59 @@ public Expander()
 		HandleHeaderTapped = ResizeExpanderInItemsView;
 		HeaderTapGestureRecognizer.Tapped += OnHeaderTapGestureRecognizerTapped;
 
-		base.Content = new Grid
+		base.Content = contentGrid = new Grid
 		{
 			RowDefinitions =
 			{
 				new RowDefinition(GridLength.Auto),
 				new RowDefinition(GridLength.Auto)
+			},
+			Children =
+			{
+				(headerContentView = new ContentView()),
+				(bodyLayout = new VerticalStackLayout()
+				{
+					HeightRequest = 1,
+					Padding = new Thickness(0, 1, 0, 0),
+					Children = { (BodyContentView = new ContentView()) }
+				})
 			}
 		};
+
+		contentGrid.SetRow(headerContentView, 0);
+		contentGrid.SetRow(bodyLayout, 1);
+
+		#region Special case for bubbling height from nested Expanders
+		BodyContentView.PropertyChanged += (s, e) =>
+		{
+			if (e.PropertyName == nameof(Height))
+			{
+				if (IsExpanded)
+				{
+					ContentHeight = BodyContentView.Height;
+				}
+			}
+		};
+		#endregion
+
+		headerContentView.GestureRecognizers.Add(HeaderTapGestureRecognizer);
+	}
+
+	/// <summary>
+	/// Controls the visibility of the content inside the <see cref="Expander"/>.
+	/// </summary>
+	public double ContentHeight
+	{
+		get => bodyLayout.HeightRequest;
+		set
+		{
+			double newHeight = Math.Max(Math.Min(value, BodyContentView.Height + 1.0), 1.0);
+			if (bodyLayout.Height != newHeight)
+			{
+				bodyLayout.HeightRequest = newHeight;
+			}
+			OnPropertyChanged(nameof(ContentHeight));
+		}
 	}
 
 	/// <summary>
@@ -77,23 +126,12 @@ public ExpandDirection Direction
 		}
 	}
 
-	Grid ContentGrid => (Grid)base.Content;
-
 	static void OnContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
 	{
 		var expander = (Expander)bindable;
 		if (newValue is View view)
 		{
-			view.SetBinding(IsVisibleProperty, new Binding(nameof(IsExpanded), source: expander));
-
-			expander.ContentGrid.Remove(oldValue);
-			expander.ContentGrid.Add(newValue);
-			expander.ContentGrid.SetRow(view, expander.Direction switch
-			{
-				ExpandDirection.Down => 1,
-				ExpandDirection.Up => 0,
-				_ => throw new NotSupportedException($"{nameof(ExpandDirection)} {expander.Direction} is not yet supported")
-			});
+			expander.BodyContentView.Content = view;
 		}
 	}
 
@@ -102,17 +140,7 @@ static void OnHeaderPropertyChanged(BindableObject bindable, object oldValue, ob
 		var expander = (Expander)bindable;
 		if (newValue is View view)
 		{
-			expander.SetHeaderGestures(view);
-
-			expander.ContentGrid.Remove(oldValue);
-			expander.ContentGrid.Add(newValue);
-
-			expander.ContentGrid.SetRow(view, expander.Direction switch
-			{
-				ExpandDirection.Down => 0,
-				ExpandDirection.Up => 1,
-				_ => throw new NotSupportedException($"{nameof(ExpandDirection)} {expander.Direction} is not yet supported")
-			});
+			expander.headerContentView.Content = view;
 		}
 	}
 
@@ -126,21 +154,16 @@ static void OnDirectionPropertyChanged(BindableObject bindable, object oldValue,
 
 	void HandleDirectionChanged(ExpandDirection expandDirection)
 	{
-		if (Header is null || Content is null)
-		{
-			return;
-		}
-
 		switch (expandDirection)
 		{
 			case ExpandDirection.Down:
-				ContentGrid.SetRow(Header, 0);
-				ContentGrid.SetRow(Content, 1);
+				contentGrid.SetRow(headerContentView, 0);
+				contentGrid.SetRow(bodyLayout, 1);
 				break;
 
 			case ExpandDirection.Up:
-				ContentGrid.SetRow(Header, 1);
-				ContentGrid.SetRow(Content, 0);
+				contentGrid.SetRow(headerContentView, 1);
+				contentGrid.SetRow(bodyLayout, 0);
 				break;
 
 			default:
@@ -148,13 +171,6 @@ void HandleDirectionChanged(ExpandDirection expandDirection)
 		}
 	}
 
-	void SetHeaderGestures(in IView header)
-	{
-		var headerView = (View)header;
-		headerView.GestureRecognizers.Remove(HeaderTapGestureRecognizer);
-		headerView.GestureRecognizers.Add(HeaderTapGestureRecognizer);
-	}
-
 	void OnHeaderTapGestureRecognizerTapped(object? sender, TappedEventArgs tappedEventArgs)
 	{
 		IsExpanded = !IsExpanded;
@@ -201,6 +217,15 @@ void ResizeExpanderInItemsView(TappedEventArgs tappedEventArgs)
 
 	void IExpander.ExpandedChanged(bool isExpanded)
 	{
+		if (isExpanded)
+		{
+			ContentHeight = BodyContentView.Height + 1.0;
+		}
+		else
+		{
+			ContentHeight = 1.0;
+		}
+
 		if (Command?.CanExecute(CommandParameter) is true)
 		{
 			Command.Execute(CommandParameter);

From 753b85272fff2d5b842880faadcc01ce9d32563a Mon Sep 17 00:00:00 2001
From: Stephen Quan <squan@esri.com>
Date: Mon, 16 Jun 2025 21:36:34 +1000
Subject: [PATCH 2/4] Various improvements to ExpanderAnimationBehavior
 including Expanded and Collapsed event handlers

---
 .../Pages/Views/Expander/ExpanderPage.xaml    |  3 ++
 .../ExpanderAnimationBehavior.shared.cs       | 38 ++++++++++++-------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml b/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
index cdc3f94d9b..e9bbc597c0 100644
--- a/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
+++ b/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml
@@ -48,6 +48,9 @@
                         <mct:Expander.Content>
                             <Label Text="Item 1" />
                         </mct:Expander.Content>
+                        <mct:Expander.Behaviors>
+                            <mct:ExpanderAnimationBehavior CollapsingLength="250" ExpandingLength="250"/>
+                        </mct:Expander.Behaviors>
                     </mct:Expander>
                 </mct:Expander.Content>
                 <mct:Expander.Behaviors>
diff --git a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
index 9106c424fc..e684a59541 100644
--- a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
+++ b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
@@ -12,25 +12,25 @@ public partial class ExpanderAnimationBehavior : BaseBehavior<Expander>
 	/// Backing BindableProperty for the <see cref="CollapsingLength"/> property.
 	/// </summary>
 	public static readonly BindableProperty CollapsingLengthProperty =
-		BindableProperty.CreateAttached(nameof(CollapsingLength), typeof(uint), typeof(ExpanderAnimationBehavior), 250u);
+		BindableProperty.Create(nameof(CollapsingLength), typeof(uint), typeof(ExpanderAnimationBehavior), 250u);
 
 	/// <summary>
 	/// Backing BindableProperty for the <see cref="CollapsingEasing"/> property.
 	/// </summary>
 	public static readonly BindableProperty CollapsingEasingProperty =
-		BindableProperty.CreateAttached(nameof(CollapsingEasing), typeof(Easing), typeof(ExpanderAnimationBehavior), Easing.Linear);
+		BindableProperty.Create(nameof(CollapsingEasing), typeof(Easing), typeof(ExpanderAnimationBehavior), Easing.Linear);
 
 	/// <summary>
 	/// Backing BindableProperty for the <see cref="ExpandingLength"/> property.
 	/// </summary>
 	public static readonly BindableProperty ExpandingLengthProperty =
-		BindableProperty.CreateAttached(nameof(ExpandingLength), typeof(uint), typeof(ExpanderAnimationBehavior), 250u);
+		BindableProperty.Create(nameof(ExpandingLength), typeof(uint), typeof(ExpanderAnimationBehavior), 250u);
 
 	/// <summary>
 	/// Backing BindableProperty for the <see cref="ExpandingEasing"/> property.
 	/// </summary>
 	public static readonly BindableProperty ExpandingEasingProperty =
-		BindableProperty.CreateAttached(nameof(ExpandingEasing), typeof(Easing), typeof(ExpanderAnimationBehavior), Easing.Linear);
+		BindableProperty.Create(nameof(ExpandingEasing), typeof(Easing), typeof(ExpanderAnimationBehavior), Easing.Linear);
 
 	/// <summary>
 	/// Length in milliseconds of the collapse animation when the <see cref="Expander"/> is collapsing.
@@ -50,9 +50,7 @@ public Easing CollapsingEasing
 		set => SetValue(CollapsingEasingProperty, value);
 	}
 
-	/// <summary>
-	/// Length in milliseconds of the expand animation when the <see cref="Expander"/> is expanding.
-	/// </summary>
+	/// <summary>Length in milliseconds of the expand animation when the <see cref="Expander"/> is expanding.</summary>
 	public uint ExpandingLength
 	{
 		get => (uint)GetValue(ExpandingLengthProperty);
@@ -68,6 +66,16 @@ public Easing ExpandingEasing
 		set => SetValue(ExpandingEasingProperty, value);
 	}
 
+	/// <summary>
+	/// Occurs when the animation for the <see cref="Expander"/> finishes collapsing.
+	/// </summary>
+	public event EventHandler Collapsed;
+
+	/// <summary>
+	/// Occurs when the animation for the <see cref="Expander"/> finishes expanding.
+	/// </summary>
+	public event EventHandler Expanded;
+
 	/// <summary>
 	/// 
 	/// </summary>
@@ -82,17 +90,21 @@ protected override void OnViewPropertyChanged(Expander sender, PropertyChangedEv
 			case nameof(Expander.IsExpanded):
 				if (sender.IsExpanded)
 				{
-					AnimateContentHeight(sender, 1.0, sender.BodyContentView.Height, ExpandingLength, ExpandingEasing);
+					sender.Dispatcher.Dispatch(async () =>
+					{
+						await AnimateContentHeight(sender, 1.0, sender.BodyContentView.Height, ExpandingLength, ExpandingEasing);
+						Expanded?.Invoke(sender, EventArgs.Empty);
+					});
 				}
 				else
 				{
-					AnimateContentHeight(sender, sender.BodyContentView.Height, 1.0, ExpandingLength, ExpandingEasing);
+					sender.Dispatcher.Dispatch(async () =>
+					{
+						await AnimateContentHeight(sender, sender.BodyContentView.Height, 1.0, CollapsingLength, CollapsingEasing);
+						Collapsed?.Invoke(sender, EventArgs.Empty);
+					});
 				}
 				break;
-			case nameof(Expander.Header):
-			case nameof(Expander.Content):
-				sender.InvalidateMeasure();
-				break;
 		}
 	}
 

From 53b8c9218c06df24961f6746c6687a383e477f03 Mon Sep 17 00:00:00 2001
From: Stephen Quan <squan@esri.com>
Date: Mon, 16 Jun 2025 21:38:59 +1000
Subject: [PATCH 3/4] consistent xml doc

---
 .../Behaviors/ExpanderAnimationBehavior.shared.cs        | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
index e684a59541..eec00dd58e 100644
--- a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
+++ b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
@@ -50,7 +50,9 @@ public Easing CollapsingEasing
 		set => SetValue(CollapsingEasingProperty, value);
 	}
 
-	/// <summary>Length in milliseconds of the expand animation when the <see cref="Expander"/> is expanding.</summary>
+	/// <summary>
+	/// Length in milliseconds of the expand animation when the <see cref="Expander"/> is expanding.
+	/// </summary>
 	public uint ExpandingLength
 	{
 		get => (uint)GetValue(ExpandingLengthProperty);
@@ -76,11 +78,6 @@ public Easing ExpandingEasing
 	/// </summary>
 	public event EventHandler Expanded;
 
-	/// <summary>
-	/// 
-	/// </summary>
-	/// <param name="sender"></param>
-	/// <param name="e"></param>
 	protected override void OnViewPropertyChanged(Expander sender, PropertyChangedEventArgs e)
 	{
 		base.OnViewPropertyChanged(sender, e);

From 7bd6a1c7fe598e3c6d6ebbb7d9625fdf62fb67ba Mon Sep 17 00:00:00 2001
From: Stephen Quan <squan@esri.com>
Date: Tue, 17 Jun 2025 14:57:02 +1000
Subject: [PATCH 4/4] Make EventHandlers nullable

---
 .../Behaviors/ExpanderAnimationBehavior.shared.cs        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
index eec00dd58e..3ec4ae136b 100644
--- a/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
+++ b/src/CommunityToolkit.Maui/Behaviors/ExpanderAnimationBehavior.shared.cs
@@ -71,13 +71,18 @@ public Easing ExpandingEasing
 	/// <summary>
 	/// Occurs when the animation for the <see cref="Expander"/> finishes collapsing.
 	/// </summary>
-	public event EventHandler Collapsed;
+	public event EventHandler? Collapsed;
 
 	/// <summary>
 	/// Occurs when the animation for the <see cref="Expander"/> finishes expanding.
 	/// </summary>
-	public event EventHandler Expanded;
+	public event EventHandler? Expanded;
 
+	/// <summary>
+	/// Responds to the <see cref="Expander"/> property changes and triggers the expand/collapse animations.
+	/// </summary>
+	/// <param name="sender"></param>
+	/// <param name="e"></param>
 	protected override void OnViewPropertyChanged(Expander sender, PropertyChangedEventArgs e)
 	{
 		base.OnViewPropertyChanged(sender, e);