ItemsSource supplies the collection that a collection-based view renders. In .NET MAUI, it is a bindable property used by controls such as CollectionView to turn a list of models into onscreen items. Pair it with ItemTemplate: ItemsSource provides the data, while the template defines each item’s appearance. section 4.3 section 3.5
A CollectionView is useful when a single Label holding newline-separated text is no longer enough. Bind ItemsSource to a collection, then bind controls inside its DataTemplate to properties of the current item. The item, rather than the whole collection, becomes the binding context inside that template. section 3.4.2 section 4.3.1
To display a changing to-do list, set it up in three parts:
- Keep the items in an ObservableCollection<TodoItem>, such as Todos. section 3.4.2
- Bind the CollectionView’s ItemsSource to Todos, either in XAML or through code. section 3.4.2 section 3.4.3
- Assign a DataTemplate through ItemTemplate and bind its controls to item properties, such as Title. section 3.4.2 section 3.5
Bind a CollectionView in XAML
Name the page, make it its own binding context, and bind the CollectionView to the Todos collection. This keeps the page’s bindings together in XAML and produces the same visible result as setting ItemsSource in code. section 3.4.3
Listing 3.15 MainPage.xaml ContentPage tag changes
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiTodo.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}"
x:Name="PageTodo" #1
BindingContext="{x:Reference PageTodo}"> #2
...
<CollectionView Grid.Row="4"
ItemsSource="{Binding Todos}" #3
x:Name="TodosCollection">
This XAML shows the page binding context and the CollectionView binding: ItemsSource="{Binding Todos}". section 3.4.3
ItemsSource accepts an IEnumerable<T> collection or an inherited collection type. A CollectionView can render that data as a vertical or horizontal list, or as a grid; its layout and selection behavior are separate concerns from supplying the items. section 4.3 section 4.3.1
The same pattern supports more than simple lists. An inbox can bind a CollectionView to an ObservableCollection populated from an HTTP response, while a search-results view can bind ItemsSource to a ViewModel collection and SelectedItem to the chosen result. An ActivityIndicator can make loading state visible alongside the collection. section 6.4.8 section 9.5.3
Choose a templated collection control when data determines what appears repeatedly. TableView is different: it does not use ItemsSource or a template, because its child views are added statically. section 4.3
