diff --git a/src/Controls/src/Core/Handlers/Items/CarouselViewHandler.Windows.cs b/src/Controls/src/Core/Handlers/Items/CarouselViewHandler.Windows.cs index 5efafef7e98b..5149539d195e 100644 --- a/src/Controls/src/Core/Handlers/Items/CarouselViewHandler.Windows.cs +++ b/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,7 @@ double GetItemWidth() if (CarouselItemsLayout.Orientation == ItemsLayoutOrientation.Horizontal) { - itemWidth = ListViewBase.ActualWidth - ItemsView.PeekAreaInsets.Left - ItemsView.PeekAreaInsets.Right; + itemWidth = ListViewBase.ActualWidth - ItemsView.PeekAreaInsets.Left - ItemsView.PeekAreaInsets.Right - ItemsView.ItemsLayout.ItemSpacing; } return Math.Max(itemWidth, 0); @@ -277,7 +281,7 @@ double GetItemHeight() if (CarouselItemsLayout.Orientation == ItemsLayoutOrientation.Vertical) { - itemHeight = ListViewBase.ActualHeight - ItemsView.PeekAreaInsets.Top - ItemsView.PeekAreaInsets.Bottom; + itemHeight = ListViewBase.ActualHeight - ItemsView.PeekAreaInsets.Top - ItemsView.PeekAreaInsets.Bottom - ItemsView.ItemsLayout.ItemSpacing; } return Math.Max(itemHeight, 0); @@ -597,5 +601,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; + } } } diff --git a/src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue29772ItemSpaceShouldApply.png b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue29772ItemSpaceShouldApply.png new file mode 100644 index 000000000000..7337dd8807c2 Binary files /dev/null and b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue29772ItemSpaceShouldApply.png differ diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue29772.cs b/src/Controls/tests/TestCases.HostApp/Issues/Issue29772.cs new file mode 100644 index 000000000000..563533dbd041 --- /dev/null +++ b/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.Green, + 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 Items { get; set; } + + public Issue29772_ViewModel() + { + Items = new ObservableCollection(); + for (var i = 0; i < 4; i++) + { + Items.Add($"Item {i}"); + } + } +} \ No newline at end of file diff --git a/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/Issue29772ItemSpaceShouldApply.png b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/Issue29772ItemSpaceShouldApply.png new file mode 100644 index 000000000000..dfc1621d7e5f Binary files /dev/null and b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/Issue29772ItemSpaceShouldApply.png differ diff --git a/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue29772.cs b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue29772.cs new file mode 100644 index 000000000000..39ca543b23c0 --- /dev/null +++ b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue29772.cs @@ -0,0 +1,22 @@ +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(); + } +} \ No newline at end of file diff --git a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/CarouselViewShouldRenderCorrectly.png b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/CarouselViewShouldRenderCorrectly.png index ba991729231c..99c93d6672d8 100644 Binary files a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/CarouselViewShouldRenderCorrectly.png and b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/CarouselViewShouldRenderCorrectly.png differ diff --git a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/Issue29772ItemSpaceShouldApply.png b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/Issue29772ItemSpaceShouldApply.png new file mode 100644 index 000000000000..1e3fd74dfc41 Binary files /dev/null and b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/Issue29772ItemSpaceShouldApply.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/Issue29772ItemSpaceShouldApply.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/Issue29772ItemSpaceShouldApply.png new file mode 100644 index 000000000000..a02bfb6ce6ad Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/Issue29772ItemSpaceShouldApply.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/Issue29772ItemSpaceShouldApply.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/Issue29772ItemSpaceShouldApply.png new file mode 100644 index 000000000000..9abdad597f3f Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/Issue29772ItemSpaceShouldApply.png differ