[Android] Fixed the CarouselView Items overlap issue with PeekAreaIns…

…ets (#27499)

* Fixed the CarouselView Items OverLap issue with PeekAreaInsets

* Included the Windows snapshot

* Fixed the CarouselView Items OverLap issue with PeekAreaInsets

* Included the Windows snapshot

* Recorrect the .xaml

* - Fix MeasureSpecMode checks in MauiCarouselRecyclerView

---------

Co-authored-by: Shane Neuville <[email protected]>

src/Controls/src/Core/Handlers/Items/Android/MauiCarouselRecyclerView.cs

@@ -1,4 +1,4 @@
-#nullable disable
+#nullable disable
 using System;
 using System.Collections.Generic;
 using Android.Content;
@@ -603,8 +603,16 @@ protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
 					var viewHolder = (ViewHolder)ItemsViewAdapter.CreateViewHolder(this, viewType);
 					ItemsViewAdapter.BindViewHolder(viewHolder, 0);
 					viewHolder.ItemView.Measure(widthMeasureSpec, heightMeasureSpec);
-					widthMeasureSpec = MeasureSpecMode.Exactly.MakeMeasureSpec(viewHolder.ItemView.MeasuredWidth);
-					heightMeasureSpec = MeasureSpecMode.Exactly.MakeMeasureSpec(viewHolder.ItemView.MeasuredHeight);
+
+					if (widthMeasureSpec.GetMode() == MeasureSpecMode.Unspecified)
+					{
+						widthMeasureSpec = MeasureSpecMode.Exactly.MakeMeasureSpec(viewHolder.ItemView.MeasuredWidth);
+					}
+
+					if (heightMeasureSpec.GetMode() == MeasureSpecMode.Unspecified)
+					{
+						heightMeasureSpec = MeasureSpecMode.Exactly.MakeMeasureSpec(viewHolder.ItemView.MeasuredHeight);
+					}
 				}
 			}
 			base.OnMeasure(widthMeasureSpec, heightMeasureSpec);

src/Controls/tests/TestCases.HostApp/Issues/Issue27418.xaml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Maui.Controls.Sample.Issues.Issue27418">
+
+    <VerticalStackLayout>
+        <CarouselView AutomationId="CarouselView"
+                      PeekAreaInsets="50"
+                      Loop="false"
+                      ItemsSource="{Binding CarouselItems}"
+                      HorizontalScrollBarVisibility="Never">
+            <CarouselView.ItemTemplate>
+                <DataTemplate>
+                    <VerticalStackLayout
+                        Spacing="25">
+                        <Label Text="{Binding LabelText}"
+                               FontSize="Large"/>
+                        <Image HeightRequest="200"
+                               WidthRequest="200"
+                               Source="dotnet_bot.png"/>
+                        <Button
+                            Text="{Binding ButtonText}"
+                            FontSize="Large"
+                            HorizontalOptions="Fill"/>
+                    </VerticalStackLayout>
+                </DataTemplate>
+            </CarouselView.ItemTemplate>
+        </CarouselView>
+    </VerticalStackLayout>
+
+</ContentPage>

src/Controls/tests/TestCases.HostApp/Issues/Issue27418.xaml.cs

@@ -0,0 +1,38 @@
+using System.Collections.ObjectModel;
+
+namespace Maui.Controls.Sample.Issues
+{
+	[Issue(IssueTracker.Github, 27418, "CarouselView Rendering Issue with PeekAreaInsets on Android Starting from .NET MAUI 9.0.21", PlatformAffected.Android)]
+	public partial class Issue27418 : ContentPage
+	{
+		public Issue27418()
+		{
+			InitializeComponent();
+			BindingContext = new Issue27418ViewModel();
+		}
+	}
+
+	public class Issue27418Model
+	{
+		public string LabelText { get; set; }
+		public string ButtonText { get; set; }
+	}
+
+	public class Issue27418ViewModel
+	{
+		public ObservableCollection<Issue27418Model> CarouselItems { get; set; }
+
+		public Issue27418ViewModel()
+		{
+			CarouselItems = new ObservableCollection<Issue27418Model>
+		{
+			new Issue27418Model { LabelText = "Page1",ButtonText = "Button1" },
+			new Issue27418Model { LabelText = "Page2",ButtonText = "Button2" },
+			new Issue27418Model { LabelText = "Page3",ButtonText = "Button3" },
+			new Issue27418Model { LabelText = "Page4",ButtonText = "Button4" },
+			new Issue27418Model { LabelText = "Page5",ButtonText = "Button5" },
+			new Issue27418Model { LabelText = "Page6",ButtonText = "Button6" },
+		};
+		}
+	}
+}

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

@@ -0,0 +1,25 @@
+#if TEST_FAILS_ON_CATALYST
+// When maximizing the window to verify the screenshot on Mac, resizing did not occur properly on cv1. Therefore, I have restricted Catalyst for now.
+// for more information , see https://github.com/dotnet/maui/issues/26969
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+	public class Issue27418 : _IssuesUITest
+	{
+		public Issue27418(TestDevice device) : base(device) { }
+
+		public override string Issue => "CarouselView Rendering Issue with PeekAreaInsets on Android Starting from .NET MAUI 9.0.21";
+
+		[Test]
+		[Category(UITestCategories.CarouselView)]
+		public void CarouselItemsShouldRenderProperly()
+		{
+			App.WaitForElement("CarouselView");
+			VerifyScreenshot();
+		}
+	}
+}
+#endif