maui-collectionview

Name: maui-collectionview
Author: managedcode

461stars35forks

How to install maui-collectionview?

managedcode/dotnet-skills/maui-collectionview

$npx -y skills add managedcode/dotnet-skills --skill maui-collectionview

Installs into the current project.

Summary

Guidance for implementing CollectionView in .NET MAUI apps — data display, layouts (list & grid), selection, grouping, scrolling, empty views, templates, incremental loading, swipe actions, and pull-to-refresh. USE FOR: "CollectionView", "list view", "grid layout", "data template

Files · 1

View on GitHub

SKILL.md

1	# CollectionView — .NET MAUI
2
3	`CollectionView` is the primary control for displaying scrollable lists and grids of data in .NET MAUI. It replaces `ListView` with better performance, flexible layouts, and no `ViewCell` requirement.
4
5	## When to Use
6
7	- Displaying a scrollable list or grid of data items
8	- Binding a collection of objects to a templated item layout
9	- Adding selection (single or multiple), grouping, or pull-to-refresh
10	- Implementing infinite scroll / incremental loading
11	- Showing swipe actions on list items
12	- Displaying an empty state when no data is available
13
14	## When Not to Use
15
16	- Static layouts with a fixed number of items — use `Grid` or `StackLayout` directly
17	- Map pin lists — use the `Microsoft.Maui.Controls.Maps` NuGet package
18	- Table-based data entry forms — use standard form controls
19	- Simple text-only lists with no interaction — consider `BindableLayout` on a `StackLayout`
20
21	## Inputs
22
23	- A data source (typically `ObservableCollection<T>`) bound to `ItemsSource`
24	- A `DataTemplate` defining how each item renders
25	- Optional: layout configuration, selection mode, grouping model, empty view
26
27	## Basic Setup
28
29	```xml
30	<CollectionView ItemsSource="{Binding Items}">
31	<CollectionView.ItemTemplate>
32	<DataTemplate x:DataType="models:Item">
33	<HorizontalStackLayout Padding="8" Spacing="8">
34	<Image Source="{Binding Icon}" WidthRequest="40" HeightRequest="40" />
35	<Label Text="{Binding Name}" VerticalOptions="Center" />
36	</HorizontalStackLayout>
37	</DataTemplate>
38	</CollectionView.ItemTemplate>
39	</CollectionView>
40	```
41
42	Key rules:
43
44	- Bind `ItemsSource` to an `ObservableCollection<T>` so the UI updates on add/remove.
45	- Each item template root must be a `Layout` or `View` — never use `ViewCell`.
46	- Always set `x:DataType` on `DataTemplate` for compiled bindings.
47
48	## Layouts
49
50	Set `ItemsLayout` to control arrangement. Default is `VerticalList`.
51
52	\| Layout \| XAML value \|
53	\|---\|---\|
54	\| Vertical list \| `VerticalList` (default) \|
55	\| Horizontal list \| `HorizontalList` \|
56	\| Vertical grid \| `GridItemsLayout` with `Orientation="Vertical"` \|
57	\| Horizontal grid \| `GridItemsLayout` with `Orientation="Horizontal"` \|
58
59	### Grid Layout
60
61	```xml
62	<CollectionView ItemsSource="{Binding Items}">
63	<CollectionView.ItemsLayout>
64	<GridItemsLayout Orientation="Vertical"
65	Span="2"
66	VerticalItemSpacing="8"
67	HorizontalItemSpacing="8" />
68	</CollectionView.ItemsLayout>
69	<CollectionView.ItemTemplate>
70	<DataTemplate x:DataType="models:Item">
71	<Border Padding="8" StrokeThickness="0">
72	<VerticalStackLayout>
73	<Image Source="{Binding Image}" HeightRequest="120" Aspect="AspectFill" />
74	<Label Text="{Binding Name}" FontAttributes="Bold" />
75	</VerticalStackLayout>
76	</Border>
77	</DataTemplate>
78	</CollectionView.ItemTemplate>
79	</CollectionView>
80	```
81
82	### Horizontal List
83
84	```xml
85	<CollectionView ItemsSource="{Binding Items}"
86	ItemsLayout="HorizontalList" />
87	```
88
89	## Selection
90
91	### Selection Mode
92
93	\| Mode \| Property to bind \| Binding mode \|
94	\|---\|---\|---\|
95	\| `None` \| — \| — \|
96	\| `Single` \| `SelectedItem` \| `TwoWay` \|
97	\| `Multiple` \| `SelectedItems` \| `OneWay` \|
98
99	```xml
100	<CollectionView ItemsSource="{Binding Items}"
101	SelectionMode="Single"
102	SelectedItem="{Binding CurrentItem, Mode=TwoWay}"
103	SelectionChangedCommand="{Binding ItemSelectedCommand}" />
104	```
105
106	For `Multiple` selection, bind `SelectedItems` (type `IList<object>`):
107
108	```xml
109	<CollectionView SelectionMode="Multiple"
110	SelectedItems="{Binding ChosenItems, Mode=OneWay}" />
111	```
112
113	### Selected Visual State
114
115	Highlight selected items using `VisualStateManager`:
116
117	```xml
118	<CollectionView.ItemTemplate>
119	<DataTemplate x:DataType="models:Item">
120	<Grid Padding="8">
121	<VisualStateManager.VisualStateGroups>
122	<VisualStateGroup Name="CommonStates">
123	<VisualState Name="Normal">
124	<VisualState.Setters>
125	<Setter Property="BackgroundColor" Value="Transparent" />

People who liked this also viewed

6 picks

Type

maui-collectionview

461stars35forks

View on GitHub

How to install maui-collectionview?

managedcode/dotnet-skills/maui-collectionview

$npx -y skills add managedcode/dotnet-skills --skill maui-collectionview

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# CollectionView — .NET MAUI
2
3	`CollectionView` is the primary control for displaying scrollable lists and grids of data in .NET MAUI. It replaces `ListView` with better performance, flexible layouts, and no `ViewCell` requirement.
4
5	## When to Use
6
7	- Displaying a scrollable list or grid of data items
8	- Binding a collection of objects to a templated item layout
9	- Adding selection (single or multiple), grouping, or pull-to-refresh
10	- Implementing infinite scroll / incremental loading
11	- Showing swipe actions on list items
12	- Displaying an empty state when no data is available
13
14	## When Not to Use
15
16	- Static layouts with a fixed number of items — use `Grid` or `StackLayout` directly
17	- Map pin lists — use the `Microsoft.Maui.Controls.Maps` NuGet package
18	- Table-based data entry forms — use standard form controls
19	- Simple text-only lists with no interaction — consider `BindableLayout` on a `StackLayout`
20
21	## Inputs
22
23	- A data source (typically `ObservableCollection<T>`) bound to `ItemsSource`
24	- A `DataTemplate` defining how each item renders
25	- Optional: layout configuration, selection mode, grouping model, empty view
26
27	## Basic Setup
28
29	```xml
30	<CollectionView ItemsSource="{Binding Items}">
31	<CollectionView.ItemTemplate>
32	<DataTemplate x:DataType="models:Item">
33	<HorizontalStackLayout Padding="8" Spacing="8">
34	<Image Source="{Binding Icon}" WidthRequest="40" HeightRequest="40" />
35	<Label Text="{Binding Name}" VerticalOptions="Center" />
36	</HorizontalStackLayout>
37	</DataTemplate>
38	</CollectionView.ItemTemplate>
39	</CollectionView>
40	```
41
42	Key rules:
43
44	- Bind `ItemsSource` to an `ObservableCollection<T>` so the UI updates on add/remove.
45	- Each item template root must be a `Layout` or `View` — never use `ViewCell`.
46	- Always set `x:DataType` on `DataTemplate` for compiled bindings.
47
48	## Layouts
49
50	Set `ItemsLayout` to control arrangement. Default is `VerticalList`.
51
52	\| Layout \| XAML value \|
53	\|---\|---\|
54	\| Vertical list \| `VerticalList` (default) \|
55	\| Horizontal list \| `HorizontalList` \|
56	\| Vertical grid \| `GridItemsLayout` with `Orientation="Vertical"` \|
57	\| Horizontal grid \| `GridItemsLayout` with `Orientation="Horizontal"` \|
58
59	### Grid Layout
60
61	```xml
62	<CollectionView ItemsSource="{Binding Items}">
63	<CollectionView.ItemsLayout>
64	<GridItemsLayout Orientation="Vertical"
65	Span="2"
66	VerticalItemSpacing="8"
67	HorizontalItemSpacing="8" />
68	</CollectionView.ItemsLayout>
69	<CollectionView.ItemTemplate>
70	<DataTemplate x:DataType="models:Item">
71	<Border Padding="8" StrokeThickness="0">
72	<VerticalStackLayout>
73	<Image Source="{Binding Image}" HeightRequest="120" Aspect="AspectFill" />
74	<Label Text="{Binding Name}" FontAttributes="Bold" />
75	</VerticalStackLayout>
76	</Border>
77	</DataTemplate>
78	</CollectionView.ItemTemplate>
79	</CollectionView>
80	```
81
82	### Horizontal List
83
84	```xml
85	<CollectionView ItemsSource="{Binding Items}"
86	ItemsLayout="HorizontalList" />
87	```
88
89	## Selection
90
91	### Selection Mode
92
93	\| Mode \| Property to bind \| Binding mode \|
94	\|---\|---\|---\|
95	\| `None` \| — \| — \|
96	\| `Single` \| `SelectedItem` \| `TwoWay` \|
97	\| `Multiple` \| `SelectedItems` \| `OneWay` \|
98
99	```xml
100	<CollectionView ItemsSource="{Binding Items}"
101	SelectionMode="Single"
102	SelectedItem="{Binding CurrentItem, Mode=TwoWay}"
103	SelectionChangedCommand="{Binding ItemSelectedCommand}" />
104	```
105
106	For `Multiple` selection, bind `SelectedItems` (type `IList<object>`):
107
108	```xml
109	<CollectionView SelectionMode="Multiple"
110	SelectedItems="{Binding ChosenItems, Mode=OneWay}" />
111	```
112
113	### Selected Visual State
114
115	Highlight selected items using `VisualStateManager`:
116
117	```xml
118	<CollectionView.ItemTemplate>
119	<DataTemplate x:DataType="models:Item">
120	<Grid Padding="8">
121	<VisualStateManager.VisualStateGroups>
122	<VisualStateGroup Name="CommonStates">
123	<VisualState Name="Normal">
124	<VisualState.Setters>
125	<Setter Property="BackgroundColor" Value="Transparent" />

People who liked this also viewed

6 picks

Type