Fixed-ItemSpacing-Issue-On-ItemsLayout

Author: prakashKannanSf3972

src/Controls/src/Core/Handlers/Items2/CollectionViewHandler2.iOS.cs

@@ -1,6 +1,7 @@
 #nullable disable
 using System;
 using System.Collections.Generic;
+using System.ComponentModel;
 using System.Text;
 using Foundation;
 using Microsoft.Maui.Handlers;
@@ -203,20 +204,29 @@ void SubscribeToItemsLayoutPropertyChanged(IItemsLayout itemsLayout)
 		{
 			if (itemsLayout is not null)
 			{
-				itemsLayout.PropertyChanged += (sender, args) =>
-				{
-					if (args.PropertyName == nameof(ItemsLayout.SnapPointsAlignment) ||
-						args.PropertyName == nameof(ItemsLayout.SnapPointsType) ||
-						args.PropertyName == nameof(GridItemsLayout.VerticalItemSpacing) ||
-						args.PropertyName == nameof(GridItemsLayout.HorizontalItemSpacing) ||
-						args.PropertyName == nameof(GridItemsLayout.Span) ||
-						args.PropertyName == nameof(LinearItemsLayout.ItemSpacing))
-
-					{
-						UpdateLayout();
-					}
-				};
+				itemsLayout.PropertyChanged -= ItemsLayoutPropertyChanged;
+				itemsLayout.PropertyChanged += ItemsLayoutPropertyChanged;
+			}
+		}
+
+		void ItemsLayoutPropertyChanged(object sender, PropertyChangedEventArgs e)
+		{
+			if (e.PropertyName == nameof(ItemsLayout.SnapPointsAlignment) ||
+				e.PropertyName == nameof(ItemsLayout.SnapPointsType) ||
+				e.PropertyName == nameof(GridItemsLayout.VerticalItemSpacing) ||
+				e.PropertyName == nameof(GridItemsLayout.HorizontalItemSpacing) ||
+				e.PropertyName == nameof(GridItemsLayout.Span) ||
+				e.PropertyName == nameof(LinearItemsLayout.ItemSpacing))
+
+			{
+				UpdateLayout();
 			}
 		}
+
+		protected override void DisconnectHandler(UIView platformView)
+		{
+			ItemsView.ItemsLayout.PropertyChanged -= ItemsLayoutPropertyChanged;
+			base.DisconnectHandler(platformView);
+		}
 	}
 }

src/Controls/src/Core/PublicAPI/net-ios/PublicAPI.Unshipped.txt

@@ -349,3 +349,4 @@ virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewHandler2<TItemsView>.Up
 *REMOVED*override Microsoft.Maui.Controls.Handlers.Compatibility.FrameRenderer.SetNeedsLayout() -> void
 *REMOVED*override Microsoft.Maui.Controls.Handlers.Compatibility.FrameRenderer.MovedToWindow() -> void
 override Microsoft.Maui.Controls.Handlers.Compatibility.VisualElementRenderer<TElement>.MovedToWindow() -> void
+~override Microsoft.Maui.Controls.Handlers.Items2.CollectionViewHandler2.DisconnectHandler(UIKit.UIView platformView) -> void

src/Controls/src/Core/PublicAPI/net-maccatalyst/PublicAPI.Unshipped.txt

@@ -348,4 +348,5 @@ virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewDelegator2<TItemsView,
 virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewHandler2<TItemsView>.UpdateLayout() -> void
 *REMOVED*override Microsoft.Maui.Controls.Handlers.Compatibility.FrameRenderer.SetNeedsLayout() -> void
 *REMOVED*override Microsoft.Maui.Controls.Handlers.Compatibility.FrameRenderer.MovedToWindow() -> void
-override Microsoft.Maui.Controls.Handlers.Compatibility.VisualElementRenderer<TElement>.MovedToWindow() -> void
+override Microsoft.Maui.Controls.Handlers.Compatibility.VisualElementRenderer<TElement>.MovedToWindow() -> void
+~override Microsoft.Maui.Controls.Handlers.Items2.CollectionViewHandler2.DisconnectHandler(UIKit.UIView platformView) -> void

src/Controls/tests/TestCases.HostApp/Issues/Issue27666.cs

@@ -0,0 +1,98 @@
+using System.Collections.ObjectModel;
+
+namespace Maui.Controls.Sample.Issues;
+
+[Issue(IssueTracker.Github, 27666, "Vertical list and Vertical grid pages have different abnormal behaviors when clicking Update after changing the spacing value", PlatformAffected.iOS | PlatformAffected.macOS)]
+
+public class Issue27666_NavigationPage : TestNavigationPage
+{
+	protected override void Init()
+	{
+		var root = CreateRootContentPage();
+		PushAsync(root);
+	}
+
+	ContentPage CreateRootContentPage()
+	{
+		ContentPage ContentPage = new ContentPage();
+
+		VerticalStackLayout rootLayout = new VerticalStackLayout
+		{
+			Spacing = 10,
+			Padding = new Thickness(10),
+		};
+
+		Button collectionViewButton = new Button
+		{
+			Text = "Navigate to VerticalList CollectionView",
+			AutomationId = "NavigationButton"
+		};
+		collectionViewButton.Clicked += (s, e) => Navigation.PushAsync(new Issue27666());
+
+		rootLayout.Add(collectionViewButton);
+		ContentPage.Content = rootLayout;
+		return ContentPage;
+	}
+}
+
+public partial class Issue27666 : TestContentPage
+{
+	ObservableCollection<string> items;
+	CollectionView collectionView;
+	protected override void Init()
+	{
+		items = new ObservableCollection<string>(Enumerable.Range(1, 30).Select(i => $"Item {i}"));
+		Button itemSpacingButton = CreateButton("Update ItemSpacing", "UpdateItemSpacingButton", OnItemSpacingButtonClicked);
+
+		collectionView = new CollectionView
+		{
+			AutomationId = "ItemsLayoutCollectionView",
+			ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal),
+			ItemsSource = items,
+			ItemTemplate = new DataTemplate(() =>
+			{
+				var label = new Label();
+				label.SetBinding(Label.TextProperty, ".");
+				return new Border
+				{
+					Content = label,
+					Padding = 10,
+					Margin = new Thickness(5),
+					BackgroundColor = Colors.LightGray,
+				};
+			})
+		};
+
+		Grid grid = new Grid
+		{
+			RowDefinitions =
+			{
+				new RowDefinition { Height = GridLength.Auto },
+				new RowDefinition { Height = GridLength.Star }
+			},
+			RowSpacing = 5
+		};
+		grid.Add(itemSpacingButton, 0, 0);
+		grid.Add(collectionView, 0, 1);
+
+		Content = grid;
+	}
+
+	Button CreateButton(string text, string automationId, EventHandler onClick)
+	{
+		return new Button
+		{
+			Text = text,
+			AutomationId = automationId,
+			Command = new Command(_ => onClick(this, EventArgs.Empty))
+		};
+	}
+
+	void OnItemSpacingButtonClicked(object sender, EventArgs e)
+	{
+		if (collectionView.ItemsLayout is LinearItemsLayout layout)
+		{
+			layout.ItemSpacing = layout.ItemSpacing == 0 ? 50 : 20;
+		}
+	}
+}

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue27666.cs

@@ -0,0 +1,28 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue27666 : _IssuesUITest
+{
+	public override string Issue => "Vertical list and Vertical grid pages have different abnormal behaviors when clicking Update after changing the spacing value";
+
+	public Issue27666(TestDevice device) : base(device) { }
+
+	[Test]
+	[Category(UITestCategories.CollectionView)]
+	public void VerifySpacingUpdateInItemsLayout()
+	{
+		App.WaitForElement("NavigationButton");
+		App.Tap("NavigationButton");
+		App.WaitForElement("ItemsLayoutCollectionView");
+		App.Tap("UpdateItemSpacingButton");
+		App.TapBackArrow();
+		App.WaitForElement("NavigationButton");
+		App.Tap("NavigationButton");
+		App.WaitForElement("ItemsLayoutCollectionView");
+		App.Tap("UpdateItemSpacingButton");
+		App.WaitForElement("ItemsLayoutCollectionView");
+	}
+}