dotnet / dotnet/maui

To enhance CollectionView to expand in both directions

Open
#3,849 1 comment 0 reactions 0 assignees View on GitHub
area-controls-collectionview proposal/open t/enhancement ☀️
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 14h
Merged PRs (30d)
296

Description

### Description

Summary
Currently, CollectionView allows VerticalGrid or HorizontalGrid. However, I find that it is Vertical centric. Horizontal Grouping should allow "line breaks".

When used with Grouping and a GroupHeaderTemplate I can get a very nice looking Vertical result. And because it is a CollectionView, I can do MultiSelect.

For this example, my data consists of Rooms and Pictures in rooms. Each room can have a random number of pictures associated with it.

Using a CollectionView with Grouping and a VerticalGrid of 4, I can get the Room Name on one row followed by however many rows are required to display the number of pictures, at 4 per row, that are required for that room. Then, for the next Room, the Room Name appears on the next row, etc. It looks like this:

A)
First Room
pic1 Pic2 Pic3 Pic4
Pic5 Pic6
Second Room
Pic7 Pic 8
Third Room
Pic9 picA PicB PicC
PicD
etc.

What I would like to do is display the Rooms and associated data vertically, but to list the Pictures on one row.
B)
First Room
pic1 Pic2 Pic3 Pic4 Pic5 Pic6
Second Room
Pic7 Pic 8
Third Room
Pic9 picA PicB PicC PicD
etc.

The use case for this would be: say we have 100 Rooms and each has up to 100 Pictures (think mansion or art gallery) and we want to scroll vertically thru the rooms to find a specific one. Then we want to scroll horizontally thru the Pictures to select several to send in an email. (and the selections could be from several Rooms)

Currently, if I set ItemsLayout="Horizontal" I get the following:
C)
First Room Pic1 Pic2 Pic3 Pic4 Pic5 Pic6 Second Room Pic7 Pic 8 Third Room Pic9 picA PicB PicC PicD

This is technically the Horizontal version of the Vertical display but it is of no use to me.

### Public API Changes

Plan A)
Basically, when displaying a Grouped set of data horizontally, when a new group is reached, a new row should be started. So, one way to indicate the change would be in the parameters for the Collection View to have a bool
HorizontalGroupsLineBreakOnChange="true"
Well, that is a bit long winded, but it gets the idea across.
I see it only being required for Horizontal displays.

Plan B)
Oh - another option would be to allow the display of a VerticalGrid to extend past the edge of the device. I tried
ItemsLayout="VerticalGrid, 4"
and got 4 images on a row. That worked fine. Then I tried:
ItemsLayout="VerticalGrid, 24"
and that did not look good. Even tho I told the image that it had 90x60 to display in, the program overrode that and tried to squeeze 24 images into the width of a phone.
If this gets implemented, there could be a bool
VerticalGridCanExceedTheWidthOfTheDevice="true"
or
HorizontalOverflowAllowed=true"

### Intended Use-Case

The use case for this would be: say we have 100 Rooms and each has up to 100 Pictures and we want to scroll vertically thru the rooms to find a specific one. Then we want to scroll horizontally thru the Pictures to select several to send in an email. (and the selections could be from several Rooms)

Contributor guide

Open the contributing guide

Research direction

Start with CollectionView's grouped layout behavior and the ItemsLayout modes described in the issue, reproducing the vertical and horizontal examples with grouped data. Define which behavior is intended—starting a new row at each group or allowing grid overflow—and verify that horizontal scrolling and multi-selection still work across groups.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
frontend
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.