MauiStaggeredCollectionView

MauiSamples.sln

@@ -139,12 +139,20 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Client.Android.UITests", "M
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Client", "MauiTests\Client\Client.csproj", "{5411B28C-9E39-4FAF-BC6E-448C0DC9F0BC}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MauiStaggeredCollectionView", "MauiStaggeredCollectionView\MauiStaggeredCollectionView.csproj", "{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}.Release|Any CPU.Build.0 = Release|Any CPU
+		{7139BF92-182F-4CA9-B2A0-DAF4110A8C12}.Release|Any CPU.Deploy.0 = Release|Any CPU
 		{B91198E0-08DE-41B6-9056-95F90C3E0AD8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{B91198E0-08DE-41B6-9056-95F90C3E0AD8}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{B91198E0-08DE-41B6-9056-95F90C3E0AD8}.Debug|Any CPU.Deploy.0 = Debug|Any CPU

MauiStaggeredCollectionView/App.xaml

@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MauiStaggeredCollectionView"
+             x:Class="MauiStaggeredCollectionView.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

MauiStaggeredCollectionView/App.xaml.cs

@@ -0,0 +1,11 @@
+namespace MauiStaggeredCollectionView;
+
+public partial class App : Application
+{
+	public App()
+	{
+		InitializeComponent();
+
+		MainPage = new AppShell();
+	}
+}

MauiStaggeredCollectionView/AppShell.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="MauiStaggeredCollectionView.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:MauiStaggeredCollectionView"
+    Shell.FlyoutBehavior="Disabled"
+    Title="MauiStaggeredCollectionView">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

MauiStaggeredCollectionView/AppShell.xaml.cs

@@ -0,0 +1,9 @@
+namespace MauiStaggeredCollectionView;
+
+public partial class AppShell : Shell
+{
+	public AppShell()
+	{
+		InitializeComponent();
+	}
+}

MauiStaggeredCollectionView/MainPage.xaml

@@ -0,0 +1,26 @@
+<?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"
+             xmlns:mauiStaggeredCollectionView="using:MauiStaggeredCollectionView"
+             x:Class="MauiStaggeredCollectionView.MainPage">
+
+	<CollectionView x:Name="MyCollectionView">
+		<CollectionView.ItemsLayout>
+			<mauiStaggeredCollectionView:StaggeredItemsLayout Span="2" />
+		</CollectionView.ItemsLayout>
+		<CollectionView.ItemTemplate>
+			<DataTemplate>
+				<Grid x:DataType="mauiStaggeredCollectionView:Card">
+					<Image Source="{Binding Image}"/>
+					<Label 
+						Text="{Binding Label}" 
+						HeightRequest="20"
+						VerticalOptions="End"
+					    BackgroundColor="Red"
+						Opacity="0.7"/>
+				</Grid>
+			</DataTemplate>
+		</CollectionView.ItemTemplate>
+	</CollectionView>
+
+</ContentPage>

MauiStaggeredCollectionView/MainPage.xaml.cs

@@ -0,0 +1,104 @@
+using System.Collections.ObjectModel;
+using Microsoft.Maui.Controls.Handlers.Items;
+
+namespace MauiStaggeredCollectionView;
+
+public record Card(string Label, string Image);
+public partial class MainPage : ContentPage
+{
+	public MainPage()
+	{
+		InitializeComponent();
+		MyCollectionView.ItemsSource = new ObservableCollection<Card>()
+		{
+			new("Image 1","https://picsum.photos/200/200"),
+			new("Image 2", "https://picsum.photos/100/50"),
+			new("Image 3", "https://picsum.photos/100/200"),
+			new("Image 4", "https://picsum.photos/200/100"),
+			new("Image 5", "https://picsum.photos/150/100"),
+			new("Image 6", "https://picsum.photos/120/150"),
+			new("Image 7", "https://picsum.photos/180/140"),
+			new("Image 8", "https://picsum.photos/200/50"),
+			new("Image 9", "https://picsum.photos/50/150"),
+			new("Image 10", "https://picsum.photos/50/100"),
+		};
+	}
+}
+
+public class StaggeredStructuredItemsViewHandler : StructuredItemsViewHandler<CollectionView>
+{
+	public StaggeredStructuredItemsViewHandler() : base(StaggeredStructuredItemsViewMapper)
+	{
+
+	}
+	public StaggeredStructuredItemsViewHandler(PropertyMapper? mapper = null) : base(mapper ?? StaggeredStructuredItemsViewMapper)
+	{
+
+	}
+
+	public static PropertyMapper<CollectionView, StructuredItemsViewHandler<CollectionView>> StaggeredStructuredItemsViewMapper = new(StructuredItemsViewMapper)
+	{
+		[StructuredItemsView.ItemsLayoutProperty.PropertyName] = MapItemsLayout
+	};
+
+#if ANDROID
+		private static void MapItemsLayout(StructuredItemsViewHandler<CollectionView> handler, CollectionView view)
+		{
+			var platformView = handler.PlatformView as MauiRecyclerView<CollectionView, ItemsViewAdapter<CollectionView, IItemsViewSource>, IItemsViewSource>;
+			switch (view.ItemsLayout)
+			{
+				case StaggeredItemsLayout staggeredItemsLayout:
+					platformView?.UpdateAdapter();
+					platformView?.SetLayoutManager(
+						new AndroidX.RecyclerView.Widget.StaggeredGridLayoutManager(
+							staggeredItemsLayout.Span, 
+							staggeredItemsLayout.Orientation == ItemsLayoutOrientation.Horizontal ? AndroidX.RecyclerView.Widget.StaggeredGridLayoutManager.Horizontal : AndroidX.RecyclerView.Widget.StaggeredGridLayoutManager.Vertical));
+					break;
+				default:
+					platformView?.UpdateLayoutManager();
+					break;
+			}
+		}
+#endif
+
+#if IOS || MACCATALYST
+		protected override ItemsViewLayout SelectLayout()
+		{
+			var itemsLayout = ItemsView.ItemsLayout;
+
+			if (itemsLayout is StaggeredItemsLayout staggeredItemsLayout)
+			{
+				return new StagLayout([(1d, 1d), (1d, 1d)], 0, staggeredItemsLayout, ItemSizingStrategy.MeasureAllItems);
+			}
+
+			return base.SelectLayout();
+		}
+#endif
+
+#if WINDOWS
+		protected override Microsoft.UI.Xaml.Controls.ListViewBase SelectListViewBase()
+		{
+			return this.VirtualView.ItemsLayout switch
+			{
+				StaggeredItemsLayout staggeredItemsLayout => new Microsoft.UI.Xaml.Controls.GridView() { },
+				_ => base.SelectListViewBase()
+			};
+		}
+#endif
+}
+
+public class StaggeredItemsLayout(ItemsLayoutOrientation orientation) : ItemsLayout(orientation)
+{
+	public static readonly BindableProperty SpanProperty = BindableProperty.Create(nameof(Span), typeof(int), typeof(StaggeredItemsLayout), default(int));
+
+	public StaggeredItemsLayout() : this(ItemsLayoutOrientation.Vertical)
+	{
+
+	}
+
+	public int Span
+	{
+		get => (int)GetValue(SpanProperty);
+		set => SetValue(SpanProperty, value);
+	}
+}

MauiStaggeredCollectionView/MauiProgram.cs

@@ -0,0 +1,17 @@
+namespace MauiStaggeredCollectionView;
+
+public static class MauiProgram
+{
+	public static MauiApp CreateMauiApp()
+	{
+		var builder = MauiApp.CreateBuilder();
+		builder
+			.UseMauiApp<App>()
+			.ConfigureMauiHandlers(c =>
+			{
+				c.AddHandler<CollectionView, StaggeredStructuredItemsViewHandler>();
+			});
+
+		return builder.Build();
+	}
+}

MauiStaggeredCollectionView/MauiStaggeredCollectionView.csproj

@@ -0,0 +1,31 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+	<PropertyGroup>
+		<OutputType>Exe</OutputType>
+		<RootNamespace>MauiStaggeredCollectionView</RootNamespace>
+
+		<!-- Display name -->
+		<ApplicationTitle>MauiStaggeredCollectionView</ApplicationTitle>
+
+		<!-- App Identifier -->
+		<ApplicationId>com.vladislavantonyuk.mauistaggeredcollectionview</ApplicationId>
+
+		<!-- Versions -->
+		<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+		<ApplicationVersion>1</ApplicationVersion>
+	</PropertyGroup>
+
+	<ItemGroup>
+		<!-- App Icon -->
+		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
+
+		<!-- Splash Screen -->
+		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
+
+		<!-- Images -->
+		<MauiImage Include="Resources\Images\*" />
+		<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />
+
+	</ItemGroup>
+
+</Project>

MauiStaggeredCollectionView/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+</manifest>

MauiStaggeredCollectionView/Platforms/Android/MainActivity.cs

@@ -0,0 +1,13 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+using Android.Views;
+using Android.Widget;
+using AndroidX.RecyclerView.Widget;
+
+namespace MauiStaggeredCollectionView;
+
+[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
+public class MainActivity : MauiAppCompatActivity
+{
+}

MauiStaggeredCollectionView/Platforms/Android/MainApplication.cs

@@ -0,0 +1,15 @@
+using Android.App;
+using Android.Runtime;
+
+namespace MauiStaggeredCollectionView;
+
+[Application]
+public class MainApplication : MauiApplication
+{
+	public MainApplication(IntPtr handle, JniHandleOwnership ownership)
+		: base(handle, ownership)
+	{
+	}
+
+	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+}

MauiStaggeredCollectionView/Platforms/Android/Resources/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#512BD4</color>
+    <color name="colorPrimaryDark">#2B0B98</color>
+    <color name="colorAccent">#2B0B98</color>
+</resources>

MauiStaggeredCollectionView/Platforms/MacCatalyst/AppDelegate.cs

@@ -0,0 +1,9 @@
+using Foundation;
+
+namespace MauiStaggeredCollectionView;
+
+[Register("AppDelegate")]
+public class AppDelegate : MauiUIApplicationDelegate
+{
+	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+}

MauiStaggeredCollectionView/Platforms/MacCatalyst/Entitlements.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <!-- See https://aka.ms/maui-publish-app-store#add-entitlements for more information about adding entitlements.-->
+    <dict>
+        <!-- App Sandbox must be enabled to distribute a MacCatalyst app through the Mac App Store. -->
+        <key>com.apple.security.app-sandbox</key>
+        <true/>
+        <!-- When App Sandbox is enabled, this value is required to open outgoing network connections. -->
+        <key>com.apple.security.network.client</key>
+        <true/>
+    </dict>
+</plist>
+

MauiStaggeredCollectionView/Platforms/MacCatalyst/Info.plist

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <!-- The Mac App Store requires you specify if the app uses encryption. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/itsappusesnonexemptencryption -->
+    <!-- <key>ITSAppUsesNonExemptEncryption</key> -->
+    <!-- Please indicate <true/> or <false/> here. -->
+
+    <!-- Specify the category for your app here. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/lsapplicationcategorytype -->
+    <!-- <key>LSApplicationCategoryType</key> -->
+    <!-- <string>public.app-category.YOUR-CATEGORY-HERE</string> -->
+	<key>UIDeviceFamily</key>
+	<array>
+		<integer>2</integer>
+	</array>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>XSAppIconAssets</key>
+	<string>Assets.xcassets/appicon.appiconset</string>
+</dict>
+</plist>

MauiStaggeredCollectionView/Platforms/MacCatalyst/Program.cs

@@ -0,0 +1,15 @@
+using ObjCRuntime;
+using UIKit;
+
+namespace MauiStaggeredCollectionView;
+
+public class Program
+{
+	// This is the main entry point of the application.
+	static void Main(string[] args)
+	{
+		// if you want to use a different Application Delegate class from "AppDelegate"
+		// you can specify it here.
+		UIApplication.Main(args, null, typeof(AppDelegate));
+	}
+}