CollectionView

CollectionView displays a collection as scrollable, templated items. Bind its ItemsSource to the data collection, then assign a DataTemplate to ItemTemplate to describe one item’s UI. The control renders that template for every item; inside the template, bindings resolve against the individual item rather than the whole collection. section 3.4.2 section 4.3

Use CollectionView when a list needs more than plain text: a to-do item can show a title, due date, completion state, and conditional formatting; a message preview can combine an avatar, sender, subject, body preview, and sent time. A DataTemplate can contain an arbitrary layout, such as a Grid, with controls bound to item properties. section 3.4.2 section 6.4.8

Build a basic collection display in four steps:

• Create or obtain a collection of models, such as an ObservableCollection of to-do items or search-result products. section 3.4.2 section 9.5.3
• Place CollectionView in the page layout and bind ItemsSource to that collection. section 4.3 section 9.5.3
• Set ItemTemplate to a DataTemplate and bind its child controls to properties of one model, such as Name, Title, or ManufacturerName. section 3.4.2 section 9.5.3
• Configure layout and interaction when needed: the default is a vertical list; use horizontal or grid layouts, item spacing, and single or multiple selection. section 4.3.1 section 9.5.3

CollectionView is generally the flexible choice over ListView. ListView centers on predefined cell templates and supports only single selection, while CollectionView accepts layouts of your own design and supports multiple selection. ListView can be convenient for a simple predefined-cell list with context actions, but CollectionView is the recommended control for .NET MAUI lists. section 4.3.2

<CollectionView Grid.Row="4"
            x:Name="TodosCollection">                 #1
 
    <CollectionView.ItemTemplate>                     #2
 
        <DataTemplate>                                #3
            <Grid WidthRequest="350"                  #4
                Padding="10"
                Margin="0,20"
                ColumnDefinitions="2*, 5*"            #5
                RowDefinitions="Auto, 50"             #6
                x:Name="TodoItem">
 
                <CheckBox VerticalOptions="Center"    #7
                        HorizontalOptions="Center"
                        Grid.Column="0"
                        Grid.Row="0" />
 
                <Label Text="{Binding Title}"         #8
                    FontAttributes="Bold"
                    LineBreakMode="WordWrap"
                    HorizontalOptions="StartAndExpand"
                    FontSize="Large"
                    Grid.Row="0"
                    Grid.Column="1"/>
 
                <Label Text="{Binding Due, StringFormat=
 '{0:dd MMM yyyy}'}"                                #9
                    Grid.Column="1"
                    Grid.Row="1"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Inspect a concrete to-do item template: the CollectionView contains an ItemTemplate, whose Grid combines a CheckBox and a Label bound to Title. section 3.4.2