[Windows] Fixed ItemSpacing doesn't work in Carousel View

src/Controls/src/Core/Handlers/Items/CarouselViewHandler.Windows.cs

@@ -14,6 +14,8 @@
 using WScrollMode = Microsoft.UI.Xaml.Controls.ScrollMode;
 using WSnapPointsAlignment = Microsoft.UI.Xaml.Controls.Primitives.SnapPointsAlignment;
 using WSnapPointsType = Microsoft.UI.Xaml.Controls.SnapPointsType;
+using WSetter = Microsoft.UI.Xaml.Setter;
+using WStyle = Microsoft.UI.Xaml.Style;
 
 namespace Microsoft.Maui.Controls.Handlers.Items
 {
@@ -163,7 +165,8 @@ ListViewBase CreateCarouselListLayout(ItemsLayoutOrientation layoutOrientation)
 				listView = new FormsListView()
 				{
 					Style = (UI.Xaml.Style)WApp.Current.Resources["HorizontalCarouselListStyle"],
-					ItemsPanel = (ItemsPanelTemplate)WApp.Current.Resources["HorizontalListItemsPanel"]
+					ItemsPanel = (ItemsPanelTemplate)WApp.Current.Resources["HorizontalListItemsPanel"],
+					ItemContainerStyle = GetItemContainerStyle(true)
 				};
 
 				ScrollViewer.SetHorizontalScrollBarVisibility(listView, WScrollBarVisibility.Auto);
@@ -173,7 +176,8 @@ ListViewBase CreateCarouselListLayout(ItemsLayoutOrientation layoutOrientation)
 			{
 				listView = new FormsListView()
 				{
-					Style = (UI.Xaml.Style)WApp.Current.Resources["VerticalCarouselListStyle"]
+					Style = (UI.Xaml.Style)WApp.Current.Resources["VerticalCarouselListStyle"],
+					ItemContainerStyle = GetItemContainerStyle(false)
 				};
 
 				ScrollViewer.SetHorizontalScrollBarVisibility(listView, WScrollBarVisibility.Disabled);
@@ -265,7 +269,10 @@ double GetItemWidth()
 
 			if (CarouselItemsLayout.Orientation == ItemsLayoutOrientation.Horizontal)
 			{
-				itemWidth = ListViewBase.ActualWidth - ItemsView.PeekAreaInsets.Left - ItemsView.PeekAreaInsets.Right;
+				if (ItemsView.PeekAreaInsets.Left > 0 || ItemsView.PeekAreaInsets.Right > 0)
+				{
+					itemWidth = ListViewBase.ActualWidth - ItemsView.PeekAreaInsets.Left - ItemsView.PeekAreaInsets.Right - ItemsView.ItemsLayout.ItemSpacing;
+				}
 			}
 
 			return Math.Max(itemWidth, 0);
@@ -277,7 +284,10 @@ double GetItemHeight()
 
 			if (CarouselItemsLayout.Orientation == ItemsLayoutOrientation.Vertical)
 			{
-				itemHeight = ListViewBase.ActualHeight - ItemsView.PeekAreaInsets.Top - ItemsView.PeekAreaInsets.Bottom;
+				if (ItemsView.PeekAreaInsets.Top > 0 || ItemsView.PeekAreaInsets.Bottom > 0)
+				{
+					itemHeight = ListViewBase.ActualHeight - ItemsView.PeekAreaInsets.Top - ItemsView.PeekAreaInsets.Bottom - ItemsView.ItemsLayout.ItemSpacing;
+				}
 			}
 
 			return Math.Max(itemHeight, 0);
@@ -597,5 +607,15 @@ void InvalidateItemSize()
 			}
 			ListViewBase.InvalidateMeasure();
 		}
+
+		WStyle GetItemContainerStyle(bool isHorizontalLayout)
+		{
+			var h = CarouselItemsLayout?.ItemSpacing > 0 ? (CarouselItemsLayout.ItemSpacing) / 2 : 0;
+			var padding = isHorizontalLayout ? WinUIHelpers.CreateThickness(h, 0, h, 0) : WinUIHelpers.CreateThickness(0, h, 0, h);
+
+			var style = new WStyle(typeof(ListViewItem));
+			style.Setters.Add(new WSetter(Control.PaddingProperty, padding));
+			return style;
+		}
 	}
 }

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

@@ -0,0 +1,80 @@
+using System.Collections.ObjectModel;
+
+namespace Controls.TestCases.HostApp.Issues;
+
+[Issue(IssueTracker.Github, 29772, "ItemSpacing doesnot work on CarouselView", PlatformAffected.UWP)]
+public class Issue29772 : ContentPage
+{
+	Issue29772_ViewModel ViewModel;
+	CarouselView carouselView;
+	public Issue29772()
+	{
+		ViewModel = new Issue29772_ViewModel();
+		BindingContext = ViewModel;
+		var stack = new StackLayout();
+
+		var descriptionlabel = new Label
+		{
+			Text = "ItemSpacing Should apply between items on CarouselView",
+			HorizontalTextAlignment = TextAlignment.Center,
+			AutomationId = "29772DescriptionLabel"
+		};
+
+		carouselView = new CarouselView
+		{
+			BackgroundColor = Colors.Red,
+			HeightRequest = 400,
+			WidthRequest = 300,
+			ItemsSource = ViewModel.Items,
+			Loop = false,
+			CurrentItem = "Item 0",
+			PeekAreaInsets = new Thickness(20, 0, 20, 0),
+			HorizontalScrollBarVisibility = ScrollBarVisibility.Never,
+			ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
+			{
+				ItemSpacing = 10,
+				SnapPointsAlignment = SnapPointsAlignment.Center,
+				SnapPointsType = SnapPointsType.MandatorySingle,
+			},
+
+			ItemTemplate = new DataTemplate(() =>
+			{
+				var grid = new Grid
+				{
+					Margin = 0,
+					Padding = 0,
+					BackgroundColor = Colors.Yellow
+				};
+
+				var label = new Label
+				{
+					FontSize = 24,
+					HorizontalOptions = LayoutOptions.Center,
+					VerticalOptions = LayoutOptions.Center
+				};
+				label.SetBinding(Label.TextProperty, ".");
+
+				grid.Children.Add(label);
+				return grid;
+			})
+		};
+
+		stack.Children.Add(descriptionlabel);
+		stack.Children.Add(carouselView);
+		Content = stack;
+	}
+}
+
+public class Issue29772_ViewModel
+{
+	public ObservableCollection<string> Items { get; set; }
+
+	public Issue29772_ViewModel()
+	{
+		Items = new ObservableCollection<string>();
+		for (var i = 0; i < 4; i++)
+		{
+			Items.Add($"Item {i}");
+		}
+	}
+}

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

@@ -0,0 +1,24 @@
+#if TEST_FAILS_ON_IOS && TEST_FAILS_ON_CATALYST // Open PR for iOS and Mac https://github.com/dotnet/maui/pull/27056
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue29772 : _IssuesUITest
+{
+	public Issue29772(TestDevice testDevice) : base(testDevice)
+	{
+	}
+
+	public override string Issue => "ItemSpacing doesnot work on CarouselView";
+
+	[Test]
+	[Category(UITestCategories.CarouselView)]
+	public void Issue29772ItemSpaceShouldApply()
+	{
+		App.WaitForElement("29772DescriptionLabel");
+		VerifyScreenshot();
+	}
+}
+#endif