dotnet / dotnet/maui

[Enhancement] WrapLayout support in the CollectionView

Open
#1,808 1 comment 6 reactions 0 assignees View on GitHub
area-controls-collectionview area-layout layout-flex t/enhancement ☀️
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

## Description
I propose to create a new property for CollectionView called Wrap just like FlexLayout has:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout#the-wrap-property

- NoWrap, the default
- Wrap
- Reverse (or "wrap-reverse" in XAML)

## Summary
This feature is essential for people who need to create very dynamic designs in the DataTemplate of a CollectionView, being able to have columns with many rows and each element with a different width or height and being able to change rows if there is a column with enough width available. things that currently in Xamarin.Forms cannot be done trivially.

WrapLayout is a layout container that lets you position items in rows or columns, based on the orientation property. When the space is filled, the container automatically wraps items onto a new row or column.

A good example is the [AiForms.Layouts](https://github.com/muak/AiForms.Layouts) library that has the RepeatableWrapLayout control that allows this functionality but does not have a recycling system, so it would be interesting if the CollectionView had this functionality to take advantage of its recycling system.

**Sample image:**
![wrap](https://user-images.githubusercontent.com/20904914/127763014-aceb8e7e-385f-445a-a758-18f6aefcbf19.png)

**Sample video**
https://www.youtube.com/watch?v=9kE-OA9jz8c

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the CollectionView and FlexLayout implementations, then compare the requested NoWrap, Wrap, and Reverse behavior with the linked FlexLayout documentation and AiForms.Layouts example. Done means CollectionView supports the requested wrapping modes while retaining item recycling, with behavior validated across the relevant orientations and layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
frontend, mobile-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.